Colors

Color Keywords

Most browsers support using color keywords to specify a color. For example, to set the color of an element to blue, use the blue keyword:

.some-class {
    color: blue;
}

CSS keywords are not case sensitive—blue, Blue and BLUE will all result in #0000FF.

Color Keywords

Color name	Hex value	RGB values
AliceBlue	#F0F8FF	rgb(240,248,255)
AntiqueWhite	#FAEBD7	rgb(250,235,215)
Aqua	#00FFFF	rgb(0,255,255)
Aquamarine	#7FFFD4	rgb(127,255,212)
Azure	#F0FFFF	rgb(240,255,255)
Beige	#F5F5DC	rgb(245,245,220)
Bisque	#FFE4C4	rgb(255,228,196)
Black	#000000	rgb(0,0,0)
BlanchedAlmond	#FFEBCD	rgb(255,235,205)
Blue	#0000FF	rgb(0,0,255)
BlueViolet	#8A2BE2	rgb(138,43,226)
Brown	#A52A2A	rgb(165,42,42)
BurlyWood	#DEB887	rgb(222,184,135)
CadetBlue	#5F9EA0	rgb(95,158,160)
Chartreuse	#7FFF00	rgb(127,255,0)
Chocolate	#D2691E	rgb(210,105,30)
Coral	#FF7F50	rgb(255,127,80)
CornflowerBlue	#6495ED	rgb(100,149,237)
Cornsilk	#FFF8DC	rgb(255,248,220)
Crimson	#DC143C	rgb(220,20,60)
Cyan	#00FFFF	rgb(0,255,255)
DarkBlue	#00008B	rgb(0,0,139)
DarkCyan	#008B8B	rgb(0,139,139)
DarkGoldenRod	#B8860B	rgb(184,134,11)
DarkGray	#A9A9A9	rgb(169,169,169)
DarkGrey	#A9A9A9	rgb(169,169,169)
DarkGreen	#006400	rgb(0,100,0)
DarkKhaki	#BDB76B	rgb(189,183,107)
DarkMagenta	#8B008B	rgb(139,0,139)
DarkOliveGreen	#556B2F	rgb(85,107,47)
DarkOrange	#FF8C00	rgb(255,140,0)
DarkOrchid	#9932CC	rgb(153,50,204)
DarkRed	#8B0000	rgb(139,0,0)
DarkSalmon	#E9967A	rgb(233,150,122)
DarkSeaGreen	#8FBC8F	rgb(143,188,143)
DarkSlateBlue	#483D8B	rgb(72,61,139)
DarkSlateGray	#2F4F4F	rgb(47,79,79)
DarkSlateGrey	#2F4F4F	rgb(47,79,79)
DarkTurquoise	#00CED1	rgb(0,206,209)
DarkViolet	#9400D3	rgb(148,0,211)
DeepPink	#FF1493	rgb(255,20,147)
DeepSkyBlue	#00BFFF	rgb(0,191,255)
DimGray	#696969	rgb(105,105,105)
DimGrey	#696969	rgb(105,105,105)
DodgerBlue	#1E90FF	rgb(30,144,255)
FireBrick	#B22222	rgb(178,34,34)
FloralWhite	#FFFAF0	rgb(255,250,240)
ForestGreen	#228B22	rgb(34,139,34)
Fuchsia	#FF00FF	rgb(255,0,255)
Gainsboro	#DCDCDC	rgb(220,220,220)
GhostWhite	#F8F8FF	rgb(248,248,255)
Gold	#FFD700	rgb(255,215,0)
GoldenRod	#DAA520	rgb(218,165,32)
Gray	#808080	rgb(128,128,128)
Grey	#808080	rgb(128,128,128)
Green	#008000	rgb(0,128,0)
GreenYellow	#ADFF2F	rgb(173,255,47)
HoneyDew	#F0FFF0	rgb(240,255,240)
HotPink	#FF69B4	rgb(255,105,180)
IndianRed	#CD5C5C	rgb(205,92,92)
Indigo	#4B0082	rgb(75,0,130)
Ivory	#FFFFF0	rgb(255,255,240)
Khaki	#F0E68C	rgb(240,230,140)
Lavender	#E6E6FA	rgb(230,230,250)
LavenderBlush	#FFF0F5	rgb(255,240,245)
LawnGreen	#7CFC00	rgb(124,252,0)
LemonChiffon	#FFFACD	rgb(255,250,205)
LightBlue	#ADD8E6	rgb(173,216,230)
LightCoral	#F08080	rgb(240,128,128)
LightCyan	#E0FFFF	rgb(224,255,255)
LightGoldenRodYellow	#FAFAD2	rgb(250,250,210)
LightGray	#D3D3D3	rgb(211,211,211)
LightGrey	#D3D3D3	rgb(211,211,211)
LightGreen	#90EE90	rgb(144,238,144)
LightPink	#FFB6C1	rgb(255,182,193)
LightSalmon	#FFA07A	rgb(255,160,122)
LightSeaGreen	#20B2AA	rgb(32,178,170)
LightSkyBlue	#87CEFA	rgb(135,206,250)
LightSlateGray	#778899	rgb(119,136,153)
LightSlateGrey	#778899	rgb(119,136,153)
LightSteelBlue	#B0C4DE	rgb(176,196,222)
LightYellow	#FFFFE0	rgb(255,255,224)
Lime	#00FF00	rgb(0,255,0)
LimeGreen	#32CD32	rgb(50,205,50)
Linen	#FAF0E6	rgb(250,240,230)
Magenta	#FF00FF	rgb(255,0,255)
Maroon	#800000	rgb(128,0,0)
MediumAquaMarine	#66CDAA	rgb(102,205,170)
MediumBlue	#0000CD	rgb(0,0,205)
MediumOrchid	#BA55D3	rgb(186,85,211)
MediumPurple	#9370DB	rgb(147,112,219)
MediumSeaGreen	#3CB371	rgb(60,179,113)
MediumSlateBlue	#7B68EE	rgb(123,104,238)
MediumSpringGreen	#00FA9A	rgb(0,250,154)
MediumTurquoise	#48D1CC	rgb(72,209,204)
MediumVioletRed	#C71585	rgb(199,21,133)
MidnightBlue	#191970	rgb(25,25,112)
MintCream	#F5FFFA	rgb(245,255,250)
MistyRose	#FFE4E1	rgb(255,228,225)
Moccasin	#FFE4B5	rgb(255,228,181)
NavajoWhite	#FFDEAD	rgb(255,222,173)
Navy	#000080	rgb(0,0,128)
OldLace	#FDF5E6	rgb(253,245,230)
Olive	#808000	rgb(128,128,0)
OliveDrab	#6B8E23	rgb(107,142,35)
Orange	#FFA500	rgb(255,165,0)
OrangeRed	#FF4500	rgb(255,69,0)
Orchid	#DA70D6	rgb(218,112,214)
PaleGoldenRod	#EEE8AA	rgb(238,232,170)
PaleGreen	#98FB98	rgb(152,251,152)
PaleTurquoise	#AFEEEE	rgb(175,238,238)
PaleVioletRed	#DB7093	rgb(219,112,147)
PapayaWhip	#FFEFD5	rgb(255,239,213)
PeachPuff	#FFDAB9	rgb(255,218,185)
Peru	#CD853F	rgb(205,133,63)
Pink	#FFC0CB	rgb(255,192,203)
Plum	#DDA0DD	rgb(221,160,221)
PowderBlue	#B0E0E6	rgb(176,224,230)
Purple	#800080	rgb(128,0,128)
RebeccaPurple	#663399	rgb(102,51,153)
Red	#FF0000	rgb(255,0,0)
RosyBrown	#BC8F8F	rgb(188,143,143)
RoyalBlue	#4169E1	rgb(65,105,225)
SaddleBrown	#8B4513	rgb(139,69,19)
Salmon	#FA8072	rgb(250,128,114)
SandyBrown	#F4A460	rgb(244,164,96)
SeaGreen	#2E8B57	rgb(46,139,87)
SeaShell	#FFF5EE	rgb(255,245,238)
Sienna	#A0522D	rgb(160,82,45)
Silver	#C0C0C0	rgb(192,192,192)
SkyBlue	#87CEEB	rgb(135,206,235)
SlateBlue	#6A5ACD	rgb(106,90,205)
SlateGray	#708090	rgb(112,128,144)
SlateGrey	#708090	rgb(112,128,144)
Snow	#FFFAFA	rgb(255,250,250)
SpringGreen	#00FF7F	rgb(0,255,127)
SteelBlue	#4682B4	rgb(70,130,180)
Tan	#D2B48C	rgb(210,180,140)
Teal	#008080	rgb(0,128,128)
Thistle	#D8BFD8	rgb(216,191,216)
Tomato	#FF6347	rgb(255,99,71)
Turquoise	#40E0D0	rgb(64,224,208)
Violet	#EE82EE	rgb(238,130,238)
Wheat	#F5DEB3	rgb(245,222,179)
White	#FFFFFF	rgb(255,255,255)
WhiteSmoke	#F5F5F5	rgb(245,245,245)
Yellow	#FFFF00	rgb(255,255,0)
YellowGreen	#9ACD32	rgb(154,205,50)

