HTML Colors
Color Formats in HTML
Colors in HTML can be specified in several formats. All of these can be used in the style attribute or in CSS.
1. Color Names
HTML supports 140+ named colors. Simple and readable, but limited.
<p style="color: red;">Red text</p>
<p style="color: blue;">Blue text</p>
<p style="color: green;">Green text</p>
<p style="background-color: yellow;">Yellow background</p>
<p style="color: tomato;">Tomato</p>
<p style="color: steelblue;">Steel Blue</p>
<p style="color: coral;">Coral</p>
2. Hexadecimal (Hex)
The most common format. #RRGGBB — each pair is a hex value (00–FF) for Red, Green, Blue.
<!-- Full hex: #RRGGBB -->
<p style="color: #ff0000;">Red</p>
<p style="color: #00ff00;">Green</p>
<p style="color: #0000ff;">Blue</p>
<p style="color: #ffffff; background:#333;">White on dark</p>
<p style="color: #000000;">Black</p>
<p style="color: #e74c3c;">Custom red</p>
<p style="color: #3498db;">Custom blue</p>
<!-- Shorthand hex: #RGB (when pairs are identical) -->
<p style="color: #f00;">Red (shorthand)</p>
<p style="color: #0f0;">Green (shorthand)</p>
<p style="color: #fff;">White (shorthand)</p>
3. RGB & RGBA
rgb(red, green, blue) — values 0–255. rgba adds an alpha (opacity) channel: 0 = transparent, 1 = fully opaque.
<!-- RGB -->
<p style="color: rgb(255, 0, 0);">Red</p>
<p style="color: rgb(0, 128, 0);">Green</p>
<p style="color: rgb(52, 152, 219);">Custom blue</p>
<!-- RGBA — with transparency -->
<p style="background-color: rgba(231, 76, 60, 1.0);">Fully opaque red</p>
<p style="background-color: rgba(231, 76, 60, 0.5);">50% transparent red</p>
<p style="background-color: rgba(231, 76, 60, 0.1);">10% transparent red</p>
<!-- Overlay effect -->
<div style="background: url('photo.jpg'); padding: 20px;">
<div style="background: rgba(0,0,0,0.5); color: white; padding: 10px;">
Dark overlay on image
</div>
</div>
4. HSL & HSLA
hsl(hue, saturation%, lightness%) — more intuitive for designers. Hue is 0–360 (color wheel), saturation and lightness are percentages.
<!-- HSL: hue(0-360), saturation(%), lightness(%) -->
<p style="color: hsl(0, 100%, 50%);">Red (hue=0)</p>
<p style="color: hsl(120, 100%, 35%);">Green (hue=120)</p>
<p style="color: hsl(240, 100%, 50%);">Blue (hue=240)</p>
<p style="color: hsl(39, 100%, 50%);">Orange (hue=39)</p>
<!-- Lightness variations of the same hue -->
<p style="background: hsl(210, 80%, 20%);">Dark blue</p>
<p style="background: hsl(210, 80%, 50%);">Medium blue</p>
<p style="background: hsl(210, 80%, 80%);">Light blue</p>
<!-- HSLA with transparency -->
<p style="background: hsla(210, 80%, 50%, 0.5);">50% transparent blue</p>
Color Formats Comparison
| Format | Example | Transparency | Best for |
|---|---|---|---|
| Named | red, tomato | No | Quick prototyping |
| Hex | #e74c3c | No (use #RRGGBBAA) | Most common — design tools output hex |
| RGB | rgb(231, 76, 60) | No | When you know exact RGB values |
| RGBA | rgba(231, 76, 60, 0.5) | Yes | Overlays, semi-transparent backgrounds |
| HSL | hsl(4, 76%, 57%) | No | Generating color variations programmatically |
| HSLA | hsla(4, 76%, 57%, 0.5) | Yes | Transparent color variations |
Common Color Properties
<!-- Text color -->
<p style="color: #2c3e50;">Dark text</p>
<!-- Background color -->
<div style="background-color: #ecf0f1; padding: 10px;">Light background</div>
<!-- Border color -->
<div style="border: 2px solid #3498db; padding: 10px;">Blue border</div>
<!-- Outline color -->
<input style="outline-color: #e74c3c;" type="text" placeholder="Red outline on focus">
<!-- currentColor — inherits the element's color value -->
<div style="color: #e74c3c; border: 2px solid currentColor;">
Border matches text color
</div>