Reading and using color codes: a practical guide
What a hex color code is and how to read it
A hex color code is a compact way to write an sRGB color. It is a # followed by six hexadecimal digits, which are three pairs: red, green and blue. Each pair runs from 00 (none of that channel) to FF (the maximum, 255 in decimal). So #FF0000 is full red with no green or blue, #000000 is black, #FFFFFF is white, and any color with three equal pairs, such as #808080, is a grey. A three-digit form like #0F8 is shorthand for #00FF88, and an eight-digit form adds a final pair for opacity.
With a little practice you can estimate a color from its code. High first pair means a lot of red, high second pair a lot of green, high third pair a lot of blue. Pairs that are all large give a light color and pairs that are all small give a dark one. Every page in the color library is keyed by one hex value, and lists the same color in the other formats below so you can copy whichever your project needs.
HEX, RGB, HSL, OKLCH and CMYK: when to use each
HEX and RGB describe the same thing: how much red, green and blue light a screen emits. HEX is the shortest to copy and paste and is the common format in design tools and style guides. rgb() is easier to read when you want to compute with the channels or add an alpha value. Both are tied to the sRGB gamut.
HSL describes a color as hue (an angle on the color wheel), saturation and lightness. It is intuitive for quick tweaks, such as darkening a button on hover, but its lightness is derived from the RGB channels, so two colors with the same HSL lightness can look very different in brightness. OKLCH fixes much of that: its lightness is perceptual, chroma says how colorful a color is, and hue is an angle. It is supported by oklch() in current CSS and is a good choice for building scales and keeping hues visually balanced. The OKLCH vs HSL guide compares them with examples, and the OKLCH color picker converts between all four.
CMYK is different in kind. It describes ink on paper (cyan, magenta, yellow and black) and is used for print. There is no exact conversion from a screen color to a printed one, because the result depends on the paper, the inks and the printer profile. A CMYK value shown for a screen color is an approximation, so ask your printer for their profile or a proof before committing to a brand color in print.
How the color pages are organised
Colors here are grouped into hue families so you can browse by feel instead of by code. The families are red, orange, brown, yellow, green, teal, cyan, blue, purple, pink and gray. Each family page lists its colors, and each color has its own page with its nearest name, exact conversions, and related tints, shades and harmonies.
Named colors are labelled with the closest name we have to the hex value. When a color is not an exact match for a name, the page says so and shows the nearest one, so a name is a handy label rather than a standard. If you want to know what a hue is associated with in branding and culture, the color meaning guides start with red, and if you want to find a color by mood or theme, try the palette library.
Choosing readable text for a color
Text is readable when its lightness differs enough from the background, so the question for any color is whether to put white or black on it. WCAG 2.2 measures this as a contrast ratio from 1:1 to 21:1. Level AA asks for at least 4.5:1 for normal text and 3:1 for large text (roughly 24px regular or 18.5px bold and up) and for user interface components such as input borders and icons. Level AAA raises normal text to 7:1.
Mid-tone colors are the tricky ones. A medium blue or orange may reach 4.5:1 with black but not with white, or fail both. APCA is a newer method, proposed for WCAG 3, that models perceived lightness contrast and gives a score called Lc that depends on text size and weight. It is still a draft, so treat it as a second opinion and keep WCAG 2.2 as your compliance target. Check any pair in the contrast checker, or browse the precomputed contrast pair pages.
Tints, shades and harmonies
A tint is a color mixed with white, a shade is mixed with black, and a tone is mixed with grey. Each color page lists them, which gives you a quick set of hover states, backgrounds and borders that stay in the same family. Harmonies are colors related by position on the wheel: complementary colors sit opposite, analogous colors sit next to each other, and triadic colors are spaced evenly around it.
Harmonies are a starting point and not a rule, and you will usually want one dominant color and a neutral base, with the others used sparingly. For a ready-made set of shades across a whole ramp, use the picker, and if you are wiring colors into code, the developer page covers the API and export formats. To see how other tools compare, read the comparison hub.