CSS Color Names: Complete Reference Guide

Colors are the soul of web design. While most developers use HEX codes or RGB values for precision, CSS Color Names provide a human-readable way to apply styles quickly. Modern browsers support 140+ named colors, from common ones like Red and Blue to more exotic names like AliceBlue or PapayaWhip.

This guide provides a complete, searchable reference for every CSS named color, categorized by hue to help you find the perfect shade for your project.

1. Quick Reference: The Basic 16 Colors

These are the original colors defined in the HTML 4.01 specification and are supported by all browsers and devices.

Color Name	HEX	RGB
White	`#FFFFFF`	`(255, 255, 255)`
Silver	`#C0C0C0`	`(192, 192, 192)`
Gray	`#808080`	`(128, 128, 128)`
Black	`#000000`	`(0, 0, 0)`
Red	`#FF0000`	`(255, 0, 0)`
Maroon	`#800000`	`(128, 0, 0)`
Yellow	`#FFFF00`	`(255, 255, 0)`
Olive	`#808000`	`(128, 128, 0)`
Lime	`#00FF00`	`(0, 255, 0)`
Green	`#008000`	`(0, 128, 0)`
Aqua	`#00FFFF`	`(0, 255, 255)`
Teal	`#008080`	`(0, 128, 128)`
Blue	`#0000FF`	`(0, 0, 255)`
Navy	`#000080`	`(0, 0, 128)`
Fuchsia	`#FF00FF`	`(255, 0, 255)`
Purple	`#800080`	`(128, 0, 128)`

2. Complete List of 140+ CSS Colors

Below is the full set of extended colors supported by modern browsers (SVG 1.0/CSS3).

Pink Colors

Name	HEX	RGB	Category
Pink	`#FFC0CB`	`(255, 192, 203)`	Pink
LightPink	`#FFB6C1`	`(255, 182, 193)`	Pink
HotPink	`#FF69B4`	`(255, 105, 180)`	Pink
DeepPink	`#FF1493`	`(255, 20, 147)`	Pink
PaleVioletRed	`#DB7093`	`(219, 112, 147)`	Pink
MediumVioletRed	`#C71585`	`(199, 21, 133)`	Pink

Red Colors

Name	HEX	RGB	Category
LightSalmon	`#FFA07A`	`(255, 160, 122)`	Red
Salmon	`#FA8072`	`(250, 128, 114)`	Red
DarkSalmon	`#E9967A`	`(233, 150, 122)`	Red
LightCoral	`#F08080`	`(240, 128, 128)`	Red
IndianRed	`#CD5C5C`	`(205, 92, 92)`	Red
Crimson	`#DC143C`	`(220, 20, 60)`	Red
FireBrick	`#B22222`	`(178, 34, 34)`	Red
DarkRed	`#8B0000`	`(139, 0, 0)`	Red
Red	`#FF0000`	`(255, 0, 0)`	Red

Orange Colors

Name	HEX	RGB	Category
Orange	`#FFA500`	`(255, 165, 0)`	Orange
DarkOrange	`#FF8C00`	`(255, 140, 0)`	Orange
Coral	`#FF7F50`	`(255, 127, 80)`	Orange
Tomato	`#FF6347`	`(255, 99, 71)`	Orange
OrangeRed	`#FF4500`	`(255, 69, 0)`	Orange

Yellow Colors

Name	HEX	RGB	Category
Yellow	`#FFFF00`	`(255, 255, 0)`	Yellow
LightYellow	`#FFFFE0`	`(255, 255, 224)`	Yellow
LemonChiffon	`#FFFACD`	`(255, 250, 205)`	Yellow
LightGoldenRodYellow	`#FAFAD2`	`(250, 250, 210)`	Yellow
PapayaWhip	`#FFEFD5`	`(255, 239, 213)`	Yellow
Moccasin	`#FFE4B5`	`(255, 228, 181)`	Yellow
PeachPuff	`#FFDAB9`	`(255, 218, 185)`	Yellow
PaleGoldenRod	`#EEE8AA`	`(238, 232, 170)`	Yellow
Khaki	`#F0E68C`	`(240, 230, 140)`	Yellow
DarkKhaki	`#BDB76B`	`(189, 183, 107)`	Yellow
Gold	`#FFD700`	`(255, 215, 0)`	Yellow

