Pick a colour and read it back in ten notations, every one checked to parse back as the same colour. WCAG contrast ratios, the nearest CSS colour name, and colour vision simulation.
Initializing in your browser…
Convert between ten colour notations including Lab and OKLCH, check WCAG contrast, and simulate colour vision deficiency
Extract dominant, vibrant, or muted colors from images. Generate color schemes with HEX, RGB, HSL values and export palettes for design projects.
Build a CSS gradient and choose the colour space it is interpolated in, with the colour it keeps through the middle measured and shown.
A brand guide gives you only the hex value #3B82F6, and your tokens file needs the other notations. The question that decides whether this is a two second job or a bug is whether the values you copy out are still the same colour.
Picked colour
#3B82F6
Every notation, and whether it reads back
HEX #3B82F6 exact RGB rgb(59, 130, 246) exact HSL hsl(217.2, 91.2%, 59.8%) exact HWB hwb(217.219 23.137% 3.529%) exact Lab lab(54.62 8.77 -65.79) exact LCH lch(54.62 66.37 277.59) exact OKLab oklab(0.62308 -0.03325 -0.18505) exact OKLCH oklch(0.62308 0.18801 259.815) exact HSV hsv(217.2, 76%, 96.5%) exact CMYK cmyk(76%, 47.2%, 0%, 3.5%) exact Against white 3.68:1 fails AA at normal size Against black 5.71:1 passes AA Label to use #000000 at 5.71:1 Relative luminance 0.2355 Nearest CSS name dodgerblue, dE2000 5.69
Three things in that block are the whole point of the pass, and all three are places a colour picker usually goes quietly wrong.
The HSL line has a decimal place. Written the usual way, hsl(217, 91%, 60%), it is not this colour: paste it back and you get #3C83F6. Whole-number HSL can only address about a ninth of the sRGB cube, so most colours come back one to five levels away. Every value here is parsed back and compared with the colour it came from, and the word beside it says the result.
The Lab line is D50. CSS Color 4 defines lab() and lch() against a D50 white point while sRGB and most colour code use D65, and the two are far enough apart to see: the D65 Lab for this colour is lab(55.63 17.54 -64.42), and a browser paints that as #627FF7, about 8 dE2000 away. Copying a Lab value out of a colour tool into a stylesheet without checking the white point is a real and silent way to change a brand colour.
The contrast lines say to put black on this blue, not white. White gives 3.68:1, which fails WCAG AA at normal size; black gives 5.71:1, which passes. The usual rule for choosing a label, a 0.299/0.587/0.114 brightness average against a 0.5 threshold, picks the lower-contrast option for about a seventh of the sRGB cube, and on rgb(0, 111, 252) it picks white at 4.49:1 where black gives 4.68:1: the difference between failing AA and passing it. The same brightness average is what usually gets printed as "luminance". Relative luminance, the linear-light quantity WCAG actually defines, is 0.2355 here, and for mid grey it is 0.2159 where the brightness average says 0.5.
Pick a colour on the canvas or paste one in any notation, and read it back in ten: hex, rgb, hsl, hwb, lab, lch, oklab, oklch, hsv and cmyk. Every value is parsed back and checked against the colour it came from, so what is on the screen is the colour rather than a rounded version of it.
Rounding is the failure mode a colour picker never mentions. Hue, saturation and lightness rounded to whole numbers, which is what a value like hsl(217, 91%, 60%) is, survives a round trip for only 11 percent of the sRGB cube: paste it back and you get a colour up to five levels away from the one you picked. One decimal place is enough to keep all of it, and that is what is printed here. The claim is checked rather than asserted: every notation on the page is parsed back and compared with the colour it came from, and the badge beside each one says so.
The browser is the other judge, because a value is only useful if the thing that will eventually read it agrees. Handing each printed value to a canvas fillStyle, which both refuses anything CSS does not accept and resolves what it does to sRGB, hex, rgb, hsl, hwb and oklch come back exactly. lab() and lch() come back within one level of 255 on about one colour in a hundred, and that gap is the browser’s transform rather than the precision: the same value at 3, 6 and 9 decimal places lands on the same pixel, and the difference is in the last decimal of the sRGB to XYZ matrices.
The white point is not a detail either. CSS Color 4 defines lab() and lch() against D50, not the D65 that sRGB uses. A Lab value computed under D65 and pasted into a stylesheet is a different colour: for this page’s default blue, lab(55.63 17.54 -64.42) is the D65 value and a browser paints it as #627FF7 rather than #3B82F6, a difference of about 8 dE2000, which is plainly visible. The lab() and lch() values here are D50 for that reason.
Two numbers usually sit beside a swatch and both are usually wrong. "Luminance" printed as a percentage is almost always 0.299R + 0.587G + 0.114B, which is YIQ luma on gamma-encoded values, not luminance: for mid grey it says 50 percent where relative luminance, the linear-light quantity WCAG defines, is 0.2159. And the label colour on the swatch is usually chosen by putting that same number against a 0.5 threshold, which picks the lower-contrast label for about a seventh of the cube. On rgb(0, 111, 252) it picks white at 4.49:1 where black gives 4.68:1, which is exactly the line between failing WCAG AA and passing it. Here the label is chosen by comparing the two contrast ratios, and both ratios are shown.
The colour is named by finding the nearest of the 148 CSS colour names measured in CIEDE2000 rather than by looking it up in a table of a dozen, so a colour gets a name and a distance rather than "Custom Color". And the four colour vision deficiencies are simulated with the Vienot and Brettel projections applied in linear light, where they are defined. The same matrices applied to gamma-encoded values, which is how they are usually copied, move a saturated colour by more than 20 dE2000.
One limit worth stating plainly: everything here is sRGB. Display P3 and the wider gamuts CSS Color 4 defines are not offered, so a colour that only exists outside sRGB cannot be picked or shown.
oklch(0.62308 0.18801 259.815) is accepted and comes back as #3B82F6, and the page says which notation it recognised.
#fff is white. A picker that only matches six digit hex reads it as black, which is a common and silent failure.
On rgb(0, 111, 252) a brightness threshold picks white at 4.49:1. Comparing the ratios picks black at 4.68:1, which is the choice that passes AA.
#22C55E is seen as #A6A664 with deuteranopia, computed in linear light. The widely copied gamma-space version of the same matrices gives #8F8F63, which is a different answer.
Design tools prefer hex, dev tools show rgb, preprocessors use hsl, and token files increasingly use oklch. Every one of those is printed here with the precision that survives the trip.
The contrast ratios against white and black are given as numbers, with the WCAG verdict, rather than a colour picked by a brightness rule.
The EyeDropper API reads any pixel on the display, including from other applications, in the browsers that implement it.
Four simulations with the perceptual distance from the original, so "these two look the same to a protanope" becomes a number.
Hex or rgb for a static colour, because every tool reads them. OKLCH when you are generating colours programmatically: changing its lightness leaves the perceived hue and saturation alone, which HSL does not. HSL is fine to write by hand as long as whatever prints it does not round to whole numbers.
Because it was rounded. Hue, saturation and lightness as whole numbers can only address about a ninth of the sRGB cube, so most colours land on a neighbour up to five levels away when you convert back. One decimal place is enough to make the trip lossless, and that is what this page prints.
Almost certainly the white point. CSS defines lab() and lch() against D50, while sRGB and most colour code use D65. The two differ enough to matter: the D65 Lab for #3B82F6, pasted into a stylesheet, paints as #627FF7.
No, and the difference is large. Relative luminance is defined on linear-light values and is what a contrast ratio is built from. The 0.299/0.587/0.114 average that most pickers print as luminance is YIQ luma on gamma-encoded values: for mid grey it says 0.5 where relative luminance is 0.2159.
Where the browser has the EyeDropper API, which Chrome, Edge and Opera do, the Screen button samples any pixel on the display including from other applications. Safari and Firefox have not implemented it, and the page says so rather than offering a button that does nothing.
This runs as client-side JavaScript. Keys, tokens, payloads, and other inputs never leave your device.