HTML Colors

HTML COLORS



Colors are very important for your website to look and feel good. In the HTML document, you can set the color for different tags using the background-color attribute. This is all done inside the <body> tag in HTML.
Background-color - sets the color for the background of the page.
Text color - sets a color for body text.

Html color coding methods
There are three types of methods to set color in your web page -


  • 1 color names
  • 2 hex code
  • 3 color decimals or percentage values


It has three types of color coding methods.
Now we will understand it with the help of this examples.


Color name

In HTML, using a color name, we can specify a color:
Example 



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h1 style="background-color:Tomato;">Tomato</h1>
  5. <h1 style="background-color:Orange;">Orange</h1>
  6. <h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
  7. <h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
  8. <h1 style="background-color:Gray;">Gray</h1>
  9. <h1 style="background-color:SlateBlue;">SlateBlue</h1>
  10. <h1 style="background-color:Violet;">Violet</h1>
  11. <h1 style="background-color:LightGray;">LightGray</h1>
  12. </body> 
  13. </html>


Result -
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray



HTML background color


You can set background colors for HTML elements using background color.
As the mind has told you in the example:
Example



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h1 style="background-color:DodgerBlue;">WEB STUDY</h1>
  5. <p style="background-color:Tomato;"> webstudy is web developer information blog, with tutorials and Examples to web development topics.HTML Beginning HTML Guide.. </p>
  6. </body> 
  7. </html>


Result -
WEB STUDY

webstudy is web developer information blog, with tutorials and Examples to web development topics.HTML Beginning HTML Guide..




HTML text color


You can set the color of text by using the Colors name in HTML:
Example



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h3 style="color:Tomato;">WEB STUDY</h3>
  5. <p style="color:DodgerBlue;">webstudy is web developer information blog, with tutorials and  Examples to web development topics.HTML Beginning HTML Guide..</p>
  6. <p style="color:MediumSeaGreen;">webstudy is web developer information blog, with tutorials and Examples to web development topics. HTML Beginning HTML Guide..</p>
  7. </body>
  8. </html>


Result -

WEB STUDY

webstudy is web developer information blog, with tutorials and Examples to web development topics.HTML Beginning HTML Guide..
webstudy is web developerinformation blog, with tutorials and Examples to web development topics.HTML Beginning HTML Guide..



Border color
In HTML you can set the color of borders according to you:
Example



  1. <!DOCTYPE html>
  2. <html> 
  3. <body>
  4. <h1 style="border: 2px solid Tomato;">Web Study</h1>
  5. <h1 style="border: 2px solid DodgerBlue;">Web Study</h1>
  6. <h1 style="border: 2px solid Violet;">Web Study</h1>
  7. </body> 
  8. </html>


Result -

Web Study

Web Study

Web Study





HTML Color values


In HTML documents, colors can also be specified using the following values.

  • 1 RGB values
  • 2 hex value.
  • 3 HSL values
  • 4 RGBA values
  • 5 HSLA values

Example



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h1 style="background-color:rgb(255, 99, 71);">rgb (255, 99, 71)</h1>
  5. <h1 style="background-color:#ff6347;">#ff6347</h1>
  6. <h1 style="background-color:hsl(9, 100%, 64%);"> hsl(9, 100%, 64%)</h1>
  7. <p>Same as color name "Tomato", but 50% transparent:</p>
  8. <h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba (255, 99, 71, 0.5)</h1>
  9. <h1 style="background-color:hsla(9, 100%, 64%, 0.5);"> hsla(9, 100%, 64%, 0.5)</h1>
  10. </body> 
  11. </html>


Result -
rgb(255, 99, 71)

#ff6347
hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)






HTML RGB value


In the HTML Documents, using this formula, you can specify one color as the RGB value:
RGB Colors (red, green, blue)
In it each parameter (red, green, and blue) colors defines the color intensity between 0 and 255.
Example



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h1 style="background-color:rgb(255,0,0);">rgb(255,0,0)</h1>
  5. <h1 style="background-color:rgb(0,0,255);">rgb(0,0,255)</h1>
  6. <h1 style="background-color:rgb(60,179,113);">rgb(60,179,113)</h1>
  7. <h1 style="background-color:rgb(238,130,238);">rgb(238,130,238)</h1>
  8. <h1 style="background-color:rgb(255,165,0);">rgb(255,165,0)</h1>
  9. <h1 style="background-color:rgb(106,90,205);">rgb(106,90,205)</h1>
  10. <p>In HTML, you can specify colors using RGB values.</p>
  11. </body> 
  12. </html>


Result -
rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60,179,113)

rgb(238,130,238)

rgb(255, 165, 0)

rgb(106, 90, 205)

In HTML, you can specify colors using RGB values.





In this, we often define gray colors by using values equal to 3 light sources:
Example



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>
  5. <h1 style="background-color:rgb(60,60,60);">rgb(60,60,60)</h1>
  6. <h1 style="background-color:rgb(120,120,120);">rgb(120,120,120)</h1>
  7. <h1 style="background-color:rgb(180,180,180);">rgb(180,180,180)</h1>
  8. <h1 style="background-color:rgb(240,240,240);">rgb(240,240,240)</h1>
  9. <h1 style="background-color:rgb(255,255,255);">rgb(255,255,255)</h1>
  10. </body> 
  11. </html>


