DocHero
Lesson 38 +10 XP

HTML Colors

HTML Colors

Colors in HTML can be written many ways. Let's learn the main ones!

1. Color names

The easiest way: just say the color's name.

<h1 style="background-color: tomato;">Tomato</h1>
<h1 style="color: dodgerblue;">Dodger blue</h1>

There are 140 named colors you can use: red, blue, green, tomato, gold, lavender, and many more.

2. RGB values

RGB = Red, Green, Blue. Every color is a mix of these three lights, each from 0 to 255.

<p style="color: rgb(255, 0, 0);">Pure red</p>
<p style="color: rgb(0, 0, 255);">Pure blue</p>
<p style="color: rgb(255, 255, 255);">White</p>
<p style="color: rgb(0, 0, 0);">Black</p>
  • rgb(255,0,0) is red, rgb(0,255,0) is green, rgb(0,0,255) is blue.
  • Mix them to make every color!
  • You can also add alpha for transparency: rgba(255, 0, 0, 0.5) (0.5 = half see-through).

3. HEX values

HEX is another way to write RGB, using numbers and letters. It starts with # and has 6 characters: 2 for red, 2 for green, 2 for blue.

<p style="color: #ff0000;">Red</p>
<p style="color: #00ff00;">Green</p>
<p style="color: #0000ff;">Blue</p>
<p style="color: #ffffff;">White</p>
  • ff is the biggest value, 00 is zero.
  • #ff0000 = rgb(255,0,0) = red. Same color, two spellings!

4. HSL values

HSL = Hue, Saturation, Lightness.

  • hue = the base color (0-360 degrees on a color wheel).
  • saturation = how colorful (0-100%).
  • lightness = how light or dark (0-100%).
<p style="color: hsl(0, 100%, 50%);">Red (hue 0)</p>
<p style="color: hsl(120, 100%, 50%);">Green (hue 120)</p>
  • hsla(0, 100%, 50%, 0.3) adds alpha for transparency too.

Background colors, borders, and more

Colors work everywhere: backgrounds, text, borders, and more.

<div style="background-color: lightblue; border: 3px solid navy;">
  A box with a blue background and a navy border.
</div>

TL;DR

  • Color names: tomato, dodgerblue, gold...
  • RGB: rgb(255, 0, 0) (Red, Green, Blue each 0-255).
  • HEX: #ff0000 (6 chars, 2 per color).
  • HSL: hsl(hue, saturation%, lightness%).
  • Add a for transparency: rgba, hsla.
  • Same color can be written many ways!