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