As of now, we have studied that a color can be specified with its name and the RGB value. In this chapter, we will study how color can also be specified with a hexadecimal value.
Color in HTML with a hexadecimal number is represented with a format like #RRGGBB.
Here, RR represents intensity in hexadecimal numbers for the red color component.
GG represents the hex value for the green color and BB represents the hex value for the blue color.
Use below HEX color generator to set different intensity levels for red, green and blue colors to form a resultant color.
Red
Green
Blue
The hexadecimal value for each color can only be set between 00 and FF.
The decimal equivalent of HEX 00 is 0 and of HEX FF is 255.
If you notice, the hexadecimal color model is similar to the RGB color model we studied in the last chapter. The only difference is that the color combinations are represented with a hexadecimal number that starts with the symbol #.
If we set the intensity of red, green and blue color to 00, the black color will be produced on the web page.
So the color code for black in hexadecimal representation will be #000000.
If we set the intensity of all three colors to the maximum level which is FF then the white color is produced.
And hence the color code for white in hexadecimal representation is #FFFFFF.
If we set the intensity for the red color to FF, the green color to 00 and the blue color to 00 then the red color is produced.
And hence the color code for red in hexadecimal representation is #FF0000.
Set red color = 00
green color = FF
blue color = 00
Hence, HEX code for the green color = #00FF00
Set red color = 00
green color = 00
blue color = FF
Hence, HEX code for the blue color = #0000FF
If we set all three parameters to equal values, we produce different shades of gray color.
Below is a table of some favourite color names with their corresponding HEX and RGB code.
| Color | Name | HEX Code | RGB |
|---|---|---|---|
| Salmon | #FA8072 | rgb(250, 128, 114) | |
| Crimson | #DC143C | rgb(220, 20, 60) | |
| Pink | #FFC0CB | rgb(255, 192, 203) | |
| Tomato | #FF6347 | rgb(255, 99, 71) | |
| Orange | #FFA500 | rgb(255, 165, 0) | |
| Khaki | #F0E68C | rgb(240, 230, 140) | |
| Violet | #EE82EE | rgb(238, 130, 238) | |
| Magenta | #FF00FF | rgb(255, 0, 255) | |
| Purple | #800080 | rgb(128, 0, 128) | |
| Teal | #008080 | rgb(0, 128, 128) | |
| SkyBlue | #87CEEB | rgb(135, 206, 235) | |
| LightGray | #D3D3D3 | rgb(211, 211, 211) |
To convert the hex color code to RGB value, we will first separate the intensities set in hex codes for corresponding red, green and blue color and write the decimal equivalent for the same.
For example, the hex color code for purple is #800080.
Now we know that the intensity for the red color is set to the hexadecimal number 80.
The decimal equivalent for 80 is 128. Hence the RGB color model will set the intensity for red to 128.
Similarly, the hex number for green is set to 00.
Hex 00 => 0 in decimal
Hence in the RGB color model, we will set the intensity for the green to 0.
Again the hex number for blue is set to 80 which is equivalent to the decimal number 128.
Hex 80 => 128 in decimal
Hence,
Purple Color => #800080 => rgb(128,0,128)
| 1. HTML Tutorial |
| 2. Introduction to HTML |
| 3. Basic HTML Page |
| 4. HTML Editors |
| 5. Web Browser |
| 6. HTML History |
| 7. Basic HTML Tags |
| 8. HTML Elements |
| 9. HTML Attributes |
| 10. HTML Headings |
| 11. HTML Paragraphs |
| 12. HTML Text Formatting |
| 13. HTML Styles |
| 14. HTML Comment |
| 15. HTML Quotation |
| 16. HTML Colors |
| 17. HTML RGB Colors |
| 18. HTML HEX Colors |
| 19. HTML HSL Color |
| 20. HTML CSS |
| 21. HTML Links |
| 22. HTML Link Colors |
| 23. Link within Page |
| 24. HTML Images |
| 25. HTML Background Image |
| 26. HTML Image Map |
| 27. HTML Picture Element |
| 28. HTML Favicon |
| 29. HTML Table |
| 30. HTML Table Border |
| 31. HTML Table Size |