CSS Colors

Color Example

css colors

Hello

world

rgb(255, 100, 10)

This is a test message This is a test message This is a test message This is a test message This is a test message This is a test message

Code: 

<!DOCTYPE html>
<html>
<body>

<h1 style=”background-color:red; color:yellow”>Hello</h1>
<h1 style=”background-color:lime; color:red;  border: 5px solid violet;”>world</h1>
<h2 style=”background-color:rgb(255, 100, 10);”>rgb(255, 100, 10)</h2>

<p style=”background-color:yellow; color:red;”>This is a test message This is a test message This is a test message This is a test message This is a test message This is a test message </p>

</body>
</html>

RGBA

RED , GREEN, BLUE, ALPHA

Note: Alpha specifies the opacity of color

Alpha 0.0 full transparent and 1 is not transparent

first

second

third

fourth

Code:

<!DOCTYPE html>
<html>
<body>

<h1 style=”background-color:rgba(255, 80, 60, 0);”>first</h1>
<h1 style=”background-color:rgba(255, 90, 65, 0.2);”>second</h1>
<h1 style=”background-color:rgba(255, 90, 71, 0.4);”>third</h1>
<h1 style=”background-color:rgba(255, 90, 71, 0.6);”>fourth</h1>
</body>
</html>

Hue, Saturation and Lightness Example

Hue:  It is a degree on the color from 0 to 360

Saturation: It is a percentage value, 0% means shade of gray and 100% is hte full color. It describe as intensity of a color.

Lightness: It is also percentage where 0% is black and 50% is light or dark, 100% white. It describes as how much light you want to give the color.

hsl(10, 50%, 20%)

hsl(20, 100%, 50%)

hsl(0, 100%, 50%)

Code:

<!DOCTYPE html>
<html>
<body>

<h1 style=”background-color:hsl(10, 50%, 20%);”>hsl(10, 50%, 20%)</h1>
<h1 style=”background-color:hsl(20, 100%, 50%);”>hsl(20, 100%, 50%)</h1>
<h1 style=”background-color:hsl(0, 100%, 50%);”>hsl(0, 100%, 50%)</h1>

</body>
</html>

HSLA

Hue, Saturation ,Lightness and Alpha

Alpha 0.0 full transparent and 1 is not transparent

first

second

third

fourth

Code:

<!DOCTYPE html>
<html>
<body>

<h1 style=”background-color:hsla(8, 100%, 60%, 0);”>first</h1>
<h1 style=”background-color:hsla(8, 100%, 65%, 0.2);”>second</h1>
<h1 style=”background-color:hsla(8, 100%, 65%, 0.4);”>third</h1>
<h1 style=”background-color:hsla(8, 100%, 65%, 0.8);”>fourth</h1>
</body>
</html>