Color Reference Library - Browse & Search Named Colors

About this library

This reference contains 130+ named colors drawn from the CSS Color Level 4 specification and common design conventions. Each color shows its hex code, RGB values, and HSL breakdown.

Finding a color name

Use the Find closest named color picker to enter any hex value and immediately see which named color it is closest to. This is useful when working with design tokens or trying to find a human-readable name for an arbitrary color.

Copying values

Click any color swatch or hex code to copy the hex value to your clipboard.

Browsing by color family

The library is browsable by hue family, allowing you to scan all reds, all blues, etc. without needing to know the exact name. This is useful when you remember the general color you saw in a design but not its name. The families loosely follow the same groupings used by CSS named color descriptions: reds, oranges, yellows, greens, blues, purples/pinks, and neutrals/browns.

When to use named colors vs. hex values

• Named colors for prototyping and demos: CSS named colors like steelblue, tomato, or goldenrod are quick to type and readable in code. They're ideal for prototypes, presentations, and examples where the specific brand shade doesn't matter yet.
• Hex for production design systems: production code should use design-token hex values (or hsl() / oklch()) rather than named colors. Named colors rarely match brand palettes precisely, and using them in production creates inconsistency when the design team specifies exact brand colors.
• Named colors for quick contrast checks: if you want a color you know will pass WCAG AA against a white background without checking, darkblue, darkgreen, darkred, and black all have very high contrast ratios and are immediately recognizable.