CSS color names and hex codes

All 139 named colors you can use directly in CSS, grouped by hue. Every color links to its own page with RGB, HSL and CMYK conversions, tints and shades, matching color schemes and WCAG contrast checks. You can also enter any six-digit hex value directly in a color-page URL; non-curated colors are useful on demand but are not included in the searchable color index.

Reds

14 colors

Misty rose through crimson down to dark red. Red pulls more attention than any other hue, which is why interfaces reserve it for errors and destructive actions. The pale end — light pink, misty rose, light coral — is what belongs behind text; the full-strength hue rarely does.

Oranges & Browns

26 colors

The largest family here, because brown is really a dark, low-saturation orange. It runs from warm off-whites (old lace, linen, papaya whip) through the signal colors (orange, orange red, coral) to the earth tones (sienna, peru, saddle brown).

Yellows

11 colors

The lightest colors in the set, and the hardest to use for text: yellow on white fails WCAG contrast at every size. They earn their place as fills and warning backgrounds with dark text on top. Olive is the outlier — dark enough to clear AA for large text.

Greens

20 colors

Greens cover a wider lightness range than any other family, from pale green up to dark green. Convention puts them on success states and positive numbers, and the deep end doubles as a quiet background that still reads as colored rather than gray.

Cyans & Teals

15 colors

The band between green and blue. CSS accepts aqua as a synonym for cyan — both are #00ffff, and both are far too light for text. The darker members (teal, dark cyan, dark slate gray) work as foreground colors where a plain blue would be mistaken for a link.

Blues

17 colors

Blue does most of the work in interface design: it is the default link color, and the dark names — navy, midnight blue, dark blue, medium blue — clear WCAG AA on white with no adjustment. Lavender and light steel blue sit at the other end, useful as tinted backgrounds.

Purples & Violets

7 colors

A small family bridging blue and pink. Indigo and rebecca purple are dark enough for text; the orchids and medium purple are better as fills. Rebecca purple was added to CSS in 2014 in memory of Rebecca Meyer, the daughter of CSS author Eric Meyer.

Pinks & Magentas

11 colors

