Color Picker
Pick a colour and get HEX, RGB, HSL, OKLCH and contrast ratios.
Loading the colour picker…
About the Color Picker converter
Drag to choose a colour, or paste one you already have, and every notation you might need is right there to copy — along with the numbers that decide whether text will be readable on it.
It also generates the tints, shades and related hues you would otherwise reach for a design tool to produce.
Every notation, kept in step
HEX, RGB, HSL, HSV, CMYK, OKLCH and LAB are all shown at once, with alpha included only when the colour actually has any. Copy the one your file format wants.
CMYK is a naive arithmetic conversion with no colour profile attached, so treat it as an approximation and let your printer do the real separation.
Contrast before you commit
The ratios against white and black are computed from relative luminance exactly as WCAG defines it, so they match what an accessibility audit will report. 4.5:1 is the bar for body text, 3:1 for large text and interface components, 7:1 for AAA.
The answer is often not the one you expect: a mid-blue such as #3b82f6 scores 3.68 against white but 5.71 against black, even though white text on it is the more common habit.
Shades that stay the same colour
The 50–950 ramp is built in OKLCH, holding the hue fixed and stepping perceptual lightness. Ramps built by mixing towards white and black in sRGB drift in hue and go grey through the middle.
Chroma is eased off at both ends on purpose, because a near-white that keeps full chroma reads as a different, muddier colour rather than as a lighter version of the same one.
Harmony and colour vision
Complementary, analogous, triadic, tetradic and split-complementary sets are rotated in OKLCH so the results keep the lightness of the colour you started from. Rotate in HSL instead and the yellow comes out glaringly brighter than the blue.
The colour-vision preview shows how a hue shifts for the three common types of dichromacy. It is an approximation of one severe case, but it reliably catches the situation where two colours you thought were obviously different land on top of each other.
Frequently asked questions
Can I pick a colour from somewhere else on my screen?
Yes, if your browser supports the EyeDropper API — Chrome and Edge do, and the button only appears when it is available. Everywhere else, use your system colour picker through the swatch next to the text field.
What is OKLCH and should I use it?
A perceptual colour space where equal changes in the numbers look like equal changes to your eye, which sRGB and HSL do not manage. It is supported in every current browser and is the better choice for generating shades and rotating hues. Keep hex for anything that has to work in old email clients.
Why does the hue stay put when I drag to black?
Because black has no hue to remember. The picker keeps the hue you chose rather than resetting it, so dragging brightness down and back up returns you to the colour you were working on.
Is the colour-blindness preview accurate?
It uses the Viénot, Brettel and Mollon method and models complete absence of one cone type, which is the severe end. Milder anomalous trichromacy is far more common and less disruptive. Use it to catch collisions, not as a substitute for testing with people.
Do my colours leave the browser?
No. Everything here is arithmetic on a colour value, done in the page. Nothing is uploaded, and the tool works offline once loaded.