Color Picker & Palette Generator — HEX, RGB, HSL Color Codes
Pick any color and get instant codes in HEX, RGB, HSL, CMYK, LAB, and XYZ. Switch to the Palette Generator to build harmonious brand color palettes using color theory — export as CSS variables, JSON, or save for later. Free color code picker online with contrast checking.
Three Ways to Write the Same Colour
HEX, RGB and HSL are not three kinds of colour. They are three notations for the same thing, and the reason all three survive is that each is easy to do something different with.
| Notation | Describes | Good for |
|---|---|---|
| HEX | Red, green and blue as pairs of hex digits | Copying an exact colour between tools |
| RGB | The same three channels as decimal numbers | Code, and adding transparency with an alpha value |
| HSL | Hue, saturation and lightness | Adjusting a colour deliberately |
HSL is the one worth learning if you design rather than just copy values. In HEX or RGB, making a colour slightly darker means changing three numbers in a coordinated way and hoping the hue does not shift. In HSL you reduce one number — lightness — and everything else stays where it was.
Reading a HEX Code Without a Converter
A HEX colour is three pairs: red, green, blue. Each pair runs from 00 to FF, which is 0 to 255 in decimal.
#RRGGBB #FF0000 → all red, no green, no blue #000000 → black #FFFFFF → white #808080 → mid grey (equal channels)
Two shortcuts follow from that. Any code with all three pairs equal is a shade of grey, so #333333 and #CCCCCC are grey without needing to be converted. And the three-digit form is just the six-digit one with each pair doubled — #F0A expands to #FF00AA — which is why only some colours can be written in shorthand.
An eight-digit code adds a fourth pair for transparency, where 00 is fully transparent and FF fully opaque.
Building a Palette That Holds Together
Palettes fail in two opposite ways: every colour fighting for attention, or everything so similar that nothing stands out. Both come from picking colours independently rather than deriving them from one another.
The reliable approach is to choose one base colour and generate the rest from it by moving around the hue circle in a defined way.
- Monochromatic — one hue at several lightness and saturation levels. Impossible to get wrong, and can be flat without an accent.
- Analogous — neighbouring hues. Harmonious and low-contrast, which suits backgrounds and calm interfaces.
- Complementary — the hue directly opposite. Maximum contrast, which makes it excellent for a single accent and exhausting if used in equal amounts.
- Triadic — three hues evenly spaced. Vivid and balanced, and it needs one dominant colour with the other two held back.
The common failure is treating a harmony rule as a licence to use every colour it produces at full strength. A workable interface palette is usually one dominant colour, one supporting colour and one accent used sparingly, with several neutral greys doing most of the actual work.
Contrast Is Not a Matter of Taste
Whether text is readable against a background is measurable rather than subjective. Contrast ratio compares the relative luminance of two colours and runs from 1:1, meaning identical, to 21:1 for black on white.
| Ratio | Generally suitable for |
|---|---|
| At least 4.5:1 | Normal body text |
| At least 3:1 | Large text, and meaningful interface elements |
| At least 7:1 | The stricter standard, useful for long-form reading |
Two points that catch designers out. Contrast depends on luminance rather than on how different two colours look, so two vivid colours of similar brightness — a mid red on a mid green, for instance — can be nearly unreadable despite looking wildly different. And light grey text on white, currently fashionable, frequently fails outright.
Colour should also never be the only thing carrying meaning. Around one in twelve men has some form of colour vision deficiency, so a red and green status indicator distinguished only by hue conveys nothing to them. Add a shape, a label or an icon alongside it.
Why the Same Colour Looks Different Elsewhere
A HEX code is an instruction, not a guarantee. What a viewer actually sees depends on their screen, its calibration and its colour profile, which is why a brand colour can look noticeably different across two monitors in the same room.
Print is a larger discontinuity. Screens emit light and mix red, green and blue; print reflects light and mixes cyan, magenta, yellow and black. Some screen colours — particularly bright, saturated ones — have no printable equivalent at all, and the conversion silently substitutes the nearest available. Anything destined for print should be checked as a proof rather than approved on screen.
For picking and converting values, use the tool above. For counting characters in the CSS you write around them, the word and character counter is on hand.