Introduction of HTML Colors

Introduction of HTML Colors

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 \
HTML5 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

  1. RGB or RGBA
  2. HEX
  3. 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

Introduction of HTML Colors

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

Introduction of HTML Colors

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 valueHEX valueHSL 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>
<h1 style=”background-color:rgb(255, 0, 0);”>rgb(255, 0, 0)</h1><h1 style=”background-color:rgb(0, 0, 255);”>rgb(0, 0, 255)</h1><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>
</body>

</html>

Output

Introduction of HTML Colors

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 gray0% 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 ☝✌✌

Leave a Comment

Show Buttons
Hide Buttons