Convert between ten colour notations including Lab and OKLCH, check WCAG contrast, and simulate colour vision deficiency
Initializing in your browser…
Build a colour harmony that holds its lightness by rotating hue in OKLCH, with the contrast of every pair, a perceptually even tint and shade ramp, and what a colour blind reader sees
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.
Convert between Unix timestamps and dates in any of 400+ time zones, in seconds, milliseconds, microseconds or nanoseconds
A brand blue has to go into CSS, into a print spec, and into an accessibility check, and you want to know how someone with a colour vision deficiency sees it.
Input
dodgerblue
Same colour, ten notations
HEX #1E90FF RGB rgb(30, 144, 255) HSL hsl(209.6, 100%, 55.9%) Lab lab(59.38 9.96 -63.39) under D65 OKLCH oklch(0.652 0.1901 253.21) As a protanope: #8585FF, moves 14.7 dE2000 On white: 3.24:1, fails AA for normal text
Every notation is a reversible transform of the same value, so converting out and back returns the exact 8-bit colour; nothing is rounded to whole degrees before it is converted onward. Lab and XYZ name the white point they are under, because the same colour has different Lab numbers under D65 and D50. The colour vision simulation runs the Vienot and Brettel projections in linear light, where they are defined, rather than applying the matrix to gamma-encoded values, which on a saturated green is 38.6 dE2000 away from the right answer.
Ten notations for the same colour: HEX, RGB, HSL, HSV, CMYK, XYZ, Lab, LCH, OKLab and OKLCH. Type a colour in any of them, or as a CSS name, and read it in all the others. Every conversion is a reversible transform of the same value, so going out and back returns the exact 8-bit colour you started from, in all nine spaces; nothing is rounded to whole degrees or whole percents before it is converted onward. Which notation to use depends on the job. HEX is the web default because it is short and every tool accepts it. HSL and HSV rearrange the same RGB cube into a cylinder, which is why they are what colour pickers show. CMYK is an ink model. Lab, LCH, OKLab and OKLCH are perceptual: equal distances in them look roughly equal, which is what you want for measuring how different two colours are or for stepping evenly through a scale. OKLCH in particular is a CSS Color 4 notation and has better hue uniformity than Lab, so a change in lightness does not drag the hue with it.
Three details decide whether a colour tool is right, and all three are visible in the numbers.
sRGB is not a plain 2.2 gamma. IEC 61966-2-1 defines a linear segment below 0.04045 and a 2.4 power above it, and the difference is not small: at the darkest values a plain 2.2 curve is 98 percent out. Every conversion here uses the real transfer function, in both directions.
XYZ and Lab mean nothing without a white point. The same colour is L*53.24 a*80.09 b*67.20 under D65 and L*54.29 a*80.81 b*69.89 under D50, and across the gamut the two differ by up to 12 units. Both are offered, the choice is a control, and the white point in force is named next to the value. D65 is what sRGB and the web use; D50 is the ICC and print default.
Colour vision simulation matrices are defined on linear light. The 3x3 protanopia matrix that circulates on the web is usually applied straight to 0-255 sRGB values, which are gamma encoded, and the result is up to 28 dE2000 away from the same projection applied where it is defined. This tool uses the Vienot and Brettel projections in the LMS cone space with every step in linear light, and it tells you how far the colour moved in dE2000 rather than just showing you a swatch. Pure green seen as a protanope comes out as #EBEB0E; the gamma-space shortcut gives #6E713E, 38.6 dE2000 away.
Input accepts whatever you have: three, four, six or eight digit hex, rgb() and rgba() with commas or spaces, hsl() and hsla(), and all 148 CSS colour names including rebeccapurple. Alpha survives from a four or eight digit hex or an rgba() and reappears in the hex and rgb output. The nearest CSS colour name is found by CIEDE2000 rather than by Euclidean distance in RGB, which is why #404040 comes back as darkslategray rather than the seagreen a plain RGB distance picks.
Contrast mode uses the WCAG 2.x relative luminance, which has a 0.03928 threshold rather than the 0.04045 of the sRGB standard. That difference is deliberate and matters on the borderline: #777777 on white is 4.48, just under the 4.5 needed for AA at normal size, and a checker using the other threshold would report it slightly differently. Harmony mode rotates the HSL hue, which is what design tools mean by the term, and says so, pointing at OKLCH for cases where even perceptual spacing matters. CMYK is the standard naive formula, which is a useful starting point for ink values but is not a press-accurate colour without an ICC profile for the specific press and paper; the tool says that next to the value rather than leaving you to find out.
Because Lab is defined relative to a white point and those are two different ones. Red is L*53.24 a*80.09 b*67.20 under D65 and L*54.29 a*80.81 b*69.89 under D50. Neither is wrong; a Lab value without a stated white point is what is wrong. D65 is what sRGB and the web use, D50 is the ICC and print default.
OKLCH is the polar form of OKLab, a perceptual space designed so that equal numeric steps look like equal steps. HSL is a rearrangement of the RGB cube, so its lightness is not perceptual: two colours at the same HSL lightness can look very different in brightness. If you are building a scale or need two colours to feel equally spaced, use OKLCH. It is also a CSS Color 4 notation, so you can paste it straight into a stylesheet.
It uses the Vienot and Brettel projections in the LMS cone space, with every step done in linear light, which is where those projections are defined. That is the accepted method. The common shortcut of applying the same 3x3 matrix to gamma-encoded 0-255 values is not: on a saturated green the two answers are 38.6 dE2000 apart. As a check that the maths is right, a neutral grey comes back unchanged under every deficiency, which it must.
HSL and HSV are two ways of rearranging the same RGB cube into a cylinder, differing in whether the third axis is lightness (black through the pure colour to white) or value (black through to the pure colour). CMYK is a subtractive ink model. All three are exact and reversible here.
No, and no converter that does not ask for an ICC profile can be. This is the standard naive formula, which is a reasonable starting point for ink values, but real print colour depends on the press, the inks and the paper. Take it to your printer as a starting point rather than a specification.
Most likely the threshold. WCAG 2.x specifies 0.03928 in its relative luminance formula, very slightly different from the 0.04045 in the sRGB standard, and a tool using the latter reports a marginally different ratio. This one follows WCAG, which is what an accessibility audit will use.
Conversions run on your device in JavaScript. The values you enter are never sent over the network.