In addition to the named colors, there is also the keyword transparent, which represents a fully-transparent black: rgba(0,0,0,0)

Hexadecimal Value

Background

CSS colors may also be represented as a hex triplet, where the members represent the red, green and blue components of a color. Each of these values represents a number in the range of 00 to FF, or 0 to 255 in decimal notation. Uppercase and/or lowercase Hexidecimal values may be used (i.e. #3fc = #3FC = #33ffCC). The browser interprets #369 as #336699. If that is not what you intended but rather wanted #306090, you need to specify that explicitly.

The total number of colors that can be represented with hex notation is 256 ^ 3 or 16,777,216.

Syntax

color: #rrggbb;
color: #rgb

Value	Description
`rr`	`00` - `FF` for the amount of red
`gg`	`00` - `FF` for the amount of green
`bb`	`00` - `FF` for the amount of blue

.some-class {
    /* This is equivalent to using the color keyword 'blue' */
    color: #0000FF;
}

.also-blue {
    /* If you want to specify each range value with a single number, you can!
       This is equivalent to '#0000FF' (and 'blue') */
    color: #00F;
}

Hexadecimal notation is used to specify color values in the RGB color format, per the W3C's 'Numerical color values'.

There are a lot of tools available on the Internet for looking up hexadecimal (or simply hex) color values.

Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!

Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't care about capitalization. #FFC125 and #ffc125 are the same color.

rgb() Notation

RGB is an additive color model which represents colors as mixtures of red, green, and blue light. In essence, the RGB representation is the decimal equivalent of the Hexadecimal Notation. In Hexadecimal each number ranges from 00-FF which is equivalent to 0-255 in decimal and 0%-100% in percentages.

.some-class {
    /* Scalar RGB, equivalent to 'blue'*/
    color: rgb(0, 0, 255);
}

.also-blue {
    /* Percentile RGB values*/
    color: rgb(0%, 0%, 100%);
}

Syntax

rgb(<red>, <green>, <blue>)

Value	Description
`<red>`	an integer from 0 - 255 or percentage from 0 - 100%
`<green>`	an integer from 0 - 255 or percentage from 0 - 100%
`<blue>`	an integer from 0 - 255 or percentage from 0 - 100%

hsl() Notation

HSL stands for hue ("which color"), saturation ("how much color") and lightness ("how much white").

Hue is represented as an angle from 0° to 360° (without units), while saturation and lightness are represented as percentages.

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Syntax

color: hsl(<hue>, <saturation>%, <lightness>%);

Value	Description
`<hue>`	specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
`<saturation>`	specified in percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored)
`<lightness>`	specified in percentage where 0% is fully black and 100% is fully white

