About the Color Library
This library contains all 140 named CSS colors recognized by every modern browser — from the everyday ('red', 'blue', 'green') to the evocative ('peachpuff', 'rebeccapurple', 'cornsilk'). Every color is shown with its HEX, RGB, and HSL codes, organized into ten hue families for easy browsing.
Named colors are defined in the CSS Color Level 4 specification and are case-insensitive in CSS — Tomato, tomato, and TOMATO all resolve to #FF6347. Clicking any color card links to the full detail page with color harmonies, accessibility analysis, and conversion to every format.
Search by name (try 'navy', 'salmon', 'lavender') or by hex fragment. Use the family filter to browse a specific hue group — useful when you know you want a blue but aren't sure which shade best fits your project.
Frequently Asked Questions
What are CSS named colors? +
CSS named colors are predefined color keywords recognized by all browsers without needing a HEX or RGB value. There are 140 standard named colors ranging from basic 'red' and 'blue' to more unusual names like 'rebeccapurple' (added in 2014 to honor web accessibility pioneer Rebecca Meyer). Named colors are convenient for quick prototyping and for readable code, but most production projects use HEX or HSL values for precise, consistent control.
How do I use these color codes in CSS? +
Copy the HEX code (e.g. #FF6347) and use it as a value for any CSS color property: color, background-color, border-color, box-shadow, etc. Use the RGB format for rgba() transparency. Use HSL for building color scale variants with predictable hue relationships. For reuse across a project, define your colors as CSS custom properties in the :root selector — for example, --brand-primary: #E07A5F; — and reference them throughout your stylesheet with var(--brand-primary).
How are the colors organized? +
Colors are grouped into ten hue families: Reds, Pinks, Oranges, Yellows, Greens, Blues, Purples, Browns, Grays, and Whites/Blacks. Use the Family dropdown to filter to a single group, or type any color name or hex fragment in the search box to narrow results. Clicking any color card links to its full detail page with harmonies, accessibility analysis, and all color format codes.
What is the difference between HEX, RGB, and HSL? +
HEX (#FF6347) is a compact 6-character notation widely used in design tools and CSS. RGB (rgb(255, 99, 71)) expresses the same color as decimal R, G, B values 0–255 — useful for numeric manipulation and rgba() transparency. HSL (hsl(9, 100%, 64%)) uses Hue (0°–360°), Saturation (0–100%), and Lightness (0–100%) — intuitive for color relationships because changing the hue value alone rotates through the color wheel while keeping saturation and lightness constant. All three express the same color value and are interchangeable in CSS.
What does 'rebeccapurple' mean? +
Rebeccapurple (#663399) was added to the CSS color specification in 2014 as a tribute to Rebecca Alison Meyer, the six-year-old daughter of web standards developer Eric Meyer, who passed away on the day CSS Color Level 4 was being finalized. Her favorite color was purple. It was the first named color added to CSS to honor a specific person and remains a meaningful symbol of the web standards community's human side.
Which named colors are good for accessible design? +
Accessibility depends on the contrast ratio between text and background colors, not the colors themselves. However, very light named colors (ivory, linen, snow, azure) typically work well as backgrounds for dark text. Very dark named colors (navy, darkslategray, maroon) pair well with white or light-colored text. Avoid colors with similar luminance together — yellow text on white, or blue text on navy, both fail WCAG contrast requirements despite using visually different hues. Use the Contrast Checker to verify any combination.
How can I find a color by hex code? +
Type the HEX code or a fragment of it into the search box at the top. You can search with or without the # symbol. Partial hex matches work too — typing 'FF63' returns any colors whose HEX contains that string. The search also matches color names, so typing 'tomato' finds the CSS named color Tomato (#FF6347). You can combine the family filter with the search for more targeted browsing.
Can I use these colors in Figma, Sketch, or other design tools? +
Yes. Copy any HEX code from this library and paste it directly into the color picker of Figma, Sketch, Adobe XD, or any tool that accepts hex values. For tools that use RGB values, click the RGB copy button instead. In Figma, you can also type CSS color names like 'tomato' or 'rebeccapurple' directly into the color field and it resolves to the correct HEX. For HSL values, use the copy button on the individual color detail page.
