HTML Colors

Colors in HTML can be represented in multiple ways. Mastering different color representation methods gives you flexible and precise control over every pixel in your web design.

Color Representation Overview

There are three main color representation methods in HTML and CSS: color names, hexadecimal, and RGB. They can all define colors, but each has its own use cases:

Example

<!-- All three represent a red background -->
<div style="background-color: red;">Color Name: red</div>
<div style="background-color: #FF0000;">Hex: #FF0000</div>
<div style="background-color: rgb(255,0,0);">RGB: rgb(255,0,0)</div>

Color Names

HTML supports over 140 standard color names. The most commonly used include: red, blue, green, black, white, gray, orange, purple, yellow, and more. Using color names is the most intuitive approach — no need to memorize encoding rules:

Common Color Names

Hexadecimal (Hex)

Hexadecimal colors start with # in the format #RRGGBB, where RR represents the red value, GG the green value, and BB the blue value, with a range of 00 to FF (hexadecimal). If each pair has identical digits, you can abbreviate to three characters #RGB:

Common Hex Colors

Example

<!-- Six-digit hex -->
<div style="background-color: #FF5733;">#FF5733 (orange)</div>
<div style="background-color: #33A1FF;">#33A1FF (blue)</div>
<div style="background-color: #2ECC71;">#2ECC71 (green)</div>

<!-- Three-character shorthand (when each pair is same) -->
<div style="background-color: #F00;">#F00 equals #FF0000 (red)</div>
<div style="background-color: #0F0;">#0F0 equals #00FF00 (green)</div>
<div style="background-color: #00F;">#00F equals #0000FF (blue)</div>

RGB and RGBA

The rgb(red, green, blue) function uses decimal values from 0 to 255 to represent the red, green, and blue channels. Compared to hexadecimal, RGB is closer to human intuitive understanding of numbers. rgba() adds an Alpha transparency channel on top of RGB:

RGB Values and Color Mapping

Example

<div style="background-color: rgb(255, 99, 71);">
rgb(255, 99, 71) — Tomato
</div>
<div style="background-color: rgb(60, 179, 113);">
rgb(60, 179, 113) — Medium Sea Green
</div>

<!-- rgba adds transparency, last parameter 0~1 -->
<div style="background-color: rgba(255, 0, 0, 0.3);">
Semi-transparent red (30% opacity)
</div>
<div style="background-color: rgba(0, 0, 255, 0.6);">
Semi-transparent blue (60% opacity)
</div>

HSL

hsl(hue, saturation, lightness) is a color model that aligns better with human intuition. Hue is the color angle (0—360 degrees), Saturation is the intensity (percentage), and Lightness is the brightness (percentage). Similarly, hsla() supports transparency:

HSL Color Wheel

Saturation and Lightness Adjustment

Example

<!-- HSL color mixing examples -->
<div style="background-color: hsl(0, 100%, 50%);">
hsl(0, 100%, 50%) — Pure red
</div>
<div style="background-color: hsl(120, 100%, 50%);">
hsl(120, 100%, 50%) — Pure green
</div>
<div style="background-color: hsl(240, 100%, 50%);">
hsl(240, 100%, 50%) — Pure blue
</div>
<div style="background-color: hsl(200, 80%, 60%);">
hsl(200, 80%, 60%) — Soft blue
</div>

<!-- hsla adds transparency -->
<div style="background-color: hsla(0, 100%, 50%, 0.4);">
hsla(0, 100%, 50%, 0.4) — Semi-transparent red
</div>

❓ FAQ

📖 Summary

• Color names (e.g., red, blue): Simple and intuitive, but limited in precision
• Hexadecimal (e.g., #FF5733): The most common precise notation in web development
• RGB / RGBA: rgb() uses 0—255 for three channels, rgba() adds transparency
• HSL / HSLA: hsl() uses hue/saturation/lightness to mix colors, hsla() adds transparency
• The Alpha channel (RGBA/HSLA) enables semi-transparency, with values from 0 (transparent) to 1 (opaque)

📝 Exercises

1. Color Palette: Create three color blocks using three different color representations (color name, hex, RGB). Each block should be 100×100px, displayed side by side.
2. Transparency Gradient: Use rgba() to create a horizontal gradient effect where the background transitions from fully opaque to fully transparent (hint: use background: linear-gradient()).