HTML Colors

Color Names

HTML recognizes 140 standard color names like red, blue, green, white, black, etc. These are easy to remember and read but offer limited choices compared to other formats.

Color names are case-insensitive (Red, red, and RED all work). While convenient for quick styling and prototyping, they're limited in variety and don't allow fine-tuned color control.

For production work, hex codes or RGB values are preferred because they offer more precise color control and are more commonly used in design tools.

<!-- Using color names -->
<p style="color: red;">Red text</p>
<p style="color: blue;">Blue text</p>
<p style="background-color: lightgray;">Light gray background</p>
<p style="color: darkgreen;">Dark green text</p>

<!-- Common color names -->
<div style="background-color: black; color: white;">Black and white</div>
<div style="background-color: navy; color: white;">Navy blue</div>
<div style="background-color: gold;">Gold background</div>
<div style="background-color: tomato;">Tomato color</div>

Hexadecimal Colors

Hexadecimal (hex) color codes use the format #RRGGBB, where RR is red, GG is green, and BB is blue, each ranging from 00 to FF. For example, #FF0000 is pure red, #00FF00 is green, and #0000FF is blue.

Hex codes can be shortened to 3 digits when each pair is identical: #FF0000 becomes #F00, #00FF00 becomes #0F0. This shorthand is convenient for common colors.

Hex codes are the most common color format in web development. Design tools like Photoshop and Figma provide hex codes, and they're compact and easy to copy-paste.

<!-- 6-digit hex codes -->
<p style="color: #FF0000;">Pure red (#FF0000)</p>
<p style="color: #00FF00;">Pure green (#00FF00)</p>
<p style="color: #0000FF;">Pure blue (#0000FF)</p>
<p style="color: #FFFFFF;">White (#FFFFFF)</p>
<p style="color: #000000;">Black (#000000)</p>

<!-- 3-digit shorthand -->
<p style="color: #F00;">Red shorthand (#F00)</p>
<p style="color: #0F0;">Green shorthand (#0F0)</p>
<p style="color: #00F;">Blue shorthand (#00F)</p>

<!-- Common colors -->
<p style="background-color: #333333;">Dark gray</p>
<p style="background-color: #F0F0F0;">Light gray</p>
<p style="color: #2C3E50;">Blue-gray text</p>

RGB and RGBA Colors

RGB format uses rgb(red, green, blue) where each value ranges from 0 to 255. rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(0, 0, 255) is blue. RGB is intuitive and matches how colors work on screens.

RGBA adds an alpha channel for transparency: rgba(red, green, blue, alpha). The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). rgba(255, 0, 0, 0.5) is semi-transparent red.

RGB values are easier to manipulate programmatically than hex codes. You can easily adjust individual color channels or calculate color variations.

<!-- RGB colors -->
<p style="color: rgb(255, 0, 0);">Red RGB</p>
<p style="color: rgb(0, 255, 0);">Green RGB</p>
<p style="color: rgb(0, 0, 255);">Blue RGB</p>
<p style="color: rgb(128, 128, 128);">Gray RGB</p>

<!-- RGBA with transparency -->
<div style="background-color: rgba(255, 0, 0, 0.3);">30% opaque red</div>
<div style="background-color: rgba(0, 0, 255, 0.5);">50% opaque blue</div>
<div style="background-color: rgba(0, 0, 0, 0.8);">80% opaque black</div>

<!-- Overlapping transparent layers -->
<div style="background-color: white; padding: 20px;">
  <div style="background-color: rgba(255, 0, 0, 0.5); padding: 20px;">
    Red overlay
    <div style="background-color: rgba(0, 0, 255, 0.5); padding: 20px;">
      Blue overlay on red
    </div>
  </div>
</div>

HSL and HSLA Colors

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0-360): 0 is red, 120 is green, 240 is blue. Saturation is a percentage (0% is gray, 100% is full color). Lightness is a percentage (0% is black, 50% is normal, 100% is white).

HSLA adds an alpha channel for transparency, just like RGBA. The format is hsla(hue, saturation%, lightness%, alpha).

HSL is intuitive for creating color variations. You can easily create lighter/darker versions of a color by adjusting lightness, or create muted versions by adjusting saturation.

<!-- HSL colors -->
<p style="color: hsl(0, 100%, 50%);">Red (hue 0)</p>
<p style="color: hsl(120, 100%, 50%);">Green (hue 120)</p>
<p style="color: hsl(240, 100%, 50%);">Blue (hue 240)</p>

<!-- Creating variations of a color -->
<div style="background-color: hsl(210, 50%, 20%);">Dark blue</div>
<div style="background-color: hsl(210, 50%, 50%);">Normal blue</div>
<div style="background-color: hsl(210, 50%, 80%);">Light blue</div>

<!-- Saturation variations -->
<div style="background-color: hsl(0, 100%, 50%);">Full saturation red</div>
<div style="background-color: hsl(0, 50%, 50%);">Medium saturation</div>
<div style="background-color: hsl(0, 0%, 50%);">No saturation (gray)</div>

<!-- HSLA with transparency -->
<div style="background-color: hsla(120, 100%, 50%, 0.3);">Transparent green</div>

Color Accessibility

Ensure sufficient contrast between text and background colors. WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Poor contrast makes content difficult to read, especially for users with visual impairments.

Avoid relying solely on color to convey information. Use text labels, icons, or patterns in addition to color. About 8% of men and 0.5% of women have some form of color vision deficiency.

Test your color choices with accessibility tools. Browser DevTools and online contrast checkers can verify if your color combinations meet WCAG standards.

<!-- GOOD: High contrast -->
<div style="background-color: #000000; color: #FFFFFF; padding: 10px;">
  White text on black background (high contrast)
</div>

<div style="background-color: #FFFFFF; color: #000000; padding: 10px;">
  Black text on white background (high contrast)
</div>

<!-- BAD: Low contrast (avoid) -->
<div style="background-color: #CCCCCC; color: #DDDDDD; padding: 10px;">
  Low contrast - hard to read
</div>

<!-- GOOD: Not relying on color alone -->
<p>
  <span style="color: green;">✓ Success:</span> Operation completed
  <br>
  <span style="color: red;">✗ Error:</span> Operation failed
</p>
<!-- Icons and text provide information, not just color -->