Brown Colors

Name	HEX	RGB	Category
Cornsilk	`#FFF8DC`	`(255, 248, 220)`	Brown
BlanchedAlmond	`#FFEBCD`	`(255, 235, 205)`	Brown
Bisque	`#FFE4C4`	`(255, 228, 196)`	Brown
NavajoWhite	`#FFDEAD`	`(255, 222, 173)`	Brown
Wheat	`#F5DEB3`	`(245, 222, 179)`	Brown
BurlyWood	`#DEB887`	`(222, 184, 135)`	Brown
Tan	`#D2B48C`	`(210, 180, 140)`	Brown
RosyBrown	`#BC8F8F`	`(188, 143, 143)`	Brown
SandyBrown	`#F4A460`	`(244, 164, 96)`	Brown
GoldenRod	`#DAA520`	`(218, 165, 32)`	Brown
Peru	`#CD853F`	`(205, 133, 63)`	Brown
Chocolate	`#D2691E`	`(210, 105, 30)`	Brown
SaddleBrown	`#8B4513`	`(139, 69, 19)`	Brown
Sienna	`#A0522D`	`(160, 82, 45)`	Brown
Brown	`#A52A2A`	`(165, 42, 42)`	Brown
Maroon	`#800000`	`(128, 0, 0)`	Brown

Green Colors

Name	HEX	RGB	Category
DarkOliveGreen	`#556B2F`	`(85, 107, 47)`	Green
Olive	`#808000`	`(128, 128, 0)`	Green
OliveDrab	`#6B8E23`	`(107, 142, 35)`	Green
YellowGreen	`#9ACD32`	`(154, 205, 50)`	Green
LimeGreen	`#32CD32`	`(50, 205, 50)`	Green
Lime	`#00FF00`	`(0, 255, 0)`	Green
LawnGreen	`#7CFC00`	`(124, 252, 0)`	Green
Chartreuse	`#7FFF00`	`(127, 255, 0)`	Green
GreenYellow	`#ADFF2F`	`(173, 255, 47)`	Green
SpringGreen	`#00FF7F`	`(0, 255, 127)`	Green
MediumSpringGreen	`#00FA9A`	`(0, 250, 154)`	Green
LightGreen	`#90EE90`	`(144, 238, 144)`	Green
PaleGreen	`#98FB98`	`(152, 251, 152)`	Green
DarkSeaGreen	`#8FBC8F`	`(143, 188, 143)`	Green
MediumSeaGreen	`#3CB371`	`(60, 179, 113)`	Green
SeaGreen	`#2E8B57`	`(46, 139, 87)`	Green
ForestGreen	`#228B22`	`(34, 139, 34)`	Green
Green	`#008000`	`(0, 128, 0)`	Green
DarkGreen	`#006400`	`(0, 100, 0)`	Green

Cyan and Teal Colors

Name	HEX	RGB	Category
Aqua	`#00FFFF`	`(0, 255, 255)`	Cyan
Cyan	`#00FFFF`	`(0, 255, 255)`	Cyan
LightCyan	`#E0FFFF`	`(224, 255, 255)`	Cyan
PaleTurquoise	`#AFEEEE`	`(175, 238, 238)`	Cyan
Aquamarine	`#7FFFD4`	`(127, 255, 212)`	Cyan
Turquoise	`#40E0D0`	`(64, 224, 208)`	Cyan
MediumTurquoise	`#48D1CC`	`(72, 209, 204)`	Cyan
DarkTurquoise	`#00CED1`	`(0, 206, 209)`	Cyan
LightSeaGreen	`#20B2AA`	`(32, 178, 170)`	Cyan
CadetBlue	`#5F9EA0`	`(95, 158, 160)`	Cyan
DarkCyan	`#008B8B`	`(0, 139, 139)`	Cyan
Teal	`#008080`	`(0, 128, 128)`	Cyan