Result -
rgb(0, 0, 0)

rgb(60,60,60)

rgb(120,120,120)

rgb(180,180,180)

rgb(240,240,240)

rgb(255,255,255)





HTML Hex value


In the HTML document, one color can be displayed using hexadecimal value:
#rrggbb
Where there is hexadecimal value between RR (red), gg (green) and BB (blue) 00 and FF (similar to decimal 0-255).
Example



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h1 style="background-color:#ff0000;">#ff0000</h1>
  5. <h1 style="background-color:#0000ff;">#0000ff</h1>
  6. <h1 style="background-color:#3cb371;">#3cb371</h1>
  7. <h1 style="background-color:#ee82ee;">#ee82ee</h1>
  8. <h1 style="background-color:#ffa500;">#ffa500</h1>
  9. <h1 style="background-color:#6a5acd;">#6a5acd</h1>
  10. </body> 
  11. </html>


Result -
#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500

#6a5acd





Gray colors in HTML are often defined as sources of all 3 lightings:
Example



  1. <!DOCTYPE html> 
  2. <html> 
  3. <body>
  4. <h1 style="background-color:#000000;">#000000</h1>
  5. <h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
  6. <h1 style="background-color:#787878;">#787878</h1>
  7. <h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
  8. <h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
  9. <h1 style="background-color:#ffffff;">#ffffff</h1>
  10. </body> 
  11. </html>


Result -
#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff






HTML Hsl value


In the HTML document, a color can be displayed using color for color, saturation, and lightness (HSL):
HSL (color, saturation, lightness)
HSL value has a degree on the color wheel from Hugh 360 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation in HSL value is one percent value, 0% is gray shade, and 100% is full color.
Lightness in HSL value is also 1 percent, 0% is black, and 50% is light or black, 100% white.
Example



  1. <!DOCTYPE html>
  2. <html> 
  3. <body>
  4. <h1 style="background-color:hsl(0,100%,50%);">hsl(0,100%,50%)</h1>
  5. <h1 style="background-color:hsl(240,100%,50%);">hsl(240,100%,50%)</h1>
  6. <h1 style="background-color:hsl(147,50%,47%);">hsl(147,50%,47%)</h1>
  7. <h1 style="background-color:hsl(300,76%,72%);">hsl(300,76%,72%)</h1>
  8. <h1 style="background-color:hsl(39,100%,50%);">hsl(39,100%,50%)</h1>
  9. <h1 style="background-color:hsl(248,53%,58%);">hsl(248,53%,58%)</h1>
  10. </body> 
  11. </html>


Result -
hsl(0,100%,50%)

hsl(240,100%,50%)

hsl(147,50%,47%)

hsl(300,76%,72%)

hsl(39,100%,50%)

hsl(248,53%,58%)





Saturation Example



  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1 style="background-color:hsl(0,100%,50%);">hsl(0,100%,50%)</h1>
  5. <h1 style="background-color:hsl(0,80%,50%);">hsl(0,80%,50%)</h1>
  6. <h1 style="background-color:hsl(0,60%,50%);">hsl(0,60%,50%)</h1>
  7. <h1 style="background-color:hsl(0,40%,50%);">hsl(0,40%,50%)</h1>
  8. <h1 style="background-color:hsl(0,20%,50%);">hsl(0,20%,50%)</h1>
  9. <h1 style="background-color:hsl(0,0%,50%);">hsl(0,0%,50%)</h1>
  10. </body>
  11. </html>


Result -
hsl(0,100%,50%)

hsl(0,80%,50%)

hsl(0,60%,50%)

hsl(0,40%,50%)

hsl(0,20%,50%)

hsl(0,0%,50%)




Lightness Example



  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h1 style="background-color:hsl(0,100%,0%);">hsl(0,100%,0%)</h1>
  5. <h1 style="background-color:hsl(0,100%,25%);">hsl(0,100%,25%)</h1>
  6. <h1 style="background-color:hsl(0,100%,50%);">hsl(0,100%,50%)</h1>
  7. <h1 style="background-color:hsl(0,100%,75%);">hsl(0,100%,75%)</h1>
  8. <h1 style="background-color:hsl(0,100%,90%);">hsl(0,100%,90%)</h1>
  9. <h1 style="background-color:hsl(0,100%,100%);">hsl(0,100%,100%)</h1>
  10. </body>
  11. </html>


Result -
hsl(0,100%,0%)

hsl(0,100%,25%)

hsl(0,100%,50%)

hsl(0,100%,75%)

hsl(0,100%,90%)

hsl(0,100%,100%)


MORE HTML COLOR NAME & VALUES:

HTML Colors Name & Value

HTML Colors Name & Value

HTML Colors Name & Value

HTML Colors Name & Value

HTML Colors Name & Value

HTML COLORS- Colors are very important for your website to look and feel good. In the HTML document, you can set the color for different tags using the background-color attribute. This is all done inside the tag in HTML. Background-color - sets the color for the background of the page. Text color - sets a color for body text.

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget