Thread by @kaveri04

Colors in CSS

We can express colors in any of the following 3 formats :

1️⃣rgb ( 255, 0, 0 )

2️⃣#ff0000

3️⃣hsl (9, 100%, 64%)

1️⃣ rgb ( 0, 0, 0 ) --> represents amount of Red , Green, Blue

Each color ranges from 0 to 255

Eg : rgb (255 , 0 , 0) --> displays only red color other two colors
are not displayed

We can add transparent property using --> rgba(17, 16, 16, 0.9)

a represents alpha , which can be any value between 0 and 1
where 0 is full transparent and 1 is opaque

2️⃣ #ff0000 --> represents amount of Red , Green, Blue in hexa-decimal , numbers range from zero to f

Eg : #ff0000 --> displays only red color other two colors
are not displayed

We can mention the transparent property by adding 2 digit value at the end
Eg : #ff000010

The value of transparent property can vary between 00 to ff

00 is fully transparent and ff is fully opaque

3️⃣ hsl (120 , 100% , 50% ) --> this is again represented in Red Green Blue

H --> Hue is shade of color
S --> Saturation is darkness of color
L --> Lightness of color

Hue is represented as angle of the colors :

0 and 360 = Red
120 = Green
240 = Blue

For further information , this is a good article for the HSL color format

sarasoueidan.com/blog/hex-rgb-t…

Saturation is how dark the mentioned color should be it can vary between 0 to 100%

0 is grey and 100 % is darkest version of the mentioned color

Lightness value can also vary from 0 to 100%

100% is white because it is the lightest color possible and 0 % is black

when lightness % decreases the color keeps getting closer to black

Colors can also be expressed simply using their names :
eg :
color : brown;
background-color : powderblue

But it is recommended to use any of the above ways to represent colors ,

shades of color might differ based on the browser if we mention color names instead of rgb value

Thanks for reading .. If you enjoyed this thread then

🔷 Follow me @kaveri04 for more content on web development
🔷 Tell me your thoughts in the comments below ⬇️ and retweet the below tweet , it motivates me to post more awesome content 😍