HTML Colors Code With Explanation
Whether you are redesigning your Website or using the color palette for the first time. This article will help you with the essential knowledge to update and add colors to your website.
Color creates emotion, establishes the tone, and makes your site’s overall design more aesthetic. Thus, to improve the overall design of your website and create a pleasant user interface, colors are very crucial.
In this article, we’ll cover everything that you must know about design principles related to HTML color codes.
How to add Color Code to your HTML Web-page?
In HTML we use the style attribute to add colors to various elements. Moreover, we use Cascading Style Sheets (CSS) to incorporate colors in the HTML components.
<p style="color: red;">Red paragraph text</p>
Colors improve the aesthetics of a web page. We can use CSS to add color to the background, tables, paragraphs, and other elements of the web page.
For example, to change the color of a paragraph we can use the following markup
In the above HTML snippet, we used to style attribute to change the color of our paragraph to Red.
HTML Color Codes
We all observe many colors in our daily life, many of these colors have names, such as red and yellow. However, there are hundreds of different hues within these colors, each with its own name. There’s bright pink, bubblegum pink, rose, fuchsia, magenta, and a slew of additional colors to choose from.
The trouble is that, no matter how detailed we try to be, different people will interpret these color names differently. Someone’s neon pink could be someone else’s fuchsia, which could be someone else’s magenta.
Portfolio Website using HTML and CSS (Source Code)
To avoid confusion and maintain a standard naming convention we use HTML color codes. HTML color codes are deciphered by computers, allowing them to display the correct color. These codes can be found in a number of different formats, such as Hex color codes, RGB, etc.
HTML Hex Color Codes
Hex color code is the most popular HTML format for websites and other software applications. A hex color code constitutes six numbers or characters and a hashtag as its prefix.
For example, #FF0000 is the Hex color code for the color red.
<p style="color: #FF0000;">Red paragraph text</p>
The first two numbers or characters represent the intensity of the color red, followed by the next 2 characters for green, and the last two characters for the color blue. Each character takes up a value from 0-9 and A-F, where 0 is the minimum and F is the maximum.
Thus we can rewrite the above HTML snippet using Hex color,
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
HTML RGB Color Codes
Another format for the HTML color is RGB color code. The RGB color code uses three number values, one each for red, green, and blue.
Here, we use rgb(red, green, blue) property to indicate colors. Each of the three parameters (red, green, and blue) specifies the color’s intensity as a number between 0 and 255.
For example, We can change the background of the paragraph element using the rgb() property.
ADVERTISEMENT
<p style="bgcolor: "rgb(0,255,0);">Green background</p>
You can also use separate HTML and CSS files to add colors to your website.
ADVERTISEMENT
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Heading with green background</h1> <p>Red paragraph text</p> </body> </html>
Css File
ADVERTISEMENT
h1 { background-color: rgb(0, 255, 0); } p { color: #FF0000; }
you get all html color codes o this website👇
ADVERTISEMENT
ADVERTISEMENT
Conclusion:-
Color can be used to draw attention to a particular aspect of a page, establish brand awareness, and make your website unique. You can add or alter the color on your site to create a coherent design. Now that you have a basic understanding of HTML color codes, it is best to explore it more on your own by adding different styles to your web page.