HTML — Colors

Specifying color in HTML

Colors are applied with the style attribute (or CSS, once you separate concerns). Three common value formats:

<h1 style="background-color: tomato;">Named color</h1>
<h1 style="background-color: rgb(255, 99, 71);">RGB</h1>
<h1 style="background-color: #ff6347;">HEX</h1>
<h1 style="background-color: hsl(9, 100%, 64%);">HSL</h1>

All four render the same orange-red — they're different languages for describing identical colors.

1. Color names

HTML understands 140+ named colors:

<p style="color: tomato;">tomato</p>
<p style="color: dodgerblue;">dodgerblue</p>
<p style="color: mediumseagreen;">mediumseagreen</p>
<p style="color: slategray;">slategray</p>
<p style="color: orchid;">orchid</p>

Names are great for learning and quick prototypes. Limits: imprecise ("tomato" is one specific red — you can't adjust it), inconsistent coverage of the full spectrum.

2. RGB — Red, Green, Blue

Screens make every color by mixing light:

rgb(red, green, blue)
      │       │     └── 0–255 amount of blue
      │       └──────── 0–255 amount of green
      └──────────────── 0–255 amount of red

<p style="color: rgb(255, 0, 0);">Pure red — only red light.</p>
<p style="color: rgb(0, 255, 0);">Pure green.</p>
<p style="color: rgb(0, 0, 255);">Pure blue.</p>
<p style="color: rgb(0, 0, 0);">All off = black.</p>
<p style="color: rgb(255, 255, 255);">All on = white.</p>
<p style="color: rgb(128, 128, 128);">Equal mid values = gray.</p>

Mixing intuition:

Value	Result
`rgb(255, 165, 0)`	Orange
`rgb(128, 0, 128)`	Purple
`rgb(255, 192, 203)`	Pink

Higher values → more of that light. Equal values → shades of gray.

3. HEX — hexadecimal shorthand

HEX is just RGB in a compact notation. Six digits, each pair covering red, green, blue from 00 (off) to FF (full):

#ff6347
│││││└── blue:  47
││││└──── green: 63
│││└────── red:  ff

<p style="color: #ff0000;">Red    (same as rgb(255,0,0))</p>
<p style="color: #00ff00;">Green  (same as rgb(0,255,0))</p>
<p style="color: #0000ff;">Blue   (same as rgb(0,0,255))</p>
<p style="color: #ff6347;">Tomato (same as rgb(255,99,71))</p>
<p style="color: #333;">Near-black shorthand for #333333</p>

Why hex rules the professional world: design tools, color pickers and style guides all speak it. #ff6347 is copy-paste friendly in a way "rgb(255, 99, 71)" isn't.

Shorthand: when both digits of each pair match (#aabbcc), write one digit: #abc.

4. HSL — Hue, Saturation, Lightness

The human-friendly format:

hsl(hue, saturation%, lightness%)
        │        │           └── 0%=black, 50%=normal, 100%=white
        │        └────────────── 0%=gray, 100%=pure color
        └─────────────────────── 0-360° on the color wheel

<p style="color: hsl(120, 100%, 50%);">Vivid green</p>
<p style="color: hsl(120, 100%, 25%);">Dark green   — less lightness</p>
<p style="color: hsl(120, 100%, 75%);">Pastel green — more lightness</p>
<p style="color: hsl(120, 30%, 50%);">Muted green  — less saturation</p>

HSL shines for building color schemes: keep hue, vary lightness:

<div style="background:hsl(200,80%,20%);">darkest</div>
<div style="background:hsl(200,80%,40%);">dark</div>
<div style="background:hsl(200,80%,60%);">light</div>
<div style="background:hsl(200,80%,80%);">lightest</div>

Four harmonious shades, zero guesswork. This is how designers think.

Background vs text color

Two properties cover most needs:

<body style="background-color: #f4f4f4;">

    <h1 style="color: #222222;">Dark text on light background</h1>

    <p style="background-color: navy; color: white; padding: 10px;">
        White text on a navy box.
    </p>

</body>

What the browser displays

A pale gray page. A near-black heading. A navy rectangle with white padded text inside it.

Contrast: the accessibility rule

Colored text is easy to get wrong. Low contrast hurts low-vision readers and everyone on a phone in sunlight:

<!-- Bad: yellow on white is nearly invisible -->
<p style="color: #ffff00; background: #ffffff;">Can you read me?</p>

<!-- Good: strong difference -->
<p style="color: #222222; background: #ffffff;">Always readable.</p>

Guidelines that keep you safe:

Dark text on light backgrounds, or the reverse — never similar tones
Body text contrast at least 4.5 : 1 (WCAG standard)
Never rely on color alone to carry meaning (add icons/labels too)
Test your palette in an online contrast checker

Picking colors like a pro

Choose one primary brand color
Use HSL to derive lighter/darker variants
Add neutral grays for text/backgrounds
Steal curated palettes from color sites until you develop judgment

Mini Practice

Build palette.html:

Set a page background using HEX
Make three headings: one named color, one RGB, one HSL
Create a "card" div — background color + contrasting text color
Build a five-step HSL scale of your favorite hue
Check every text/background pair passes squint-test contrast

Next: links →

Frequently Asked Questions about Colors

What is Colors in HTML?

Colors is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Colors?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Colors.

Why is Colors important in HTML?

Colors is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.