Blue Colors

Name	HEX	RGB	Category
LightSteelBlue	`#B0C4DE`	`(176, 196, 222)`	Blue
PowderBlue	`#B0E0E6`	`(176, 224, 230)`	Blue
LightBlue	`#ADD8E6`	`(173, 216, 230)`	Blue
SkyBlue	`#87CEEB`	`(135, 206, 235)`	Blue
LightSkyBlue	`#87CEFA`	`(135, 206, 250)`	Blue
DeepSkyBlue	`#00BFFF`	`(0, 191, 255)`	Blue
DodgerBlue	`#1E90FF`	`(30, 144, 255)`	Blue
CornflowerBlue	`#6495ED`	`(100, 149, 237)`	Blue
MediumSlateBlue	`#7B68EE`	`(123, 104, 238)`	Blue
RoyalBlue	`#4169E1`	`(65, 105, 225)`	Blue
Blue	`#0000FF`	`(0, 0, 255)`	Blue
MediumBlue	`#0000CD`	`(0, 0, 205)`	Blue
DarkBlue	`#00008B`	`(0, 0, 139)`	Blue
Navy	`#000080`	`(0, 0, 128)`	Blue
MidnightBlue	`#191970`	`(25, 25, 112)`	Blue

Purple and Violet Colors

Name	HEX	RGB	Category
Lavender	`#E6E6FA`	`(230, 230, 250)`	Purple
Thistle	`#D8BFD8`	`(216, 191, 216)`	Purple
Plum	`#DDA0DD`	`(221, 160, 221)`	Purple
Violet	`#EE82EE`	`(238, 130, 238)`	Purple
Orchid	`#DA70D6`	`(218, 112, 214)`	Purple
Fuchsia	`#FF00FF`	`(255, 0, 255)`	Purple
Magenta	`#FF00FF`	`(255, 0, 255)`	Purple
MediumOrchid	`#BA55D3`	`(186, 85, 211)`	Purple
MediumPurple	`#9370DB`	`(147, 112, 219)`	Purple
BlueViolet	`#8A2BE2`	`(138, 43, 226)`	Purple
DarkViolet	`#9400D3`	`(148, 0, 211)`	Purple
DarkOrchid	`#9932CC`	`(153, 50, 204)`	Purple
DarkMagenta	`#8B008B`	`(139, 0, 139)`	Purple
Purple	`#800080`	`(128, 0, 128)`	Purple
Indigo	`#4B0082`	`(75, 0, 130)`	Purple
DarkSlateBlue	`#483D8B`	`(72, 61, 139)`	Purple
SlateBlue	`#6A5ACD`	`(106, 90, 205)`	Purple
RebeccaPurple	`#663399`	`(102, 51, 153)`	Purple

White and Off-White Colors

Name	HEX	RGB	Category
White	`#FFFFFF`	`(255, 255, 255)`	White
Snow	`#FFFAFA`	`(255, 250, 250)`	White
HoneyDew	`#F0FFF0`	`(240, 255, 240)`	White
MintCream	`#F5FFFA`	`(245, 255, 250)`	White
Azure	`#F0FFFF`	`(240, 255, 255)`	White
AliceBlue	`#F0F8FF`	`(240, 248, 255)`	White
GhostWhite	`#F8F8FF`	`(248, 248, 255)`	White
WhiteSmoke	`#F5F5F5`	`(245, 245, 245)`	White
SeaShell	`#FFF5EE`	`(255, 245, 238)`	White
Beige	`#F5F5DC`	`(245, 245, 220)`	White
OldLace	`#FDF5E6`	`(253, 245, 230)`	White
FloralWhite	`#FFFAF0`	`(255, 250, 240)`	White
Ivory	`#FFFFF0`	`(255, 255, 240)`	White
AntiqueWhite	`#FAEBD7`	`(250, 235, 215)`	White
Linen	`#FAF0E6`	`(250, 240, 230)`	White
MistyRose	`#FFE4E1`	`(255, 228, 225)`	White
LavenderBlush	`#FFF0F5`	`(255, 240, 245)`	White

