Why colour format conversion matters
Different design and development tools use different colour formats. Figma works in HEX and HSL. CSS accepts HEX, RGB, HSL, and the newer OKLCH. Tailwind CSS uses a curated HEX palette. Design tokens often use HSL for its human-readability. Moving between tools means constantly converting formats — the colour picker does this instantly.
How to pick and convert colours
Click the colour picker at the top to open your browser's native colour selection interface and choose any colour. Alternatively, type a HEX code directly into the HEX field, or enter RGB or HSL values in their respective tabs. All other formats update instantly whenever any input changes.
Understanding HEX colours
A HEX colour is a 6-character string preceded by #, where each pair of characters represents the red, green, and blue channels in hexadecimal (base 16). #FF0000 is pure red (FF = 255 in decimal), #00FF00 is pure green, #0000FF is pure blue. Shorthand 3-character HEX (#F00) expands each character: #F00 = #FF0000.
Understanding RGB
RGB specifies red, green, and blue channels as integers from 0 to 255. rgb(99, 102, 241) is ToolHive's accent colour — a mid-range red (99), slightly higher green (102), and a high blue value (241) that gives the indigo hue. Adding an alpha channel gives rgba(99, 102, 241, 0.5) for 50% opacity.
Understanding HSL — the designer's format
HSL is widely considered the most human-readable colour format. Hue is the colour angle on a colour wheel (0–360 degrees, where 0 and 360 are red, 120 is green, 240 is blue). Saturation is how vivid the colour is (0% is grey, 100% is fully saturated). Lightness is how bright it is (0% is black, 100% is white, 50% is the pure hue).
The power of HSL is that you can create harmonious variations by adjusting just one value. To make a colour lighter, increase L. To desaturate it, decrease S. This is how design systems generate their colour scales — from HSL(H, S, 95%) for a very light tint to HSL(H, S, 15%) for a very dark shade.
WCAG contrast ratios
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground text and background to ensure readability for people with low vision. The tool shows contrast ratios against both white and black backgrounds, with WCAG compliance labels: AAA (7:1 ratio — excellent), AA (4.5:1 — recommended minimum), AA Large (3:1 — acceptable for large text only), and Fail.
When choosing text colours for your interface, aim for AA compliance at minimum. Use the contrast ratio display to quickly check whether a chosen text colour will be readable against your background.
Shades and tints
The shades row at the bottom shows the selected hue at nine lightness levels from 10% to 90%, keeping the hue and saturation constant. Click any shade to make it the active colour. This is exactly how tools like Tailwind CSS generate their colour scales (e.g. indigo-100 through indigo-900).