English العربية Português Japanese

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:

HTML 
<!-- 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>
▶ Try It Yourself

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:

HTML 
<div style="color: white; background-color: blue;">
  White text on a blue background
</div>
<div style="color: yellow; background-color: green;">
  Yellow text on a green background
</div>
<div style="color: white; background-color: purple;">
  White text on a purple background
</div>
<div style="background-color: orange; padding: 10px;">
  Orange block
</div>
▶ Try It Yourself
📌 Tip: Color names are simple and intuitive, great for quick prototyping and teaching. However, in production environments, color names have a limited selection and lack precision — hexadecimal or RGB notation is recommended instead.

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:

HTML 
<!-- 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:

HTML 
<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:

HTML 
<!-- 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>
💡 Designer's Choice: HSL is more designer-friendly. Simply adjust the hue to cycle through different colors, tweak saturation to control vibrancy, and modify lightness to control brightness — three dimensions are all you need to easily generate a complete color scheme.

📖 Summary

📝 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()).
← Previous: HTML Forms Next: HTML Input Types →
100%