The saturated end of the red-to-purple arc — CSS purple (#800080) and magenta land here rather than with the violets, which surprises people. Fuchsia is a synonym for magenta. Purple, dark magenta and medium violet red are the ones dark enough for body text on white.

Whites

10 colors

Not one white but several near-whites, each with a faint hue cast: snow leans red, honeydew green, azure and alice blue cool, ivory and floral white warm. That cast is the point — a page background of floral white reads softer than plain #ffffff without looking colored.

Grays

7 colors

The neutral spine of most designs. Every name containing “gray” also answers to the “grey” spelling. Watch the inherited quirk: dark gray (#a9a9a9) is lighter than gray (#808080), because the two names arrived from different palettes that HTML later merged.

Blacks

1 color

Only one name qualifies: black, #000000. Pure black text on pure white is maximum contrast on paper but reads as harsh on a backlit screen, so most design systems substitute a near-black — #111111, or the dark end of the gray family.

Black

Web-safe colors

216 colors

The classic 216-color web-safe palette: every combination of 00, 33, 66, 99, cc and ff per channel. No longer a technical necessity, but still a handy grid of evenly spaced starting points.

Black
#000033
#000066
#000099
#0000cc
Blue
#003300
#003333
#003366
#003399
#0033cc
#0033ff
#006600
#006633
#006666
#006699
#0066cc
#0066ff
#009900
#009933
#009966
#009999
#0099cc
#0099ff
#00cc00
#00cc33
#00cc66
#00cc99
#00cccc
#00ccff
Lime
#00ff33
#00ff66
#00ff99
#00ffcc
Cyan
#330000
#330033
#330066
#330099
#3300cc
#3300ff
#333300
#333333
#333366
#333399
#3333cc
#3333ff
#336600
#336633
#336666
#336699
#3366cc
#3366ff
#339900
#339933
#339966
#339999
#3399cc
#3399ff
#33cc00
#33cc33
#33cc66
#33cc99
#33cccc
#33ccff
#33ff00
#33ff33
#33ff66
#33ff99
#33ffcc
#33ffff
#660000
#660033
#660066
#660099
#6600cc
#6600ff
#663300
#663333
#663366
Rebecca Purple
#6633cc
#6633ff
#666600
#666633
#666666
#666699
#6666cc
#6666ff
#669900
#669933
#669966
#669999
#6699cc
#6699ff
#66cc00
#66cc33
#66cc66
#66cc99
#66cccc
#66ccff
#66ff00
#66ff33
#66ff66
#66ff99
#66ffcc
#66ffff
#990000
#990033
#990066
#990099
#9900cc
#9900ff
#993300
#993333
#993366
#993399
#9933cc
#9933ff
#996600
#996633
#996666
#996699
#9966cc
#9966ff
#999900
#999933
#999966
#999999
#9999cc
#9999ff
#99cc00
#99cc33
#99cc66
#99cc99
#99cccc
#99ccff
#99ff00
#99ff33
#99ff66
#99ff99
#99ffcc
#99ffff
#cc0000
#cc0033
#cc0066
#cc0099
#cc00cc
#cc00ff
#cc3300
#cc3333
#cc3366
#cc3399
#cc33cc
#cc33ff
#cc6600
#cc6633
#cc6666
#cc6699
#cc66cc
#cc66ff
#cc9900
#cc9933
#cc9966
#cc9999
#cc99cc
#cc99ff
#cccc00
#cccc33
#cccc66
#cccc99
#cccccc
#ccccff
#ccff00
#ccff33
#ccff66
#ccff99
#ccffcc
#ccffff
Red
#ff0033
#ff0066
#ff0099
#ff00cc
Magenta
#ff3300
#ff3333
#ff3366
#ff3399
#ff33cc
#ff33ff
#ff6600
#ff6633
#ff6666
#ff6699
#ff66cc
#ff66ff
#ff9900
#ff9933
#ff9966
#ff9999
#ff99cc
#ff99ff
#ffcc00
#ffcc33
#ffcc66
#ffcc99
#ffcccc
#ffccff
Yellow
#ffff33
#ffff66
#ffff99
#ffffcc
White

How a hex code works

A hex color is three bytes written in base 16 — #rrggbb, where each pair is one channel from 00 (none) to ff (255). #ff0000 is full red with green and blue switched off; #808080 is every channel at roughly half. The three-digit shorthand #abc expands to #aabbcc, which is why only colors whose pairs repeat can be written short. A fourth pair — #rrggbbaa — adds alpha, and every current browser supports it.

Every name on this page is an alias for one of those values. The browser resolves tomato and #ff6347 to exactly the same pixels, so the choice between them is about the person reading the stylesheet, not the rendering.

Named colors vs hex values

The 139 names here are a fixed list written into the CSS specification. You cannot extend it, and no name maps to a value you could not have typed in hex yourself. What names buy is legibility in source: tomato tells a reader more at a glance than #ff6347 does.

What they cost is precision and consistency. The list is thin at exactly the muted mid-tones most design systems need, and the naming carries historical accidents — dark gray is lighter than gray, and purple is a magenta rather than a violet. Names suit prototypes, throwaway styles and debugging; for anything you intend to maintain, reach for hex values held in custom properties.

Checking contrast before you ship

Most of the light families below fail WCAG AA as text on white: the threshold is 4.5:1 for body copy and 3:1 for large text, and a color that looks strong at swatch size often lands near 2:1 once it is 15-pixel type. Each color page runs that check for you against both white and black, so you can pick the pairing before the color reaches a component rather than after a review flags it.

Working with these colors

Found a base color? Generate its full scheme with the Color Palette Generator or turn two of them into a backdrop with the CSS Gradient Generator. Named colors are case-insensitive in CSS and can be used anywhere a color value is accepted — color, background-color, border, gradients and shadows alike.