Color Picker

HEX, RGB, and HSL — what's the difference?

All three are ways of writing the same colour down. They describe exactly the same set of pixels on your screen — the differences are ergonomic, not perceptual.

• HEX — six hex digits encoding red, green, blue (00 to FF per channel). #e8c547 means red=232, green=197, blue=71. Compact, perfect for pasting into CSS, the lingua franca of design files.
• RGB — same information as decimal numbers: rgb(232, 197, 71). Easier to compute on than HEX but longer to type. CSS also supports rgb() with alpha transparency: rgb(232 197 71 / 0.5).
• HSL — hue (0–360°), saturation (%), lightness (%). hsl(47, 79%, 59%). The one designers actually prefer to edit, because "a little more saturated" or "a bit darker" maps to moving a single number — something HEX and RGB don't let you do cleanly.

A quick tour of the HSL trick

Want a darker version of your brand colour for hover states? Take the HSL value and drop the L by 10%. Want a muted version for backgrounds? Drop the saturation. Need a complementary accent? Shift the hue by 180°. None of this is obvious from HEX. This is why most design systems store colours in HSL internally even if they output HEX. Try it — pick a colour, note its HSL, then pick something that looks "related" and compare the three HSL numbers.

sRGB — the colour space this tool assumes

The values you see are in the sRGB colour space, which is what the web uses by default and what every laptop screen produces unless the user has explicitly switched. If you're doing print work or working on a P3‑calibrated monitor for photography, the colour you pick here will look slightly different when printed or shown on a wide‑gamut display. For digital‑only design (web, app UI, social graphics), sRGB is exactly right.

Accessibility contrast — the bit this tool doesn't do

Picking a pretty colour isn't the same as picking an accessible one. For body text, WCAG AA requires a contrast ratio of 4.5:1 against the background; AAA is 7:1. Pale yellow on white looks nice but fails both. If you're picking a text colour, check the HEX you landed on against the background in a WCAG contrast checker before shipping.

Palette generator

The random palette function generates five colours with varied hues but constrained saturation and lightness — that constraint is what makes them feel like a palette rather than five unrelated colours. Click generate a few times and save the ones you like from the history row.