The default HTML pages that are rendered into the browser are pretty bland. For example, it’s just a web page using black and white content and blue links.
We can add colors to CSS to make the webpage more attractive.
For colors in CSS, we have properties like:
colorbackground-colorborder-color
All of them accept the color value when it has in various forms.
This Tutorial of CSS Colors includes the following:
- CSS Keyword
- Syntax
- Named colors
- RGB and RGBa Color Values
- Hexadecimal notation
- Shorthand Notation for Hex Values
- HSL and HSLa Color Codes
- Example Program using CSS Colors Properties
CSS <color> Keyword
A <color> can be determined in any of the following ways:
- Applying a keyword (such as blue or transparent)
- Using the HSL cylindrical-coordinate system (through the
hsl()andhsla()functional notations) - Using the RGB cubic-coordinate system (via the #-hexadecimal or the
rgb()andrgba()functional notations)
The list of 17 original CSS Colors are listed as follows:
| Color | Keyword | Hex Value |
|---|---|---|
| black | #000000 | |
| gray | #808080 | |
| silver | #c0c0c0 | |
| white | #ffffff | |
| maroon | #800000 | |
| red | #ff0000 | |
| purple | #800080 | |
| fuchsia | #ff00ff | |
| green | #008000 | |
| lime | #00ff00 | |
| olive | #808000 | |
| yellow | #ffff00 | |
| navy | #000080 | |
| blue | #0000ff | |
| teal | #008080 | |
| aqua | #0000ff | |
| orange | #ffa500 |
Syntax
The syntax of the <color> datatype is defined using one of the options enlisted below.
For Example:
p {
color: red;
}
Read More:
Named colors
Previously, CSS started with 16 colors but now we have a wide range of color names list. There are some predefined colors that we can just assign to the CSS, like:
- aliceblue
- antiquewhite
- aqua
- aquamarine
- azure
- beige
- bisque
- black
- blanchedalmond
- blue
- blueviolet
- brown
- burlywood
- cadetblue
- chartreuse
- chocolate
- coral
- cornflowerblue
- cornsilk
- crimson
- cyan
- darkblue
- darkcyan
- darkgoldenrod
- darkgray
- darkgreen
- darkgrey
- darkkhaki
- darkmagenta
- darkolivegreen
- darkorange
- darkorchid
- darkred
- darksalmon
- darkseagreen
- darkslateblue
- darkslategray
- darkslategrey
- darkturquoise
- darkviolet
- deeppink
- deepskyblue
- dimgray
- dimgrey
- dodgerblue
- firebrick
- floralwhite
- forestgreen
- fuchsia
- gainsboro
- ghostwhite
- gold
- goldenrod
- gray
- green
- greenyellow
- grey
- honeydew
- hotpink
- indianred
- indigo
- ivory
- khaki
- lavender
- lavenderblush
- lawngreen
- lemonchiffon
- lightblue
- lightcoral
- lightcyan
- lightgoldenrodyellow
- lightgray
- lightgreen
- lightgrey
- lightpink
- lightsalmon
- lightseagreen
- lightskyblue
- lightslategray
- lightslategrey
- lightsteelblue
- lightyellow
- lime
- limegreen
- linen
- magenta
- maroon
- mediumaquamarine
- mediumblue
- mediumorchid
- mediumpurple
- mediumseagreen
- mediumslateblue
- mediumspringgreen
- mediumturquoise
- mediumvioletred
- midnightblue
- mintcream
- mistyrose
- moccasin
- navajowhite
- navy
- oldlace
- olive
- olivedrab
- orange
- orangered
- orchid
- palegoldenrod
- palegreen
- paleturquoise
- palevioletred
- papayawhip
- peachpuff
- peru
- pink
- plum
- powderblue
- purple
- rebeccapurple
- red
- rosybrown
- royalblue
- saddlebrown
- salmon
- sandybrown
- seagreen
- seashell
- sienna
- silver
- skyblue
- slateblue
- slategray
- slategrey
- snow
- springgreen
- steelblue
- tan
- teal
- thistle
- tomato
- turquoise
- violet
- wheat
- white
- whitesmoke
- yellow
- yellowgreen
also transparent and currentColor which inherits the border-color for example.
We have plenty of options instead of these Named colors.
RGB and RGBa Color Values
We can usergb()function to get color in the form of RGB which is base on three different colors i.e red, green, and blue. From 0 to 255:
a {
color: rgb(255, 125, 25);
background-color: rgb(125,100, 200);
}
The below table is an example to display few colors utilizing RGB values.
| Color | Color RGB |
|---|---|
| rgb(0,0,0) | |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,255,0) | |
| rgb(0,255,255) | |
| rgb(255,0,255) | |
| rgb(192,192,192) | |
| rgb(255,255,255) |
rgba() lets us use the alpha channel that creates a transparency effect. That can be a number from 0 to 1:
a {
background-color: rgba(100, 200, 150, 0.5);
}
Hexadecimal notation
Probably the most common (yet least intuitive) way to specify colors in CSS is to use their hexadecimal (or hex) values. Hex values are actually just a different way to represent RGB values. Instead of using three numbers between 0 and 255, you use six hexadecimal numbers. Hex numbers can be 0-9 and A-F. Hex values are always prefixed with a # symbol.
ul { color: #8050c8; } /* purple */
Shorthand Notation for Hex Values
For instance, in case both digits of the red, green, and blue values are the same, then you may utilize the short three-digit notation as shown in the below example codes.
p { color: #000; } /* black same as #000000 */
p { color: #fff; } /* white same as #ffffff */
p { color: #f00; } /* red: same as #ff0000 */
h1 { color: #0f0; } /* lime: same as #00ff00 */
ul { color: #ff0; } /* yellow: same as #ffff00 */
HSL and HSLa color codes
The HSL color model is one of the least used, but gaining traction because can be more intuitive to use when working with shades and color adjustments.
HSL stands for hue, saturation, and lightness. Hue is defined by a color wheel. Each color represents a degree on the wheel.
Example:
a { background-color: hsl(240,100%, 75%); } /* shade of blue */
HSLA is simply the HSL color model with the addition of an alpha channel. This works exactly the same way as the alpha channel in RGBA.
a { background-color: hsla(240,100%, 75%, 0.5); } /* shade of blue */
Example Program using CSS Colors Properties
Let’s see an example of CSS colors, which covers the above properties from below.
<html>
<head>
<title>CSS hsl color property</title>
<style>
h1{
text-align:center;
}
#rgb{
color:rgb(255,0,0);
}
#rgba{
color:rgba(255,0,0,0.5);
}
#hex{
color:#EE82EE;
}
#short{
color: #E8E;
}
#hsl{
color:hsl(0,50%,50%);
}
#hsla{
color:hsla(0,50%,50%,0.5);
}
#built{
color:green;
}
</style>
</head>
<body>
<h1 id="rgb">
Hello World. This is RGB format.
</h1>
<h1 id="rgba">
Hello World. This is RGBA format.
</h1>
<h1 id="hex">
Hello World. This is Hexadecimal format.
</h1>
<h1 id="short">
Hello World. This is Short-hexadecimal format.
</h1>
<h1 id="hsl">
Hello World. This is HSL format.
</h1>
<h1 id="hsla">
Hello World. This is HSLA format.
</h1>
<h1 id="built">
Hello World. This is Built-in color format.
</h1>
</body>
</html>
Output:
