HTML colors let you make your pages look alive. You can change text colors, background colors, border colors, and more. There are several ways to specify colors in HTML.
Color Names (The Easiest Way to Start)
The simplest way to add color is by using color names. HTML supports 140 standard color names like red, blue, green, tomato, dodgerblue, and lightgray.
Here are some examples of color names:
Background Color
You can change the background color of any element using background-color. This works on the whole page or just specific elements like headings and paragraphs.
You can also give the whole page a background color by adding the style to the <body> tag.
Text Color
Change the color of your text using the color property. This is different from background color. Background color changes the background behind the text. Color changes the text itself.
You can combine background color and text color together for better contrast:
Just make sure there is enough contrast so people can read your text easily. Dark text on a dark background is hard to read.
Border Color
You can add borders to elements and give them colors too. A border goes around the element like a frame.
The syntax is: border:2px solid Tomato; (2 pixels thick, solid line, tomato color).
You can change the thickness (2px, 5px, 10px) or the style (solid, dotted, dashed) later. For now, just know that borders can have colors too.
Other Ways to Specify Colors (RGB, HEX, HSL)
Color names are easy, but they only give you 140 options. What if you want a specific shade of blue? That is where RGB, HEX, and HSL come in. They give you millions of colors.
RGB stands for Red, Green, Blue. Each value is between 0 and 255. rgb(255, 99, 71) gives you tomato red.
HEX is a six-digit code starting with a hashtag. #ff6347 is the same tomato red.
HSL stands for Hue, Saturation, Lightness. hsl(9, 100%, 64%) is also tomato red.
Do not worry if this seems complicated. You will get used to it. Most developers use HEX codes because they are short and easy to copy.
All three of these look exactly the same. They are just different ways to say the same color.
Transparency with RGBA and HSLA
Sometimes you want a color that is see-through. That is where RGBA and HSLA come in. The “A” stands for Alpha, which controls transparency. 1 is fully solid. 0 is fully invisible. 0.5 is 50% see-through.
See how the ones with lower numbers are more washed out? That is transparency at work. You can see the white page background through them.
Quick Summary
- Color names are easiest for beginners (140 options).
background-colorchanges the background of an element.colorchanges the text color.borderwith a color adds a colored frame around an element.- RGB uses numbers from 0 to 255 for red, green, and blue.
- HEX uses six-digit codes starting with # (like #ff6347).
- HSL uses Hue, Saturation, and Lightness values.
- RGBA and HSLA add an Alpha channel for transparency.
What Just Happened? Let Me Explain
- Start with color names. They are simple and work great for most things.
- When you need more colors, try a color picker tool online. It will give you the RGB or HEX code.
- Most developers use HEX codes because they are short.
#ff0000is red,#0000ffis blue,#00ff00is green. - Transparency is useful for overlays, shadows, and modern design effects.
- Do not stress about memorizing codes. You can always look them up or use a color picker.
HTML Color Reference
Here are the different ways to specify colors in HTML:
| Method | Example | Description |
|---|---|---|
| Color Names | Tomato |
140 standard color names, easy to remember |
| RGB | rgb(255, 99, 71) |
Red, Green, Blue values from 0 to 255 |
| HEX | #ff6347 |
Six-digit code starting with # |
| HSL | hsl(9, 100%, 64%) |
Hue, Saturation, Lightness |
| RGBA | rgba(255, 99, 71, 0.5) |
RGB with Alpha (transparency) |
| HSLA | hsla(9, 100%, 64%, 0.5) |
HSL with Alpha (transparency) |