Hexadecimal Colors

Hexadecimal (hex) color codes are the most widely used color format in web design. They start with a # followed by six hexadecimal digits representing the red, green, and blue channels: #RRGGBB. Each channel ranges from 00 (none) to FF (full intensity).

Shorthand Hex and Hex with Alpha

When both digits of each channel are identical you can use the 3-digit shorthand: #RGB. For example, #ff6600 shortens to #f60. CSS also supports an 8-digit hex format (#RRGGBBAA) and a 4-digit shorthand (#RGBA) for transparency, where AA is the alpha channel (00 = fully transparent, FF = fully opaque).

#FF0000 — Pure red
#00FF00 — Pure green
#0000FF — Pure blue
#FFFFFF — White
#000000 — Black
#FF000080 — Semi-transparent red

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hex Colors</title>
  <style>
    .grid { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      width: 100px; height: 60px;
      border-radius: 4px;
      display: flex; align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-family: monospace;
    }
  </style>
</head>
<body>
  <h1>Hex Color Examples</h1>
  <div class="grid">
    <div class="chip" style="background:#e74c3c;color:white">#e74c3c</div>
    <div class="chip" style="background:#3498db;color:white">#3498db</div>
    <div class="chip" style="background:#2ecc71;color:white">#2ecc71</div>
    <div class="chip" style="background:#f39c12">#f39c12</div>
    <div class="chip" style="background:#9b59b6;color:white">#9b59b6</div>
    <!-- Shorthand -->
    <div class="chip" style="background:#f60;color:white">#f60</div>
    <!-- With alpha -->
    <div class="chip" style="background:#3498db80;border:1px solid #3498db">#3498db80</div>
  </div>
</body>
</html>

HTML

Full Editor

Pro Tip

Most design tools (Figma, Adobe XD) export colors as hex codes — copy them directly into your CSS. If you need to adjust lightness or saturation programmatically, convert to HSL first, which maps far more naturally to human color perception.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned