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:

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

(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 _/