Web design has evolved over the decades and certainly along the way has been the introduction of the use of HTML color names. This is a friendly way of defining colors on HTML elements using names rather than the Hex color codes.
The challenge with these is that you may not know what colors are valid for use in your project as these cannot just be any color you can perceive.
There are actually currently 140 HTML color names you can pick from and they are used just the same way you would use the Hex codes in either HTML, CSS, or JavaScript or whichever way will work for you.
How to use HTML Color Names on Your Website
You can use your HTML Color attributes names directly in your HTML as shown in this example but as of HTML5 the color attributes are no longer supported so take note. These have been added for backward compatibility.
<body>
<p color="#ff0000">Old style Red paragraph</p>
<p color="red">Old style Red paragraph using color names</p>
</body>It is recommended to use the style attribute to set your colors in HTML as this example shows.
<body>
<p style="color:#ff0000;">Old style Red paragraph</p>
<p style="color:red;">Old style Red paragraph using color names</p>
</body>How About in CSS?
The same color names can be used in your CSS files by setting the properties as seen in this example:
p{
color:red;
}How About JavaScript Styling?
There are several ways you can do the same in JavaScript. Because of the dynamic nature of the language you have several ways to code it in. Generally, this would be a way to set the color of an element using JavaScript:
document.getElementById("redText").style.color = "red";Generally, that is all there is to it. You can view a complete HTML color names table here representing the color names with equivalent RGB and Hex representations.
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.
