HEX Color Picker
Designers and developers juggle the same colour across four notations a hundred times a day. Click anywhere in the 2D saturation/value field, drag the hue slider, or paste a value, and this picker shows HEX, RGB, HSL, HSV and CMYK side by side — with WCAG contrast checks against black and white so you know straight away if the colour is readable.
How to pick a colour
-
1
Choose a hue
Drag the vertical hue slider through the full 0-360° spectrum.
-
2
Pick saturation and value
Click or drag inside the 2D square to set how vivid and how bright the colour is.
-
3
Fine-tune with the inputs
Type exact values in HEX, RGB, HSL, HSV or CMYK — all five fields stay synchronised.
-
4
Check accessibility and copy
Contrast ratios against black and white appear inline; one click copies the notation you need.
Colour notations in practice
Every colour model answers a slightly different question.
Notation reference
| Notation | Components | Where it is used |
|---|---|---|
| HEX | #RRGGBB | CSS, design tools, brand guides |
| RGB | red 0-255, green 0-255, blue 0-255 | CSS rgb(), image editors |
| HSL | hue 0-360°, saturation %, lightness % | CSS hsl(), design systems |
| HSV/HSB | hue 0-360°, saturation %, value/brightness % | Photoshop, Figma colour pickers |
| CMYK | cyan %, magenta %, yellow %, key/black % | Print, prepress |
| OKLCH | lightness %, chroma, hue | Modern CSS Color Module 4 palettes |
Accessibility contrast
WCAG 2.2 defines minimum contrast ratios between text and background:
- AA for normal text: ≥ 4.5:1
- AA for large text (18 pt or 14 pt bold): ≥ 3:1
- AAA for normal text: ≥ 7:1
The picker computes the ratio against white and against black in real time. If a custom foreground colour is critical, use a dedicated contrast checker for every pair.
Tips
- HEX is the default in most design tools, but short three-digit hex (
#F60) is equivalent to#FF6600, not#F06060. - HSL is friendlier for building palettes: lock the hue, vary lightness for tints and shades.
- CMYK and RGB cannot be perfectly interconverted — print CMYK depends on the press profile. Always proof print work on real paper.
- If you design for modern CSS, consider OKLCH for perceptually uniform lightness steps.
Frequently Asked Questions
Photoshop applies a colour profile (usually sRGB for screen, often different for print). Browsers render untagged HEX as sRGB. If your document is set to Adobe RGB or ProPhoto, the pixel values are the same but the perceived colour shifts.
Yes — both describe full red, with red at 255 and green and blue at 0. HEX is just a two-digit hexadecimal notation for each 0-255 channel value.
Pick your primary colour, switch to HSL, then vary lightness in 10% steps while keeping hue and saturation locked. You get a coherent ladder of tints and shades that sit on the same hue.
Recently used colours are kept in your browser’s local storage so they survive a refresh. Nothing is sent to a server, and you can clear the palette history any time.
Related Tools
Color Palette Generator
Generate a harmonious 4-8 colour palette from a base colour using complementary, analogous, triadic and split-complement schemes.
Random Color Generator
Generate a random RGB color, see the hex, HSL and RGB values, and copy any format in one click.
Random Color Palette Generator
Generate five-color palettes built on a random base hue, with complementary, analogous and triadic variants.
JSON Formatter
Format and pretty-print JSON with adjustable indent, sorted keys and inline validation that highlights errors at the exact position.
Random Letter Generator
Generate random letters from the English alphabet. Choose case, include duplicates or unique draws, and set how many.
Age Calculator
Calculate exact age in years, months and days from a birth date, plus total days, hours and the next birthday countdown.