Notes

A saturation of 0% always produces a grayscale color; changing the hue has no effect.
A lightness of 0% always produces black, and 100% always produces white; changing the hue or saturation has no effect.

currentColor

currentColor returns the computed color value of the current element.

Use in same element

Here currentColor evaluates to red since the color property is set to red:

div {
   color: red;     
   border: 5px solid currentColor;
   box-shadow: 0 0 5px currentColor;
}

In this case, specifying currentColor for the border is most likely redundant because omitting it should produce identical results. Only use currentColor inside the border property within the same element if it would be overwritten otherwise due to a more specific selector.

Since it's the computed color, the border will be green in the following example due to the second rule overriding the first:

div {
   color: blue;
   border: 3px solid currentColor; 
   color: green;
}

Inherited from parent element

The parent's color is inherited, here currentColor evaluates to 'blue', making the child element's border-color blue.

.parent-class {
    color: blue;
}

.parent-class .child-class {
    border-color: currentColor;
}

currentColor can also be used by other rules which normally would not inherit from the color property, such as background-color. The example below shows the children using the color set in the parent as its background:

.parent-class {
    color: blue;
}

.parent-class .child-class {
    background-color: currentColor;
}

Possible Result:

rgba() Notation

Similar to rgb() notation, but with an additional alpha (opacity) value.

.red {
    /* Opaque red */
    color: rgba(255, 0, 0, 1);
}

.red-50p {
    /* Half-translucent red. */
    color: rgba(255, 0, 0, .5);
}

Syntax

rgba(<red>, <green>, <blue>, <alpha>);

Value	Description
`<red>`	an integer from 0 - 255 or percentage from 0 - 100%
`<green>`	an integer from 0 - 255 or percentage from 0 - 100%
`<blue>`	an integer from 0 - 255 or percentage from 0 - 100%
`<alpha>`	a number from 0 - 1, where 0.0 is fully transparent and 1.0 is fully opaque

hsla() Notation

Similar to hsl() notation, but with an added alpha (opacity) value.

hsla(240, 100%, 50%, 0)     /* transparent */
hsla(240, 100%, 50%, 0.5)   /* half-translucent blue */
hsla(240, 100%, 50%, 1)     /* fully opaque blue */

Syntax

hsla(<hue>, <saturation>%, <lightness>%, <alpha>);

Value	Description
`<hue>`	specified in degrees around the color wheel (without units), where 0° is red, 60° is yellow, 120° is green, 180° is cyan, 240° is blue, 300° is magenta, and 360° is red
`<saturation>`	percentage where 0% is fully desaturated (grayscale) and 100% is fully saturated (vividly colored)
`<lightness>`	percentage where 0% is fully black and 100% is fully white
`<alpha>`	a number from 0 - 1 where 0 is fully transparent and 1 is fully opaque