HTML, or HyperText MarkUp Language, is the fundamental basic code we use to build websites. This programming language is how we organize, arrange, and format text and documents for use on websites. HTML is also the first coding language many people learn, and it’s pretty easy to master on your own. In a previous article, we went over basic HTML document formatting for making text bold and italic. In this article, we’ll take it up a notch and show you how to change the color of words and letters using HTML. Later, you can take what you’ve learned in this article and experiment in an HTML editor.
Alt Text= Image of HTML code on a computer screen.
Caption= Changing the color of text using HTML is actually quite simple.
- Coloring Text with HEX Color Codes
There’s more than one way to change the color of your text using HTML. The most ubiquitous method of changing the color of the text is by using the hexadecimal color codes, also known as ‘HEX’ color codes, located here. Adding a style attribute to change the color of your text using HEX codes is easy. Simply follow the guide below.
<p style=”color:#FF0000″;>Red paragraph text</p>
- Coloring text using color names in HTML
There’s another really easy way to change the color of your text in HTML. Simply name the color in the HTML text, similar to how you did it above. All you have to do is replace the value in front of ‘color:’ and proceed with the same process you used with HEX codes. Not every color can be represented using text, however. Simply refer to this list to see if you can write out your desired color using text.
<p style=”color:red;”>Red paragraph text</p>
- Coloring text with RGB values
RGB values are an increasingly popular way to change the color of the text in HTML. This method is simple to use, and it works the same way as HEX and color names. Simply find your color code here and insert it into the text using the same steps as before.
<p style=”color:rgb(255,0,0);”>Red paragraph text</p>
You can also change the opacity of your text color using RGB values, which is another reason why this method has become so popular. The example below shows you how to adjust opacity. Increase or decrease the value ‘0.5’ in an HTML editor to see the difference. The lower the value, the more transparent the text.
<p style=”color:rgba(255,0,0,0.5);”>Red paragraph text</p>
- Coloring text with HSL values
HSL values are used in a similar way to RGB values, and they’re an excellent choice for coloring text in HTML. You can also use HSL to set a value for lightness, hue, and opacity, which is helpful for custom design work. HSL colors work in the same way as RGB, the main difference being the extra color setting options it offers. Try out the example below.
<p style=”color:hsl(0,100%,50%);”>Red paragraph text</p>
When you want to change the opacity or other properties of the color, use this one.
<p style=”color:hsla(0,100%,50%,1);”>Red paragraph text</p>
HTML is an essential website coding language to know. While it is quite basic, you can still do plenty of useful things with it. If you want to give HTML a shot or start working on your own project, experiment in this HTML editing tool. If you need a refresher on HTML or want to learn about some other basic coding languages, check out this article and give it a try.
Want to make a career out of coding? You can get started in just 21 days with Career Karma!