HTML Text Color

Adding color to your HTML text is 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 way of coloring 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. 

HTML

<body>
  <p style="color:#FF0000";>Red paragraph text</p>
</body>
Demo on CodePen

Don't have a Hex code? Not to worry, use our color picker to browse millions of colors with Hex color codes, and so much more.

Text color using HTML color names

Another way to color your website's text 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. 

HTML

<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 your RGB values within the rgb() parameter following the color property. You can use our color picker to get RGB values in addition to Hex codes. 

HTML

<body>
  <p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>
Demo on CodePen

When using an RGB value in your website, you can also specify opacity. 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). 

HTML

<body>
  <p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>
Demo on CodePen

Text color using HSL color values

A fourth method for adding color is by using HSL values. 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%. 

HTML

<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