CSSColors

Syntax

  • color: #rgb
  • color: #rrggbb
  • color: rgb[a](<red>, <green>, <blue>[, <alpha>])
  • color: hsl[a](<hue>, <saturation%>, <lightness%>[, <alpha>])
  • color: colorkeyword /* green, blue, yellow, orange, red, ..etc */

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 nameHex valueRGB valuesColor
AliceBlue#F0F8FFrgb(240,248,255)AliceBlue
AntiqueWhite#FAEBD7rgb(250,235,215)AntiqueWhite
Aqua#00FFFFrgb(0,255,255)Aqua
Aquamarine#7FFFD4rgb(127,255,212)Aquamarine
Azure#F0FFFFrgb(240,255,255)Azure
Beige#F5F5DCrgb(245,245,220)Beige
Bisque#FFE4C4rgb(255,228,196)Bisque
Black#000000rgb(0,0,0)Black
BlanchedAlmond#FFEBCDrgb(255,235,205)BlanchedAlmond
Blue#0000FFrgb(0,0,255)Blue
BlueViolet#8A2BE2rgb(138,43,226)BlueViolet
Brown#A52A2Argb(165,42,42)Brown
BurlyWood#DEB887rgb(222,184,135)BurlyWood
CadetBlue#5F9EA0rgb(95,158,160)CadetBlue
Chartreuse#7FFF00rgb(127,255,0)Chartreuse
Chocolate#D2691Ergb(210,105,30)Chocolate
Coral#FF7F50rgb(255,127,80)Coral
CornflowerBlue#6495EDrgb(100,149,237)CornflowerBlue
Cornsilk#FFF8DCrgb(255,248,220)Cornsilk
Crimson#DC143Crgb(220,20,60)Crimson
Cyan#00FFFFrgb(0,255,255)Cyan
DarkBlue#00008Brgb(0,0,139)DarkBlue
DarkCyan#008B8Brgb(0,139,139)DarkCyan
DarkGoldenRod#B8860Brgb(184,134,11)DarkGoldenRod
DarkGray#A9A9A9rgb(169,169,169)DarkGray
DarkGrey#A9A9A9rgb(169,169,169)DarkGrey
DarkGreen#006400rgb(0,100,0)DarkGreen
DarkKhaki#BDB76Brgb(189,183,107)DarkKhaki
DarkMagenta#8B008Brgb(139,0,139)DarkMagenta
DarkOliveGreen#556B2Frgb(85,107,47)DarkOliveGreen
DarkOrange#FF8C00rgb(255,140,0)DarkOrange
DarkOrchid#9932CCrgb(153,50,204)DarkOrchid
DarkRed#8B0000rgb(139,0,0)DarkRed
DarkSalmon#E9967Argb(233,150,122)DarkSalmon
DarkSeaGreen#8FBC8Frgb(143,188,143)DarkSeaGreen
DarkSlateBlue#483D8Brgb(72,61,139)DarkSlateBlue
DarkSlateGray#2F4F4Frgb(47,79,79)DarkSlateGray
DarkSlateGrey#2F4F4Frgb(47,79,79)DarkSlateGrey
DarkTurquoise#00CED1rgb(0,206,209)DarkTurquoise
DarkViolet#9400D3rgb(148,0,211)DarkViolet
DeepPink#FF1493rgb(255,20,147)DeepPink
DeepSkyBlue#00BFFFrgb(0,191,255)DeepSkyBlue
DimGray#696969rgb(105,105,105)DimGray
DimGrey#696969rgb(105,105,105)DimGrey
DodgerBlue#1E90FFrgb(30,144,255)DodgerBlue
FireBrick#B22222rgb(178,34,34)FireBrick
FloralWhite#FFFAF0rgb(255,250,240)FloralWhite
ForestGreen#228B22rgb(34,139,34)ForestGreen
Fuchsia#FF00FFrgb(255,0,255)Fuchsia
Gainsboro#DCDCDCrgb(220,220,220)Gainsboro
GhostWhite#F8F8FFrgb(248,248,255)GhostWhite
Gold#FFD700rgb(255,215,0)Gold
GoldenRod#DAA520rgb(218,165,32)GoldenRod
Gray#808080rgb(128,128,128)Gray
Grey#808080rgb(128,128,128)Grey
Green#008000rgb(0,128,0)Green
GreenYellow#ADFF2Frgb(173,255,47)GreenYellow
HoneyDew#F0FFF0rgb(240,255,240)HoneyDew
HotPink#FF69B4rgb(255,105,180)HotPink
IndianRed#CD5C5Crgb(205,92,92)IndianRed
Indigo#4B0082rgb(75,0,130)Indigo
Ivory#FFFFF0rgb(255,255,240)Ivory
Khaki#F0E68Crgb(240,230,140)Khaki
Lavender#E6E6FArgb(230,230,250)Lavender
LavenderBlush#FFF0F5rgb(255,240,245)LavenderBlush
LawnGreen#7CFC00rgb(124,252,0)LawnGreen
LemonChiffon#FFFACDrgb(255,250,205)LemonChiffon
LightBlue#ADD8E6rgb(173,216,230)LightBlue
LightCoral#F08080rgb(240,128,128)LightCoral
LightCyan#E0FFFFrgb(224,255,255)LightCyan
LightGoldenRodYellow#FAFAD2rgb(250,250,210)LightGoldenRodYellow
LightGray#D3D3D3rgb(211,211,211)LightGray
LightGrey#D3D3D3rgb(211,211,211)LightGrey
LightGreen#90EE90rgb(144,238,144)LightGreen
LightPink#FFB6C1rgb(255,182,193)LightPink
LightSalmon#FFA07Argb(255,160,122)LightSalmon
LightSeaGreen#20B2AArgb(32,178,170)LightSeaGreen
LightSkyBlue#87CEFArgb(135,206,250)LightSkyBlue
LightSlateGray#778899rgb(119,136,153)LightSlateGray
LightSlateGrey#778899rgb(119,136,153)LightSlateGrey
LightSteelBlue#B0C4DErgb(176,196,222)LightSteelBlue
LightYellow#FFFFE0rgb(255,255,224)LightYellow
Lime#00FF00rgb(0,255,0)Lime
LimeGreen#32CD32rgb(50,205,50)LimeGreen
Linen#FAF0E6rgb(250,240,230)Linen
Magenta#FF00FFrgb(255,0,255)Magenta
Maroon#800000rgb(128,0,0)Maroon
MediumAquaMarine#66CDAArgb(102,205,170)MediumAquaMarine
MediumBlue#0000CDrgb(0,0,205)MediumBlue
MediumOrchid#BA55D3rgb(186,85,211)MediumOrchid
MediumPurple#9370DBrgb(147,112,219)MediumPurple
MediumSeaGreen#3CB371rgb(60,179,113)MediumSeaGreen
MediumSlateBlue#7B68EErgb(123,104,238)MediumSlateBlue
MediumSpringGreen#00FA9Argb(0,250,154)MediumSpringGreen
MediumTurquoise#48D1CCrgb(72,209,204)MediumTurquoise
MediumVioletRed#C71585rgb(199,21,133)MediumTurquoise
MidnightBlue#191970rgb(25,25,112)MidnightBlue
MintCream#F5FFFArgb(245,255,250)MintCream
MistyRose#FFE4E1rgb(255,228,225)MistyRose
Moccasin#FFE4B5rgb(255,228,181)Moccasin
NavajoWhite#FFDEADrgb(255,222,173)NavajoWhite
Navy#000080rgb(0,0,128)Navy
OldLace#FDF5E6rgb(253,245,230)OldLace
Olive#808000rgb(128,128,0)Olive
OliveDrab#6B8E23rgb(107,142,35)OliveDrab
Orange#FFA500rgb(255,165,0)Orange
OrangeRed#FF4500rgb(255,69,0)OrangeRed
Orchid#DA70D6rgb(218,112,214)Orchid
PaleGoldenRod#EEE8AArgb(238,232,170)PaleGoldenRod
PaleGreen#98FB98rgb(152,251,152)PaleGreen
PaleTurquoise#AFEEEErgb(175,238,238)PaleTurquoise
PaleVioletRed#DB7093rgb(219,112,147)PaleVioletRed
PapayaWhip#FFEFD5rgb(255,239,213)PapayaWhip
PeachPuff#FFDAB9rgb(255,218,185)PeachPuff
Peru#CD853Frgb(205,133,63)Peru
Pink#FFC0CBrgb(255,192,203)Pink
Plum#DDA0DDrgb(221,160,221)Plum
PowderBlue#B0E0E6rgb(176,224,230)PowderBlue
Purple#800080rgb(128,0,128)Purple
RebeccaPurple#663399rgb(102,51,153)RebeccaPurple
Red#FF0000rgb(255,0,0)Red
RosyBrown#BC8F8Frgb(188,143,143)RosyBrown
RoyalBlue#4169E1rgb(65,105,225)RoyalBlue
SaddleBrown#8B4513rgb(139,69,19)SaddleBrown
Salmon#FA8072rgb(250,128,114)Salmon
SandyBrown#F4A460rgb(244,164,96)SandyBrown
SeaGreen#2E8B57rgb(46,139,87)SeaGreen
SeaShell#FFF5EErgb(255,245,238)SeaShell
Sienna#A0522Drgb(160,82,45)Sienna
Silver#C0C0C0rgb(192,192,192)Silver
SkyBlue#87CEEBrgb(135,206,235)SkyBlue
SlateBlue#6A5ACDrgb(106,90,205)SlateBlue
SlateGray#708090rgb(112,128,144)SlateGray
SlateGrey#708090rgb(112,128,144)SlateGrey
Snow#FFFAFArgb(255,250,250)Snow
SpringGreen#00FF7Frgb(0,255,127)SpringGreen
SteelBlue#4682B4rgb(70,130,180)SteelBlue
Tan#D2B48Crgb(210,180,140)tan
Teal#008080rgb(0,128,128)Teal
Thistle#D8BFD8rgb(216,191,216)Thistle
Tomato#FF6347rgb(255,99,71)Tomato
Turquoise#40E0D0rgb(64,224,208)Turquoise
Violet#EE82EErgb(238,130,238)Violet
Wheat#F5DEB3rgb(245,222,179)Wheat
White#FFFFFFrgb(255,255,255)White
WhiteSmoke#F5F5F5rgb(245,245,245)WhiteSmoke
Yellow#FFFF00rgb(255,255,0)Yellow
YellowGreen#9ACD32rgb(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
ValueDescription
rr00 - FF for the amount of red
gg00 - FF for the amount of green
bb00 - 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>)
ValueDescription
<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 */
}

The HSL Color Wheel

Syntax

color: hsl(<hue>, <saturation>%, <lightness>%);
ValueDescription
<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:

enter image description here

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>);
ValueDescription
<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>);
ValueDescription
<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