HTML Text Color
Applying color to your HTML text is simple! This brief guide will show you how to modify the color of your text with HEX codes, HTML color names, and RGB/HSL values.
Text color using HEX color codes
The most frequent method for coloring HTML text involves using hexadecimal color codes (often called HEX codes). Simply add a style attribute to the text element you wish to color—a paragraph in this instance—and then use the color property with your chosen HEX code.
If you don't have a HEX code ready, don't worry. You can use our color picker to explore millions of colors with their corresponding HEX codes and much more.
HTML
<body>
<p style="color:#FF0000";>Red paragraph text</p>
</body>Text color using HTML color names
A different approach to coloring your website's text is to use an HTML color name. The HTML code is very similar; just substitute the HEX code from the earlier example with the name of the desired color (red in our case). There are 140 named colors available, and we've created a list you can view here.
HTML
<body>
<p style="color:red;">Red paragraph text</p>
</body>Text color using RGB color values
Working with RGB values is highly popular today, and it's just as straightforward as using HEX codes or color names. Insert your RGB values inside the rgb() parameter that follows the color property. Our color picker can provide RGB values in addition to HEX codes.
When applying an RGB value on your website, you can also define its opacity. Instead of rgb(), use rgba()—the 'a' signifies the alpha channel, which manages opacity. After your three color values, add a fourth value for opacity on a scale from 0 (completely transparent) to 1 (fully opaque).
HTML
<body>
<p style="color:rgb(255,0,0);">Red paragraph text</p>
</body>HTML
<body>
<p style="color:rgba(255,0,0,0.5);">Red paragraph text</p>
</body>Text color using HSL color values
A fourth technique for adding color involves HSL values. Similar to the RGB syntax mentioned earlier, HSL employs the hsl() prefix and accepts three values for hue, saturation, and lightness. Hue is defined on a scale of 0–360, while saturation and lightness are percentages ranging from 0% to 100%.
Just as with RGB, when you use HSL, you can adjust the color's opacity directly in the color property. Use the hsla() prefix and add a fourth value between 0 and 1 to set the desired level of opacity.
HTML
<body>
<p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>HTML
<body>
<p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>