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

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

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%

# 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, 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

# 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, 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 /_ green, blue, yellow, orange, red, ..etc _/