CSS allows you to specify colors using names like "red", "blue", "tomato", "cornflowerblue", or "papayawhip". These named colors are part of the CSS specification and every major browser supports the full set of 148 named colors. Knowing the color names and their values is useful for prototyping, code readability, and quick references.
Where Named Colors Come From
The original web color names were borrowed from the X11 color system used in early Unix graphical interfaces. The X Window System defined a large palette of named colors in the 1980s. When CSS was developed, these names were adopted and extended. The set was later standardized in the CSS3 Color Module.
The names range from the obvious (red, green, blue, white, black) to the poetic (lavenderblush, oldlace, moccasin, seashell, cornsilk, linen, gainsboro).
The 148 Named Colors
CSS Level 3 defines 148 named colors across the spectrum. They include:
Basic colors: black, white, red, green, blue, yellow, cyan, magenta, orange, purple, gray.
Reds and pinks: coral, crimson, darkred, deeppink, firebrick, hotpink, indianred, lightcoral, lightpink, lightsalmon, maroon, mediumvioletred, mistyrose, orangered, palevioletred, pink, salmon, tomato.
Oranges and yellows: bisque, blanchedalmond, burlywood, cornsilk, darkgoldenrod, darkorange, goldenrod, gold, khaki, lemonchiffon, lightyellow, moccasin, navajowhite, palegoldenrod, papayawhip, peachpuff, tan, wheat, yellow.
Greens: chartreuse, darkgreen, darkolivegreen, darkseagreen, darkslategray, forestgreen, greenyellow, honeydew, lawngreen, lightgreen, lime, limegreen, mediumseagreen, mediumspringgreen, mintcream, olive, olivedrab, palegreen, seagreen, springgreen, yellowgreen.
Blues: aliceblue, azure, cadetblue, cornflowerblue, darkblue, darkcyan, darkslateblue, deepskyblue, dodgerblue, ghostwhite, lightblue, lightcyan, lightseagreen, lightskyblue, lightsteelblue, mediumaquamarine, mediumblue, mediumslateblue, midnightblue, navy, powderblue, royalblue, skyblue, slateblue, steelblue, teal.
Purples and violets: blueviolet, darkmagenta, darkorchid, darkviolet, fuchsia, indigo, lavender, lavenderblush, mediumpurple, mediumorchid, orchid, plum, purple, rebeccapurple, thistle, violet.
Browns: brown, chocolate, peru, rosybrown, saddlebrown, sandybrown, sienna.
Whites and grays: antiquewhite, beige, floralwhite, gainsboro, ivory, lightgray, lightslategray, linen, oldlace, seashell, silver, slategray, snow, whitesmoke.
Named Colors vs Hex vs RGB
Named colors are convenient for prototyping, learning, and quick code that prioritizes readability. "cornflowerblue" is immediately clear; "#6495ED" requires looking up.
For production design systems, hex or RGB values are more common because: they allow the exact custom colors from a brand palette (which rarely match named colors), they are shorter for common colors (red vs #FF0000 is the same length but hex is more versatile), and they integrate naturally with color pickers and design tools.
HSL (hue, saturation, lightness) values are popular in modern CSS for color manipulation because you can adjust lightness or saturation by changing a single value.
Browser Support
All 148 named colors are fully supported in every modern browser. There is no compatibility concern with using them.
The Special Keyword: transparent
The keyword "transparent" is a special CSS color value equivalent to rgba(0,0,0,0), fully transparent black. It is commonly used for backgrounds, borders, and transitions.
currentColor
The "currentColor" keyword references the computed value of the color property of the current element. It allows you to reuse the text color for borders, outlines, or SVG fill without repeating the value.
Using the DevHexLab Color Names Reference
Open the reference at /tools/reference/color-names-reference. Browse all named colors with their hex, RGB, and HSL values displayed. Click any color to copy its value. Use the visual swatches to find colors by appearance.