Gray and Black Colors

Name	HEX	RGB	Category
Gainsboro	`#DCDCDC`	`(220, 220, 220)`	Gray
LightGray	`#D3D3D3`	`(211, 211, 211)`	Gray
LightGrey	`#D3D3D3`	`(211, 211, 211)`	Gray
Silver	`#C0C0C0`	`(192, 192, 192)`	Gray
DarkGray	`#A9A9A9`	`(169, 169, 169)`	Gray
DarkGrey	`#A9A9A9`	`(169, 169, 169)`	Gray
Gray	`#808080`	`(128, 128, 128)`	Gray
Grey	`#808080`	`(128, 128, 128)`	Gray
DimGray	`#696969`	`(105, 105, 105)`	Gray
DimGrey	`#696969`	`(105, 105, 105)`	Gray
LightSlateGray	`#778899`	`(119, 136, 153)`	Gray
LightSlateGrey	`#778899`	`(119, 136, 153)`	Gray
SlateGray	`#708090`	`(112, 128, 144)`	Gray
SlateGrey	`#708090`	`(112, 128, 144)`	Gray
DarkSlateGray	`#2F4F4F`	`(47, 79, 79)`	Gray
DarkSlateGrey	`#2F4F4F`	`(47, 79, 79)`	Gray
Black	`#000000`	`(0, 0, 0)`	Gray

3. How to Use CSS Color Names

Using these names in your code is simple. They can be applied to any property that accepts a <color> value.

Standard CSS Properties

/* Using name for text color */
h1 {
  color: Crimson;
}

/* Using name for background */
.alert {
  background-color: PapayaWhip;
  border: 1px solid OrangeRed;
}

SVG Properties

CSS color names also work perfectly with SVG attributes:

<circle cx="50" cy="50" r="40" fill="RoyalBlue" stroke="MidnightBlue" stroke-width="2" />

The 'currentColor' Keyword

currentColor is a special value that inherits the value of the color property of the element.

div {
  color: SeaGreen;
  border: 2px solid currentColor; /* Border will also be SeaGreen */
}

4. Frequently Asked Questions (FAQ)

Q: Are CSS color names case-sensitive?

A: No. You can write AliceBlue, aliceblue, or even ALICEBLUE. They are all treated as the same color. However, CamelCase (like AliceBlue) is preferred by many developers for readability.

Q: Which color names are "Web-Safe"?

A: "Web-safe" colors are a relic of the past when monitors only supported 256 colors. Today, all 140+ CSS named colors are safe to use on any modern device.

Q: Why use a color name instead of a HEX code?

A: Color names are much easier to remember and make your code more readable. background-color: White is instantly understandable, whereas #FFFFFF requires a tiny bit of mental translation. However, for precise brand colors, HEX, RGB, or HSL are still the best choices.

Q: Are there any duplicate names?

A: Yes. Aqua and Cyan are exactly the same (#00FFFF), and Fuchsia and Magenta are the same (#FF00FF). Additionally, many gray colors have both "Gray" and "Grey" spellings (e.g., DarkGray and DarkGrey).

Q: How do I handle contrast issues?

A: When using named colors, always ensure there is enough contrast between text and background. For example, Yellow text on a White background is almost impossible to read and fails accessibility standards (WCAG).

Related Tools on Tool3M

Color Converter: Convert these named colors to HEX, RGB, HSL, or CMYK formats instantly.
Image to Base64: Convert images to Base64 strings for use in CSS/HTML.

CSS Color Names: Complete Reference Guide with HEX and RGB