CSS Color Values
In CSS, we can give a value for a color in many ways. They are
- Hexadecimal (with or without transparency)
- RGB or RGBA
- HSL or HSLA
- Cross-browser color names
Hexadecimal Color Values
The format of hexadecimal color value is
#RRGGBB
where RR, GG, and BB are the red, green, and blue components of the color.
We can also provide an optional transparency as shown in the following.
#RRGGBBAA
where AA is for transparency.
The range of values for RR, GG, BB, and AA components is [00, FF]. We can provide any value from 00 to FF (including these).
We can also use shortcut format of these color values. The shortcut format is
#RGB
and with transparency
#RGBA
The following are some of the examples for valid hexadecimal color values.
#644 /* #RGB format */ #ff07 /* #RGBA format */ #ff00aa /* #RRGGBB format */ #ff00aa77 /* #RRGGBBAA format */
In the following HTML, we apply background colors for divs, using these hexadecimal color values.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
display: inline-block;
margin:10px;
width: 100px;
height: 100px;
}
#div1 {
background: #644;
}
#div2 {
background: #ff07;
}
#div3 {
background: #ff00aa;
}
#div4 {
background: #ff00aa77;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
RGB or RGBA Color Values
The format of RGB color value is
rgb(red, blue, green)
where red, blue, and green are integers in the range [0, 255] or percentage values in the range [0%, 100%] representing the respective components of the color.
The format of RGBA color value is
rgba(red, blue, green, alpha)
where alpha specifies the opacity. alpha takes value in the range [0.0, 1.0] where 0.0 is fully transparent, and 1.0 is fully opaque.
The following are some of the examples for valid hexadecimal color values.
rgb(24, 142, 255) rgb(24, 142, 255, 0.5)
In the following HTML, we apply background colors for divs, using these RBG or RGBA color values.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
display: inline-block;
margin:10px;
width: 100px;
height: 100px;
}
#div1 {
background: rgb(24, 142, 255);
}
#div2 {
background: rgb(24, 142, 255, 0.5);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
HSL or HSLA Color Values
The format of HSL color value is
hsl(hue, saturation, lightness)
where
- hue is degree on the color wheel. The value of hue ranges from 0 to 360, where 0 indicates red, 120 indicates green and 240 indicates blue.
- saturation is the percentage of colorfulness. The value of saturation ranges from 0% to 100%, where 0% means no color and may result in a shade of gray, and 100% means full color.
- lightness is the percentage of light in the color. The value of saturation ranges from 0% to 100%, where 0% means black, and 100% means white.
The format of HSLA color value is
hsla(hue, saturation, lightness, alpha)
where alpha specifies the opacity. alpha takes value in the range of [0.0, 1.0] where 0.0 is fully transparent, and 1.0 is fully opaque.
The following are some of the examples for valid hexadecimal color values.
hsl(24, 42%, 50%) hsla(24, 42%, 50%, 0.6)
In the following HTML, we apply background colors for divs, using these HSL or HSA color values.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
display: inline-block;
margin:10px;
width: 100px;
height: 100px;
}
#div1 {
background: hsl(140, 42%, 50%);
}
#div2 {
background: hsla(140, 42%, 50%, 0.6);
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
Cross-browser Color Names
HTML and CSS color specification has a list of 140+ predefined colors, and all of the popular browsers implement these colors.
| Color Name | Hex Value |
|---|---|
| aliceblue | #F0F8FF |
| antiquewhite | #FAEBD7 |
| aqua | #00FFFF |
| aquamarine | #7FFFD4 |
| azure | #F0FFFF |
| beige | #F5F5DC |
| bisque | #FFE4C4 |
| black | #000000 |
| blanchedalmond | #FFEBCD |
| blue | #0000FF |
| blueviolet | #8A2BE2 |
| brown | #A52A2A |
| burlywood | #DEB887 |
| cadetblue | #5F9EA0 |
| chartreuse | #7FFF00 |
| chocolate | #D2691E |
| coral | #FF7F50 |
| cornflowerblue | #6495ED |
| cornsilk | #FFF8DC |
| crimson | #DC143C |
| cyan | #00FFFF |
| darkblue | #00008B |
| darkcyan | #008B8B |
| darkgoldenrod | #B8860B |
| darkgray | #A9A9A9 |
| darkgreen | #006400 |
| darkgrey | #A9A9A9 |
| 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 |
| green | #008000 |
| greenyellow | #ADFF2F |
| grey | #808080 |
| 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 |
| lightgreen | #90EE90 |
| lightgrey | #D3D3D3 |
| lightpink | #FFB6C1 |
| lightsalmon | #FFA07A |
| lightseagreen | #20B2AA |
| lightskyblue | #87CEFA |
| lightslategray | #778899 |
| lightslategrey | #778899 |
| lightsteelblue | #B0C4DE |
| lightyellow | #FFFFE0 |
| lime | #00FF00 |
| limegreen | #32CD32 |
| linen | #FAF0E6 |
| magenta | #FF00FF |
| 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 |
| red | #FF0000 |
| 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 |
Conclusion
In this CSS Tutorial, we learned about color values that can be used in CSS.