Color Picker & Converter

Which colour format should you use?

They all describe the same colour, so the choice is about who reads it next. HEX is the most portable: designers hand it over, every design tool accepts it, and it is short. rgb() is the same information in decimal, and was the usual way to add transparency before 8-digit hex became universal. HSL — hue, saturation, lightness — is easier to adjust by hand: to make a button's hover state, you change one number.

HWB (hue, whiteness, blackness) is newer CSS that some people find more intuitive than HSL for mixing. HSV, also called HSB, is not a CSS notation at all, but it is what the colour pickers in Photoshop, Figma and most design apps use, so it helps when matching a value from one of them. OKLCH is the modern format for building colour systems, and CMYK is only for print, where it is an estimate — both are explained below.

The tool reads every notation it writes, so you can paste any of them in and convert the other way. Named colours work too: all 148 CSS names, from aliceblue to yellowgreen.

Why OKLCH, and what is wrong with HSL

HSL's lightness is not lightness as your eye sees it. Pure yellow, hsl(60 100% 50%), and pure blue, hsl(240 100% 50%), have the same 50% lightness, yet yellow looks far brighter. Build a palette by stepping HSL lightness and the steps look uneven, and two colours with the same L can fail and pass a contrast check respectively.

OKLCH, built on Björn Ottosson's 2020 OKLab colour space, fixes that. Its L is perceptual: yellow comes out at about 0.97 and blue at about 0.45, matching how they look. Keeping L fixed and changing the hue gives colours of genuinely equal visual weight, which is why design systems increasingly define their palettes in it. oklch() has worked in all major browsers since 2023.

OKLCH can describe colours that an ordinary sRGB screen cannot show. If you paste one, the tool clamps it to the nearest displayable colour and says that it did, rather than quietly showing something different from what you asked for.

Contrast and the WCAG thresholds

The contrast cards use the formula from the Web Content Accessibility Guidelines: each colour's relative luminance is computed from its gamma-corrected channels, and the ratio (lighter + 0.05) ÷ (darker + 0.05) runs from 1 : 1 for identical colours to 21 : 1 for black on white.

Level AA asks for 4.5 : 1 for body text and 3 : 1 for large text, meaning 24 px regular or about 19 px bold. Level AAA asks for 7 : 1 and 4.5 : 1. A useful reference point: #767676 is the lightest grey that passes AA as text on white, at 4.54 : 1, while #777777 just fails. The ratio is the same whichever colour is the text and which the background, so the white card also tells you whether white text works on your colour.

A translucent colour is judged as it actually appears over each background, because a 50% black over white is a mid-grey, not black. This is the honest way to grade it, and it is why the same transparent colour can pass on one background and fail on another.

CMYK from a screen colour is an estimate

The CMYK values come from the simple, device-independent formula: black is 1 minus the brightest channel, and each ink is what remains. It gives a reasonable starting point, and it is what most online converters use, but it is not what a printer will produce.

Real print colour depends on the paper, the inks, the press and an ICC colour profile, and many bright screen colours — vivid blues, greens and oranges especially — are simply outside what four inks can reproduce. If colour accuracy matters, ask the print shop for their profile, or specify a Pantone colour and let them convert it.

Tints, shades and transparency

The tints are your colour mixed with white in steps of one sixth, and the shades are it mixed with black in the same steps, in sRGB. Click any swatch to make it the current colour and see all of its values. For a palette with perceptually even steps, take the OKLCH value and change only L instead.

Transparency is written as a fourth value: rgba(30, 144, 255, 0.5), the modern rgb(30 144 255 / 0.5), or 8-digit hex #1E90FF80, where the last pair is the opacity from 00 to FF. Every current browser supports all three.