HTML Colors
You can colour text, backgrounds and borders using names, HEX codes, RGB or HSL values.
Colour Names
Browsers understand about 140 colour names, such as red, orange, teal, navy and tomato.
Example
<!DOCTYPE html>
<html>
<body>
<h2 style="background-color:tomato;">Tomato</h2>
<h2 style="background-color:orange;">Orange</h2>
<h2 style="background-color:teal; color:white;">Teal</h2>
<h2 style="background-color:navy; color:white;">Navy</h2>
</body>
</html>Text, Background and Border Colours
Example
<!DOCTYPE html>
<html>
<body>
<p style="color:darkgreen;">Green text</p>
<p style="background-color:lightblue;">Light blue background</p>
<p style="border:2px solid crimson;">Crimson border</p>
</body>
</html>HEX Colours
A HEX colour starts with # and has six characters: two for red, two for green, two for blue. Each pair goes from 00 (none) to ff (full).
| HEX | Colour |
|---|---|
#ff0000 | Red |
#00ff00 | Green |
#0000ff | Blue |
#000000 | Black |
#ffffff | White |
#e34c26 | The orange-red of the HTML logo |
Example
<h1 style="color:#e34c26;">HTML is fun</h1>HEX is the most common format in real projects. Designers usually give you colours as HEX codes from tools like Figma.
RGB Colours
rgb(red, green, blue) uses numbers from 0 to 255 for each part.
Example
<!DOCTYPE html>
<html>
<body>
<p style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</p>
<p style="background-color:rgb(0, 128, 0); color:white;">rgb(0, 128, 0)</p>
<p style="background-color:rgb(200, 200, 200);">rgb(200, 200, 200) is light gray</p>
</body>
</html>When all three numbers are equal, you get a shade of gray.
Transparency with RGBA
Add a fourth number, the alpha, from 0 (fully see-through) to 1 (solid).
Example
<p style="background-color:rgba(0, 0, 255, 0.2);">Soft blue background</p>
<p style="background-color:rgba(0, 0, 255, 0.8); color:white;">Strong blue background</p>HSL Colours
hsl(hue, saturation, lightness) describes colours the way people think about them:
- Hue: a position on the colour wheel, 0 to 360 (0 is red, 120 is green, 240 is blue)
- Saturation: 0% is gray, 100% is full colour
- Lightness: 0% is black, 50% is normal, 100% is white
Example
<p style="background-color:hsl(30, 100%, 50%);">Orange</p>
<p style="background-color:hsl(30, 100%, 85%);">Light orange</p>HSL makes it easy to create lighter and darker shades of one colour.
Exercise
Exercise
What colour is #000000?