# Colors

# 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 (opens new window) 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:

enter image description here (opens new window)

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

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 (opens new window) is used to specify color values in the RGB color format, per the W3C's 'Numerical color values' (opens new window).

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%

# rgba() Notation

Similar to rgb() notation (opens new window), 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, 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

# 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 */

The HSL Color Wheel (opens new window)

# 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.
  • # hsla() Notation

    Similar to hsl() notation (opens new window), 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

    # Syntax

    • color: #rgb
    • color: #rrggbb
    • color: rgb[a](, , [, ])
    • color: hsl[a](, <saturation%>, <lightness%>[, ])
    • color: colorkeyword (opens new window) /_ green, blue, yellow, orange, red, ..etc _/