Introduction

Colors goes beyond just red, yellow, green and the colors of the rainbow. There are over a thousand shades of colors and in this article we will look at the different ways in specifying colors in css.

Css Colors

The css color property can be set to decorate text, borders and backgrounds of an element and they are written in 4 ways which are:

RGB

This is an abbreviation for (Red, Green, Blue). RGB has a limit of 0 - 255 or as percentage value 0 - 100%

RGB is written as

p{
color: rgb(255, 40, 0);

255 - red
40 - green
0 - blue

Here's an image of few RGB colors

Image source: ionos.com/digitalguide/websites/web-design/..?

RGBA

This is an abbreviation for (Red, Green, Blue, Alpha).This is like RGB but it has an additional value of alpha. The alpha here makes the colors transparent. The alpha value has the limit of 0.0(fully transparent) and 1.0(not transparent at all) and in percentage 0 - 100%

RGBA is written as

p{
color: rgba(20, 255, 0, 1.0);
}

20 - red
255 - green
0 - blue
1.0 - alpha

Here's an image of RGBA color

Image source: commons.wikimedia.org/wiki/File:RGBA_Logo_C..

HSL

This is an abbreviation for (hue, saturation, lightness). It is one of the least used.

Hue: This has a limit of 0-360 where 0 is red, 120 is green and 240 is blue
Saturation: This has a percentage value where 0% is a shade of grey and 100% is the full color
Lightness: This also has a percentage value where 0% is black and 100% is white

HSL is written as

p{
color: hsl(0, 100%, 50%);
}

0 - hue
100% - saturation
50% - lightness

Here is an image of HSL colors

Image source: technologyuk.net/computing/website-developm..

HSLA

This is just like RGBA but it stands for (hue, saturation, lightness, alpha). The alpha value has a limit of 0.0(fully transparent) and 1.0(not transparent at all). It is simply HSL but has an alpha value included.

HSLA is written as

p{
color : hsla(90, 100%, 50%, 0.0);
}

90 - hue
100% - saturation
50% - lightness
0 - alpha

Here's an image of HSLA colors

Image source: htmlcolors.com/hsla-color

HEXADECIMAL

They can also be called hex; they are written as six-digit alphanumeric. It has a base of 16. Hex values are between 0 and F.

Hexadecimal: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Decimals: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15

NOTE: Hex values always starts with (#) sign.

Six digit hex

This is written as rrggbb where rr(red), gg(green), bb(blue).

6-digit hex is written as

p{
color: #FA2025;
}

FA - red
20 - green
25 - blue

Here is an image of 6-digit hex colors

long hex.png

Image source: tutorials.freshersnow.com/css/css-colors

Eight digit hex

This is an optional value. It has eight digits because it has an additional alpha value so instead of rrggbb it is rrggbbaa.

Here's the limit of the alpha value:

100% FF
95% F2
90% E6
85% D9
80% CC
75% BF
70% B3
65% A6
60% 99
55% 8C
50% 80
45% 73
40% 66
35% 59
30% 4D
25% 40
20% 33
15% 26
10% 1A
5% 0D
0% 00

Here's an image of the 8-digit hex

4 hex.png

Image source: android.jlelse.eu/android-dev-tip-3-99da754..

The short written forms of Hex values

Hex three digit code

This works if the red, green and blue values are each same then you can use just three digits to represent the six digit. So instead of rrggbb it will be rgb.

Three digit hex is written as

p{
color: #000;
}

#000 - instead of #000000

Here's an image of three short hex colors