Skip to content

CSS Color Names: All 148 Named Colors with HEX Codes

All 148 CSS named colors with HEX, RGB and HSL values. Search by name or HEX code, filter by color family, sort by hue or lightness and copy any value with one click.

148 of 148 colors. Click a swatch to copy its HEX code.

What are CSS color names?

CSS lets you write colors by name instead of a code: color: tomato; works exactly like color: #FF6347;. The CSS Color specification defines 148 names, from aliceblue to yellowgreen. They are case-insensitive and supported by every browser. Most come from the old X11 color list, and rebeccapurple was added in 2014 in memory of Rebecca Meyer.

How to use this list

  • Search by name (blue finds every blue name) or by the start of a HEX code (#FF6).
  • Filter by color family to see, for example, all named greens.
  • Sort alphabetically, by hue (rainbow order) or by lightness.
  • Click a swatch to copy its HEX code, or open Details to convert it in the color picker.

Good to know

  • Gray and grey are both valid: gray/grey, darkgray/darkgrey and so on are the same colors.
  • Aqua and cyan are the same color (#00FFFF), and so are fuchsia and magenta (#FF00FF).
  • darkgray (#A9A9A9) is actually lighter than gray (#808080), a well-known quirk of the X11 list.
  • The keyword transparent and currentColor are also valid in CSS but are not fixed colors, so they are not listed.

Named colors are handy for prototypes and examples. For a real design system, a custom palette usually works better: build one with the palette generator.

More color tools

Color Picker & Converter (HEX, RGB, HSL, HSV, CMYK)
Pick any color and convert it between HEX, RGB, HSL, HSV and CMYK. Grab colors from your screen, adjust hue, saturation, lightness and opacity, and copy CSS-ready values.
Color Palette Generator for Websites
Generate harmonious five-color palettes from a base color using analogous, monochromatic, complementary, split, triadic and tetradic rules. Lock colors, share a link and export to CSS, SCSS, Tailwind or JSON.
Tints & Shades Generator (50–950 Color Scale)
Turn one color into a Tailwind-style 50–950 color scale or into tints and shades in 5, 10 or 20% steps. Click to copy HEX values and export CSS variables, Tailwind theme, SCSS or JSON.
Color Contrast Checker (WCAG AA & AAA)
Check the contrast ratio between text and background colors against WCAG 2 AA and AAA for normal text, large text and UI components, with a live preview and one-click suggestions for passing colors.
Color Families: Color Codes by Color Group
Browse colors by family: reds, oranges, yellows, greens, cyans, blues, purples, pinks, browns, grays, whites and blacks, with HEX codes and ready-made color combinations.
Popular Colors: Tailwind CSS and Bootstrap 5 Palettes
The complete Tailwind CSS v3 color palette (22 colors, 50–950) and Bootstrap 5.3 color scales (100–900) with HEX codes. Click any shade to copy it.
Web Safe Colors: The 216-Color Palette
The 216 web-safe colors with HEX codes, grouped by red value, plus a tool that finds the nearest web-safe color for any color.