Shiwani Tiwari: HTML Color

Hello Guys ......

Every one mind have a question About HTML colors .Today I will Discuss you all the Question and Answer

What is Html Color Work?
How many type ways to use colors ?
How many type of colors?
Why we use colors on web?

HTML COLORS \

HTML colors is very important to our website looks. You can set the color in any specific tag .using color our website make more beautiful.

Three way to introduce the color

RGB or RGBA
HEX
HSL

COLOR NAME

here i tell you the colors name .You can put the color in any tag i told you above

if you want to background color so you have to use backgound-color:red; on particular tag.
if you want to color your text so use color:red for the particular tag

Example for background color

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;">Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;">Gray</h1>

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

</body>

</html>

Output

Example for text color

here you can see the color of text WHITE

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato; color:white;">Tomato</h1>

<h1 style="background-color:Orange;color:white;">Orange</h1>

<h1 style="background-color:DodgerBlue;color:white;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;color:white;">MediumSeaGreen</h1>

<h1 style="background-color:Gray;color:white;">Gray</h1>

<h1 style="background-color:SlateBlue;color:white;">SlateBlue</h1>

<h1 style="background-color:Violet;color:white;">Violet</h1>

<h1 style="background-color:LightGray;color:white;">LightGray</h1>

</body>

</html>

Output

COLOR VALUE

Now we will discuss the most important topic . In HTML , color can also specified

RGB value or if you wan to add opacity then use RGBA value

HEX value

HSL value

HTML RGB AND RGBA value

here RGB color stand for -

red
green
blue

Each perameter of rgb(red,green,blue) define the identity of the color value 0 to 255

In rgb three color that means each color contain 0-255 color value

means 256*256*256 =16777216 colors

here i tell you each parameter color

For Example rgb(255,0,0) which means it displayed only red color because here set the 255 highest value and other 2 (green.blue) set 0 .

<h1 style="background-color:rgb(255, 0, 0);">Red color</h1>

Another Example reb(0,255,0) here displayed only green color because here set the 255 highest value and other (red,blue) set 0.

<h1 style="background-color:rgb(0, 255, 0);">Green color</h1>

One Another Example rgb(0,0,255) here displayed only blue color because here set the 255 highest value and other (green,blue) set 0.

<h1 style="background-color:rgb(0, 0, 255);">blue color</h1>

If you want to display black color ,set all the parameter 0 like this (0,0,0)
If you want to display white color , set all parameter 255 like this (255,255,255)

If you will change the value of 0 to 255 you will see the different colors like

rgb(255,0,0) for the red color but you want to change the color to set the any value between 0- 255 and show the color .

Example- here the color value of parameter are different you can use you text editor and see the colors

<h1 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h1>

<h1 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h1>

<h1 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h1>

<h1 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h1

See here for particular colors value for different type of color

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Output

NOW RGBA COLOR

RGBA color stand for R(red) G(green) B(blue) A for ALPHA like Opacity(0.5)

rgba(red,green,blue,alpha)

The alpha parameter is a number between 0.0 (fully trasparent) 1.0 ( not transparent at all)

R(255) G(0) B(0) A(0.5)

Example

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>

<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

</body>

</html>

Output

HTML HEX value

HEX define hexadecimal color with #RRGGBB when you will you this color have you have to use # tag

where RR-(red) , GG(green) , BB(blue) are hexadecimal value between 00 to FF (00-255)

For example #ff0000 it displayed a red color because you set highest value of code is ff (RR) and other set 00(GG) ,00(BB) value

<h1 style="background-color:#ff0000;">#ff0000</h1>

Another Example #00ff00 it displayed a green color because you set highest value of code is ff (GG) and other set 00(RR) ,00(BB) value

<h1 style="background-color:#00ff00;">#00ff00</h1>

One Again Example #0000ff it displayed a blue color because you set highest value of code is ff (BB) and other set 00(RR) ,00(GG) value

<h1 style="background-color:#0000ff;">#0000ff</h1>

Display back set 00 in perameter #000000
Display White set ff in prametet #ffffff

If you want to change the color then set the parameter value between 0-255 or 0-ff

here see the example :-

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:#ff0000;">#ff0000</h1>

<h1 style="background-color:#0000ff;">#0000ff</h1>

<h1 style="background-color:#3cb371;">#3cb371</h1>

<h1 style="background-color:#ee82ee;">#ee82ee</h1>

<h1 style="background-color:#ffa500;">#ffa500</h1>

<h1 style="background-color:#6a5acd;">#6a5acd</h1>

</body>

</html>

Output:-

HTML HSL AND HSLA value

HSL stand for hue , saturation , lightness

HSLA stand for hue , saturation, lightness and alpha that is (opacity)

hsl(hue,saturation,lightness)

hue is a color degree between 0-360
Saturation is a percentage value between 0% to 100% where 0% represent the shade of gray color.
Lightness is also a percentage value 0-100% where 0% represent the black and 100% represent to whiter color
if your color degree or saturation and light =ness vary between 0-360 or 0-100%

Example:-

<!DOCTYPE html>

<html>

<body>

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

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

<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>

<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>

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

<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

</body>

</html>

Output

Saturation - describe at intensity of color

100% is pure white

50% means shade gray

0% means completely gray

Example-

<!DOCTYPE html>

<html>

<body>

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

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

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

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

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

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

</body>

</html>

output-

lightness- it describe how much light you want

0% means no light(black)

50% means neither dark nor light

100% means full whiteness(white)

Example-

<!DOCTYPE html>

<html>

<body>

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

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

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

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

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

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

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

</body>

</html>

Output-

HTML HSLA value

HSLA where A represent the opacity between 0-1

HSLA(hue,saturation,lightness,opacity)

alpha parameter is between 0.0(fully transparent) to 0.1(not fully trasparent)

Example-

<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

</body>

</html>

Output-

THANK YOU GUYS WATCH MY BLOG AND FOLLOW ☝✌✌

Shiwani Tiwari

Tuesday, June 16, 2020

HTML Color

2 comments:

Jquery Hide,Show,Toggel Effects

Search This Blog