HTML Text Color
Adding color to your HTML page/text is belive me is very easy! In this short tutorial we’ll cover how to change the color of your HTML text using Hex color codes, HTML color names, RGB and HSL values.
Text color using Hex color codes
The most common ideal way of adding color to HTML text is by using hexadecimal color codes (Hex code for short). Simply add a style attribute to the text element you want to color – a paragraph in the example below – and use the color property with your Hex code.
<body>
<p style=”color:#FF0000″;>Red paragraph text</p>
</body>
DEMO ON CODEPEN
Text color using HTML color names
There is another way of adding to color the website’s text and simply is by using an HTML color name. The HTML code is similar, just replace the Hex code from the previous step with the name of the color you want to use (red in our example). There are 140 named colors to choose from, and we’ve compiled a list which you can check out here.
<body>
<p style=”color:red;”>Red paragraph text</p>
</body>
DEMO ON CODEPEN
Text color using RGB color values
Using RGB values is all the rage these days, but it’s just as easy as Hex codes or color names. Insert the RGB values within the rgb() parameter following the color property and can be used from the color picker to get RGB values in addition to Hex codes.
<body>
<p style=”color:rgb(255,0,0);”>Red paragraph text</p>
</body>
DEMO ON CODEPEN
When using an RGB value in the website, one can also very interstingly specify its opacity range. Instead of rgb() use rgba() – the a is for alpha, the color channel that controls opacity – and after your three color values add a fourth for opacity, on a scale from 0 – 1 (0 for completely transparent, 1 for fully opaque).
<body>
<p style=”color:rgba(255,0,0,0.5);”>Red paragraph text</p>
</body>
DEMO ON CODEPEN
Text color using HSL color values
One more, and infact a fourth method for adding color is by using HSL values. Its very Similar to the RGB syntax described above, HSL uses the hsl() prefix, and three values for hue, saturation and lightness. Hue is represented on a scale of 0 – 360, while saturation and lightness are each a percentage between 0% and 100%.
<body>
<p style=”color:hsl(0,100%,50%);”>Red paragraph text</p>
</body>
DEMO ON CODEPEN
Just like RGB, when using HSL you can modify the color opacity right in the color property. Use the hsla() prefix and include a fourth value between 0 and 1 for the level of opacity you need.
HTML
<body>
<p style=”color:hsla(0,100%,50%,1);”>Red paragraph text</p>
</body>
DEMO ON CODEPEN
