HTML/CSS Colors
How to specify colors using color name, hexadecimal (hex) value
or
rgb(), rgba(), hsl(), hsla() functional notation.
HTML/CSS Color Values
In HTML/CSS colors could be specified in multiple ways:
chevron_right Color name - Sample: "black"
chevron_right RGB (Red-green-blue) hexadecimal (hex) value - Sample: "#000000"
chevron_right RGB (Red-green-blue) functional notation - Sample: "rgb(0,0,0)"
chevron_right RGBA (Red-green-blue-alpha) functional notation - Sample: "rgb(0,0,0,1.0)"
chevron_right HSL (Hue-saturation-lightness) functional notation - Sample: "hsl(0,0%,0%)"
chevron_right HSLA (Hue-saturation-lightness-alpha) functional notation - Sample: "hsla(0,0%,0%,1.0)"
Color Names
A color name is a keyword representing a specific color, for example:
cadetblue.
Color names are case-insensitive, which means "black" equals
"Black".
Samples:
HTML: <div style="color:black;">
CSS: .classname {color:black;}
Colors Names List
Identifiers supported by all modern browsers:
|
aliceblue #f0f8ff |
antiquewhite #faebd7 |
aqua #0ff |
aquamarine #7fffd4 |
azure #f0ffff |
| beige #f5f5dc |
bisque #ffe4c4 |
black #000 |
blanchedalmond #ffebcd |
blue #00f |
| blueviolet #8a2be2 |
brown #a52a2a |
burlywood #deb887 |
cadetblue #5f9ea0 |
chartreuse #7fff00 |
| chocolate #d2691e |
coral #ff7f50 |
cornflowerblue #6495ed |
cornsilk #fff8dc |
crimson #dc143c |
| cyan #0ff |
darkblue #00008b |
darkcyan #008b8b |
darkgoldenrod #b8860b |
darkgray #a9a9a9 |
| darkgrey #a9a9a9 |
darkgreen #006400 |
darkkhaki #bdb76b |
darkmagenta #8b008b |
darkolivegreen #556b2f |
| darkorange #ff8c00 |
darkorchid #9932cc |
darkred #8b0000 |
darksalmon #e9967a |
darkseagreen #8fbc8f |
| darkslateblue #483d8b |
darkslategray #2f4f4f |
darkslategrey #2f4f4f |
darkturquoise #00ced1 |
darkviolet #9400d3 |
| deeppink #ff1493 |
deepskyblue #00bfff |
dimgray #696969 |
dimgrey #696969 |
dodgerblue #1e90ff |
| firebrick #b22222 |
floralwhite #fffaf0 |
forestgreen #228b22 |
fuchsia #ff00ff |
gainsboro #dcdcdc |
| ghostwhite #f8f8ff |
gold #ffd700 |
goldenrod #daa520 |
gray #808080 |
grey #808080 |
| green #008000 |
greenyellow #adff2f |
honeydew #f0fff0 |
hotpink #ff69b4 |
indianred #cd5c5c |
| indigo #4b0082 |
ivory #fffff0 |
khaki #f0e68c |
lavender #e6e6fa |
lavenderblush #fff0f5 |
| lawngreen #7cfc00 |
lemonchiffon #fffacd |
lightblue #add8e6 |
lightcoral #f08080 |
lightcyan #e0ffff |
|
lightgoldenrodyellow #fafad2 |
lightgray #d3d3d3 |
lightgrey #d3d3d3 |
lightgreen #90ee90 |
lightpink #ffb6c1 |
| lightsalmon #ffa07a |
lightseagreen #20b2aa |
lightskyblue #87cefa |
lightslategray #778899 |
lightslategrey #778899 |
| lightsteelblue #b0c4de |
lightyellow #ffffe0 |
lime #0f0 |
limegreen #32cd32 |
linen #faf0e6 |
| magenta #f0f |
maroon #800000 |
mediumaquamarine #66cdaa |
mediumblue #0000cd |
mediumorchid #ba55d3 |
| mediumpurple #9370db |
mediumseagreen #3cb371 |
mediumslateblue #7b68ee |
mediumspringgreen #00fa9a |
mediumturquoise #48d1cc |
| mediumvioletred #c71585 |
midnightblue #191970 |
mintcream #f5fffa |
mistyrose #ffe4e1 |
moccasin #ffe4b5 |
| navajowhite #ffdead |
navy #000080 |
oldlace #fdf5e6 |
olive #808000 |
olivedrab #6b8e23 |
| orange #ffa500 |
orangered #ff4500 |
orchid #da70d6 |
palegoldenrod #eee8aa |
palegreen #98fb98 |
| paleturquoise #afeeee |
palevioletred #db7093 |
papayawhip #ffefd5 |
peachpuff #ffdab9 |
peru #cd853f |
| pink #ffc0cb |
plum #dda0dd |
powderblue #b0e0e6 |
purple #800080 |
rebeccapurple #663399 |
| red #f00 |
rosybrown #bc8f8f |
royalblue #4169e1 |
saddlebrown #8b4513 |
salmon #fa8072 |
| sandybrown #f4a460 |
seagreen #2e8b57 |
seashell #fff5ee |
sienna #a0522d |
silver #c0c0c0 |
| skyblue #87ceeb |
slateblue #6a5acd |
slategray #708090 |
slategrey #708090 |
snow #fffafa |
| springgreen #00ff7f |
steelblue #4682b4 |
tan #d2b48c |
teal #008080 |
thistle #d8bfd8 |
| tomato #ff6347 |
turquoise #40e0d0 |
violet #ee82ee |
wheat #f5deb3 |
white #ffffff |
| whitesmoke #f5f5f5 |
yellow #ffff00 |
yellowgreen #9acd32 |
Red-Green-Blue (RGB) Hexadecimal (hex) Value
Color as hexadecimal value in the format #RRGGBB.
R=red, G=green,
b=blue hexadecimal value between 0 and FF (equals decimal 255)
Samples:
HTML: <div style="color:#efef00;">
CSS: .classname {color:#efef00;}
| #000000 (black) |
#FF0000 (red) |
#00FF00 (green) |
#0000FF (blue) |
The hex value can be shortened to #RGB, e.g. #F00 = #FF0000.
Red-Green-Blue rgb() Functional Notation
Color as decimal value in the form: rgb(R,G,B)
R=red, G=green, b=blue
decimal value between 0 and 255 (equals hex FF)
Samples:
HTML: <div style="color:rgb(128,128,64);">
CSS: .classname {color:rgb(128,128,64);}
| rgb(0,0,0) (black) |
rgb(255,0,0) (red) |
rgb(0,255,0) (green) |
rgb(0,0,255) (blue) |
Red-Green-Blue-Alpha rgba() Functional Notation
Color as decimal value in the form: rgba(R,G,B,A)
R=red, G=green,
b=blue decimal value between 0 and 255 (equals hex FF)
A=alpha (transparency)
value between 0.0 (fully-transparent/invisible) and 1.0 (non-transparent)
Samples:
HTML: <div style="color:rgba(128,128,64,1.0);">
CSS: .classname {color:rgba(128,128,64,1.0);}
| rgba(0,0,0,1.0) (black 100%) |
rgba(255,0,0,1.0) (red 100%) |
rgba(0,255,0,1.0) (green 100%) |
rgba(0,0,255,1.0) (blue 100%) |
Alpha Sample: Blue on a white background
| rgba(0,0,255,1.0) (blue 100%) |
rgba(0,0,255,0.75) (blue 75%) |
rgba(0,0,255,0.5) (blue 50%) |
rgba(0,0,255,0.25) (blue 25%) |
Hue-Saturation-Lightness hsl() Functional Notation
The hsl model uses the rainbow color circle (hue) combined with color
saturation and lightness in the format: hsl(H,S,L)
H (Hue) = Angle of
the color circle from 0 to 360
S (Saturation) = Color saturation from
0% to 100% (100% is full saturation, 0% is a shade of grey)
L (Lightness)
= Lightness from 0% to 100% (50% is normal, 100% is white, 0% is black)
Samples:
HTML: <div style="color:hsl(240,100%,50%);">
CSS: .classname {color:hsl(240,100%,50%);}
| hsl(0,0%,0%) (black) |
hsl(0,100%,50%) (red) |
hsl(120,100%,50%) (green) |
hsl(240,100%,50%) (blue) |
Saturation Sample (normal 50% lightness):
| hsl(240,100%,50%) (blue 100% saturation) blue |
hsl(240,75%,50%) (blue 75% saturation) |
hsl(240,50%,50%) (blue 50% saturation) |
hsl(240,25%,50%) (blue 25% saturation) |
hsl(240,0%,50%) (blue 0% saturation) shade of gray |
Lightness Sample (100% saturation):
|
hsl(240,100%,100%) (blue 100% lightness) white |
hsl(240,100%,75%) (blue 75% lightness) |
hsl(240,100%,50%) (blue 50% lightness) normal |
hsl(240,100%,25%) (blue 25% lightness) |
hsl(240,100%,0%) (blue 0% lightness) black |
Hue-Saturation-Lightness-Alpha hsla() Functional Notation
The hsla model uses the rainbow color circle (hue) combined with color
saturation, lightness and alpha in the format: hsla(H,S,L,A).
H (Hue)
= Angle of the color circle from 0 to 360
S (Saturation) = Color saturation
from 0% to 100% (100% is full saturation, 0% is a shade of grey)
L (Lightness)
= Lightness from 0% to 100% (50% is normal, 100% is white, 0% is black)
A (Alpha) = Alpha (transparency) value between 0.0 (fully-transparent/invisible)
and 1.0 (non-transparent)
Samples:
HTML: <div style="color:hsla(240,100%,50%,1.0);">
CSS: .classname {color:hsla(240,100%,50%,1.0);}
| hsla(0,0%,0%,1.0) (black) |
hsla(0,100%,50%,1.0) (red) |
hsla(120,100%,50%,1.0) (green) |
hsla(240,100%,50%,1.0) (blue) |
Saturation Sample (normal 50% lightness, no transparency):
|
hsla(240,100%,50%,1.0) (blue 100% saturation) blue |
hsla(240,75%,50%,1.0) (blue 75% saturation) |
hsla(240,50%,50%,1.0) (blue 50% saturation) |
hsla(240,25%,50%,1.0) (blue 25% saturation) |
hsla(240,0%,50%,1.0) (blue 0% saturation) shade of gray |
Lightness Sample (100% saturation, no transparency):
|
hsla(240,100%,100%,1.0) (blue 100% lightness) white |
hsla(240,100%,75%,1.0) (blue 75% lightness) |
hsla(240,100%,50%,1.0) (blue 50% lightness) normal |
hsla(240,100%,25%,1.0) (blue 25% lightness) |
hsla(240,100%,0%,1.0) (blue 0% lightness) black |
Alpha Sample (normal 50% lightness, 100% saturation): Green on a white background
|
hsla(120,100%,50%,1.0) (green 100%) |
hsla(120,100%,50%,0.75) (green 75%) |
hsla(120,100%,50%,0.5) (green 50%) |
hsla(120,100%,50%,0.25) (green 25%) |