Color Example
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>