HTML Text Color

HTML Tutorial

HTML Text Color

Adding color to your HTML text is simple! In this concise tutorial, we'll explain how to modify the color of your HTML text using Hex color codes, HTML color names, RGB values, and HSL values. A vibrant text color can enhance the visual appeal of your web pages, making the content more engaging and easier to read.

Text Color Using Hex Color Codes

The most popular method for coloring HTML text is by using hexadecimal color codes (often referred to as Hex codes). These codes are composed of six characters that represent the intensity of red, green, and blue colors. To apply a color, simply add a style attribute to the text element you wish to color—such as 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>

No Hex code? No problem! Use our color picker to explore millions of colors along with their Hex codes and more, enabling you to find the perfect shade for your needs effortlessly.

Text Color Using HTML Color Names

You can also color your website's text using HTML color names. This method is straightforward and user-friendly, as it requires no additional codes. The HTML syntax is similar; just replace the Hex code from the previous step with the desired color name (like red in our example). There are 140 named colors available, and we've compiled a list that you can check out here, making it easy to choose from a predefined palette.

html

<body>
	<p style="color:red;">Red paragraph text</p>
</body>

Text Color Using RGB Color Values

Using RGB values is currently very popular and just as easy as using Hex codes or color names. This method allows for precise control over the color displayed. Insert your RGB values within the rgb() function following the color property. You can also use our color picker to obtain RGB values along with Hex codes, helping you seamlessly transition between color formats.

html

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

When employing an RGB value on your website, you can specify opacity as well. Instead of rgb(), use rgba()—the 'a' stands for alpha, which controls opacity. After your three color values, add a fourth value for opacity, ranging from 0 (completely transparent) to 1 (fully opaque). This feature is particularly useful when layering colors or creating effects.

html

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

Text Color Using HSL Color Values

Another method for adding color is through HSL values. Similar to the RGB syntax, HSL uses the hsl() prefix and three values for hue, saturation, and lightness. Hue is represented on a scale from 0 to 360 degrees, representing colors in a circular fashion, while saturation and lightness are percentages ranging from 0% to 100%, allowing for nuanced color adjustments.

html

<body>
	<p style="color:hsl(0,100%,50%);">Red paragraph text</p>
</body>

Like RGB, you can adjust color opacity using HSL directly in the color property. Use the hsla() prefix and include a fourth value between 0 and 1 to define the level of opacity you require. This flexibility enables you to create rich, layered designs that stand out.

html

<body>
	<p style="color:hsla(0,100%,50%,1);">Red paragraph text</p>
</body>

Share with your friends!

Tweet
Post
LinkedIn
Reddit

Tweet Post LinkedIn Reddit