Color Picker
Pick a colour, get every format, and five palettes that hold their hue.
Pick a colour from a square, a screen eyedropper or a hex code, copy it as HEX, RGB, HSL or OKLCH, and generate tints, shades and colour schemes with the contrast checked.
- Contrast against white
- 3.68:1 · large text only
- Contrast against black
- 5.71:1 · passes AA
- Perceptual lightness
- 62.3%
- Chroma
- 0.188
Tints and shades
Built by walking lightness in OKLCH while holding hue and chroma, rather than by mixing toward white. Mixing sRGB channels is what most palette tools do, and it drifts: lightening a saturated blue that way sends it through a washed-out lilac, because the arithmetic ignores both gamma and the fact that blue is perceptually dark.
Palettes from this colour
Complementary
Opposite on the wheelThe highest contrast two colours can have at the same lightness, which makes it loud. It works when one is clearly the accent and the other the ground; used at equal weight it vibrates.
Analogous
Neighbours, 30° either sideQuiet and cohesive, because the eye reads neighbouring hues as one family. It has no natural accent, so something else has to carry emphasis: lightness, size or weight.
Triadic
Three, evenly spacedBalanced and vivid. Keeping one dominant and the other two as accents stops it looking like a child's toy, which is the usual failure of a triad used at equal strength.
Split complementary
Opposite, then 30° either side of itMost of the contrast of a complementary pair without the vibration, because neither accent sits exactly opposite. It is the safest of these to use without much thought.
Tetradic
Two complementary pairsFour hues is more than most layouts can carry. It works when one dominates and the rest appear in small quantities, and falls apart when they are given equal space.
The hue rotations happen in OKLCH rather than HSL, and anything that lands outside what a screen can show is brought back by reducing chroma rather than by clipping the channels. Clipping changes the hue: a vivid orange pushed past the sRGB limit loses its red channel first and comes back looking yellow, which is not the colour that was asked for.
How the Color Picker works
The square is the ordinary saturation-and-brightness one. What is different is underneath: the palettes rotate hue in OKLCH rather than HSL, and anything that lands outside what a screen can show is brought back by reducing chroma rather than by clipping, so the colours stay the ones you asked for.
Also known as: colour picker online · hex color picker · color palette generator · rgb color picker · screen color picker
Frequently asked questions
How do I pick a colour from anywhere on my screen?
Press the eyedropper button and click anywhere, including outside the browser. It uses the EyeDropper API, which at the time of writing works in Chrome, Edge and other Chromium browsers but not Firefox or Safari, so the button only appears where it will actually work rather than failing silently.
What is OKLCH and why use it?
A colour space where equal steps look equal to the eye, which sRGB and HSL do not manage. It is why the tint and shade ramp here holds its hue: mixing sRGB channels toward white sends a saturated blue through a washed-out lilac, because the arithmetic ignores gamma and the fact that blue is perceptually much darker than yellow. OKLCH is supported in every current browser and can be written directly in CSS.
What is a complementary colour?
The one opposite on the colour wheel, which gives the highest contrast two colours can have at the same lightness. That makes it loud: it works when one is clearly the accent and the other the background, and vibrates unpleasantly when both are given equal weight. A split complementary, which uses the two colours either side of the opposite instead, keeps most of the contrast without the vibration.
Why do the palette colours look less vivid than I expected?
Because the rotated hue asked for more chroma than an sRGB screen can produce, so it was brought back to the most saturated version that is actually displayable. The alternative is clipping the channels, which is what most tools do and which changes the hue: a vivid orange pushed past the limit loses its red channel first and comes back looking yellow. Reducing chroma keeps the colour, just as intense as the screen allows.
What contrast ratio do I need?
WCAG asks for 4.5:1 for normal text and 3:1 for large text, meaning 18pt or 14pt bold, to reach level AA. Level AAA raises those to 7:1 and 4.5:1. Both figures are shown here against white and black. The ratio is calculated on linear light rather than raw channel values, which a surprising number of checkers get wrong, and getting it wrong overstates the contrast of mid-tones badly.
What is the difference between HSL and HSV?
Where white lives. In HSV, full brightness with no saturation is white and the picker square runs from the pure hue at the top right to black along the bottom, which is the square every colour picker draws. In HSL, lightness of 100 percent is white regardless of saturation, so the equivalent square would be white across its whole top edge. HSL is the better one to write in CSS; HSV is the better one to pick with.