CSS Colors

Colors play an important role in CSS as they can be used to set the color of the text, background, border, etc. of the selected element. We can even create color gradients using CSS colors.

A color value in CSS can be specified using any of the following formats:

1. Color Name
2. RGB Format
3. RGBA Format
4. HEX Format
5. HSL Format
6. HSLA Format

Let’s discuss each format one by one:

1. Color Name

CSS has a list of predefined color names which can be used directly. Few of them are ‘red’, ‘green’, ‘blue’, ‘orange’,
‘gold’, ‘silver’, etc.

To use such a color all you have to do is, specify the color name directly. Refer to the example below:

Example:

<h1 style="background-color: red;">Red</h1>
<h1 style="background-color: green;">Green</h1>
<h1 style="background-color: blue;">Blue</h1>
<h1 style="background-color: orange;">Orange</h1>
<h1 style="background-color: gold;">Gold</h1>
<h1 style="background-color: silver;">Silver</h1>
<h1 style="background-color: springgreen;">springgreen</h1>

2. RGB Format

In RGB format, the color value is a combination of red, green, and blue colors. The color value is defined using the inbuilt rgb() function. This function takes 3 parameters as follows:

rgb(red, green, blue)

Each parameter accepts a value in range of 0 to 255. The value 0 represents no amount and 255 represents the highest amount of the color in the color combination.

For example, the rgb(255, 0, 0) means the ‘red’ color, as the full amount(255) of it is used in the combination while others are not used(0).

Similarly, rgb(0, 255, 0) means ‘green’ and rgb(0, 0, 255) means ‘blue’.

Setting all three parameters to 0 i.e. rgb(0, 0, 0) results in a ‘black’ color while setting all three parameters to 255 i.e. rgb(255, 255, 255) results in a ‘white’ color.

Try mixing the three colors in the below color mixer:

Try out the example below to see the implementation with the background-color property:

Example:

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>
<h1 style="background-color:rgb(0, 255, 0);">rgb(0, 255, 0)</h1>
<h1 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h1>
<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>
<h1 style="background-color:rgb(210, 90, 124);">rgb(210, 90, 124)</h1>
<h1 style="background-color:rgb(100, 150, 10);">rgb(100, 150, 10)</h1>

3. RGBA Format

RGBA is almost similar to the RGB format except that it accepts an additional parameter which defines the transparency level of the color value.

rgba(red, green, blue, alpha)

The fourth parameter(alpha) accepts a value in range of 0 to 1.

The alpha value 0 makes the color fully transparent while the value 1 makes the color fully visible(no transparency). In one word, we can say that the higher the value of alpha, the lower the transparency level.

The default value of alpha is 1.

Try out the example below to see the implementation with the background-color property:

Example:

<h1 style="background-color:rgba(255, 0, 0, 1);">rgba(255, 0, 0, 1)</h1>
<h1 style="background-color:rgba(255, 0, 0, 0.8);">rgba(255, 0, 0, 0.8)</h1>
<h1 style="background-color:rgba(255, 0, 0, 0.5);">rgba(255, 0, 0, 0.5)</h1>
<h1 style="background-color:rgba(255, 0, 0, 0.3);">rgba(255, 0, 0, 0.3)</h1>
<h1 style="background-color:rgba(255, 0, 0, 0.1);">rgba(255, 0, 0, 0.1)</h1>

4. HEX Format

The HEX(short form of hexadecimal) is the most commonly used CSS color format. In this format, the color value is represented by six digits preceded by a hash(#) symbol.

#rrggbb

Each digit/character in #rrggbb accepts a value between 0 to F.

The first two digits(rr) represent the amount of red color, the next two digits(gg) represent the green color and the last two digits(bb) represent the amount of blue color.

For example, #ff0000 means pure ‘red’ color as the first two digits are set to their highest value(f) and other color values are set to 0.

Similarly, #00ff00 means pure ‘green’ and #0000ff means pure ‘blue’ color.

If all digits are set to their lowest value i.e. #000000, it results in a pure ‘black’ color while setting all digits to their highest value i.e. #ffffff results in a pure ‘white’ color.

Try mixing the three colors in the below color mixer:

Try out the example below to see the implementation with the background-color property:

Example:

<h1 style="background-color: #ff0000;">#ff0000</h1>
<h1 style="background-color: #00ff00;">#00ff00</h1>
<h1 style="background-color: #0000ff;">#ff00ff</h1>
<h1 style="background-color: #000000;">#000000</h1>
<h1 style="background-color: #ffffff;">#ffffff</h1>
<h1 style="background-color: #3c8f23;">#3c8f23</h1>
<h1 style="background-color: #23d471;">#23d471</h1>

5. HSL Format

HSL is a short form of Hue, Saturation, and Lightness. The color value in this format is defined using the inbuilt function hsl() which takes three parameters as follows:

hsl(Hue, Saturation, Lightness)

• Hue – It is a degree on the color wheel from 0 to 360. Where 0 represents a red color, 120 represents a green color and 240 represents a blue color.
• Saturation – It specifies the saturation of the color by adding gray color in it. It is defined using %. 100% means fully saturated i.e. no shades of gray, 50% means 50% gray, and 0% means fully unsaturated i.e. only gray and therefore the color will become completely invisible.
• Lightness – It specifies the % of light that will be used in the color. 0% means black(no light), 50% means neither light nor dark, and 100% means pure white(full lightness).

Try mixing the three parameters in the below HSL mixer:

Try out the example below to see the implementation with the background-color property:

Example:

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%);</h1>
<h1 style="background-color:hsl(120, 100%, 50%);">hsl(120, 100%, 50%);</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%);</h1>
<h1 style="background-color:hsl(0, 50%, 50%);">hsl(0, 50%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
<h1 style="background-color:hsl(0, 50%, 100%);">hsl(0, 50%, 100%)</h1>
<h1 style="background-color:hsl(0, 50%, 0%);">hsl(0, 50%, 0%)</h1>

6. HSLA Format

HSLA format is almost similar to HSL format except that it needs an additional parameter to define the transparency level of the color. It uses the hsla() function to define the color value as follows:

hsla(Hue, Saturation, Lightness, Alpha)

The fourth parameter(alpha) defines the transparency level of the color. It accepts a value between 0 to 1.

The default value is 1 which means that the color will not be transparent at all(fully visible). A value of 0 means fully transparent i.e. the color will not be visible at all.

The higher the value of alpha, the lower the transparency level.

Try mixing the HSLA value in the below mixer:

Try out the example below to see the implementation with the background-color property:

Example:

<h1 style="background-color:hsla(120, 100%, 50%, 1);">hsla(120, 100%, 50%, 1);</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.8);">hsla(120, 100%, 50%, 0.8);</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.5);">hsla(120, 100%, 50%, 0.5);</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.3);">hsla(120, 100%, 50%, 0.3);</h1>
<h1 style="background-color:hsla(120, 100%, 50%, 0.1);">hsla(120, 100%, 50%, 0.1);</h1>