Popular colors
Open any color for formats (HEX/RGB/HSL/OKLCH/CMYK), contrast, shades and harmonies.
CSS named colors
Keywords you can write straight into a stylesheet — color: crimson — with no hex at all. Open any of them for formats, contrast and scales.
What each color page gives you
Every color opens onto a page with the same six formats — HEX, RGB, HSL, HSV, OKLCH and CMYK — plus its WCAG contrast against black and white, a tint and shade ramp, and its complementary, analogous and triadic harmonies. It is the fastest way to go from one brand color to a working set.
Choosing colors people can actually read
WCAG 2.1 asks for a contrast ratio of at least 4.5:1 for body text, 3:1 for large text, and 3:1 for interface borders and icons. Each page reports the ratio against both black and white, so you can tell at a glance whether a color belongs in text, in a background, or only in decoration.
Frequently asked questions
What is the difference between HEX and OKLCH?
HEX is an sRGB triple written in base 16 — convenient for machines, but two hex codes with the same numeric distance can look very differently far apart. OKLCH describes a color the way people perceive it: lightness, chroma and hue. Because lightness is separated out, you can darken a color without the hue drifting, which is why OKLCH is much better for building tint and shade ramps.
Can I look up a color that is not in this list?
Yes. The list is a curated starting point, but any valid six-digit hex code works — open /color/ followed by the code, for example /color/3b82f6.
What are tints, shades and tones?
A tint is the color mixed with white, a shade is mixed with black, and a tone is mixed with grey. Ramps built this way keep a family of colors visibly related, which is what makes an interface feel coherent.
Can I use these colors in commercial work?
Yes. A color value is not copyrightable, so anything here can go straight into client work. Only a specific logo or brand identity built from a color is protected, not the color itself.