Color Reference Library - Browse & Search Named Colors

How to use this tool

1. Find colors. Search by a CSS keyword, display name, or hex value. Choose CSS Level 4, popular extras, or all colors, then filter by family if helpful.
2. Sort and copy a value. Order the visible swatches by name, hue, or HSL lightness. Use a card button to copy its name, hex, rgb(), or hsl() value.
3. Check a color pair. Choose a text color and background color to see the WCAG contrast ratio and AA/AAA status for normal and large text.

The CSS named-color catalog

The CSS Level 4 catalog contains exactly 148 named color keywords, including equivalent spellings such as gray and grey, or aqua and cyan. Those aliases are separate CSS names even when they resolve to the same sRGB color. Six familiar shades that are not CSS keywords—such as Rose and Charcoal—are kept in a separate extras set, so the CSS catalog count remains clear. Every card shows its CSS name, hex value, RGB channels, and HSL hue, saturation, and lightness.

Search, sort, and copy

Search matches a CSS keyword, its readable display name, or a hex value. You can limit the swatches to one color family or switch between the standards catalog, popular extras, and both sets together. Sorting by name is useful when you know a keyword; hue sorting helps scan a spectrum, and lightness sorting runs from dark colors to light colors. Hue is shown as an HSL angle from 0° to 359°, so red hues sit at both ends of the linear hue order.

Each card has separate copy controls for the CSS name, hex, rgb(), and hsl(). For example, Alice Blue can be copied as aliceblue, #F0F8FF, rgb(240, 248, 255), or hsl(208, 100%, 97%). These formats are useful when moving a sample into a stylesheet, design-token draft, or prototype without manually converting channel values.

Closest named color

Enter a hex value or use the picker to find its closest CSS keyword. The tool compares each red, green, and blue channel with the CSS catalog and minimizes the sum of the squared channel differences. This calculation is fast and works well as an exploratory starting point—for example, when identifying a human-readable color near a design mockup. It measures distance in sRGB channel coordinates, not perceived color difference, so a nearest result is not a promise that two colors will look equally close to every viewer or display.

Check text contrast

Select a text color and background to compare their WCAG 2.x contrast ratio. Each sRGB channel is converted to relative luminance, then the ratio is calculated as (lighter luminance + 0.05) / (darker luminance + 0.05). The checker reports AA thresholds of 4.5:1 for normal text and 3:1 for large text, plus AAA thresholds of 7:1 and 4.5:1. Use it while choosing text colors for a prototype, but remember that a ratio alone does not evaluate font size, content, focus visibility, or every other accessibility requirement.

Named colors are convenient for examples and early design exploration, but they rarely match a brand palette precisely. Use your design system's specified tokens for production work, and treat the six extras as informal reference shades rather than valid CSS keywords. All searching, matching, copying, and contrast calculations run in this browser; the values you enter are not sent to a server.