Pick a colour, type one in any CSS format or grab one from your screen with the eyedropper. You get every colour code ready to copy, a scale of tints and shades, and whether text in that colour passes WCAG contrast.
Runs entirely in your browser — nothing you enter here is sent to a server.
Every format describes the same colour from a different angle. Screens mix red, green and blue light, so HEX and RGB are the native codes of the web. HSL describes the colour the way people think about it — which hue, how saturated, how light — which makes it the easiest format for building variations. CMYK is for print, where inks absorb light instead of emitting it.
#2F3EE0 is red 2F, green 3E, blue E0 in hexadecimal. An optional fourth pair sets opacity: #2F3EE080 is half transparent.
The same three channels as numbers from 0 to 255. Modern CSS also accepts rgb(47 62 224 / 50%) with spaces and a slash for alpha.
Hue in degrees round the colour wheel, saturation and lightness in percent. Change only the lightness to get a matching tint or shade.
Cyan, magenta, yellow and black ink. The values here are a plain conversion; real print colours depend on the printer's colour profile.
WCAG measures contrast as a ratio between the relative brightness of text and background, from 1:1 (invisible) to 21:1 (black on white). Normal text needs at least 4.5:1 for level AA and 7:1 for AAA; large text — 24 px, or 19 px bold — needs 3:1. Brand colours often fail on white at body-text size, which is why a darker shade from the scale is the usual choice for links and small text.
The same rules apply to status colours. Green "operational" and amber "degraded" badges on a status page should still read clearly for someone with low vision or on a phone in sunlight — pair the colour with a word or an icon, never colour alone.
Split the six digits into three pairs and convert each from hexadecimal: #2F3EE0 is 2F = 47, 3E = 62, E0 = 224, so rgb(47, 62, 224). Paste a code above to get every format at once.
4.5:1 for normal text and 3:1 for large text at level AA; 7:1 and 4.5:1 at level AAA. Icons and input borders need 3:1 against their surroundings.
In Chrome and Edge, click "Pick from screen" and then any pixel. Other browsers offer an eyedropper inside the colour box on most operating systems.
Any of them works everywhere. HEX is the most common in design files; HSL or the newer OKLCH make it easy to build consistent shades. Define brand colours once as CSS variables.
Upzilla checks your sites, servers and APIs around the clock and alerts you the moment something breaks. 10 monitors free, no card required.