HTML Colors

Standard Color Names

Browsers recognize 140 official color names natively. This allows you to apply simple color styles like blue, red, or darkslategray directly in your style declarations without needing to look up complex coordinate codes.

Example: Standard Color Names

<p style="color: darkslategray;">Named color text</p>

Hexadecimal Colors (HEX)

Hexadecimal values are the industry standard for web design. They represent color coordinates using a six-digit code preceded by a hash symbol (#RRGGBB).

The letters and numbers represent values from 00 to FF, representing the intensity of red, green, and blue respectively.

Example: Hexadecimal Colors (HEX)

<p style="color: #FF0000;">Full hex code</p>
<p style="color: #F00;">Shorthand hex code</p>

RGB and RGBA Colors

RGB values define color blends using the intensity of Red, Green, and Blue on a scale from 0 to 255. By upgrading to RGBA, you gain access to an Alpha channel that controls transparency from 0.0 (completely invisible) to 1.0 (fully opaque).

Example: RGB and RGBA Colors

<p style="color: rgb(255,0,0);">RGB red</p>
<p style="color: rgba(255,0,0,0.5);">Semi-transparent RGBA red</p>

HSL and HSLA Colors

HSL stands for Hue, Saturation, and Lightness. Hue represents the base color on a 360-degree color wheel, Saturation is the intensity of gray from 0% to 100%, and Lightness represents black or white saturation.

Adding the Alpha channel (HSLA) introduces adjustable opacity.

Example: HSL and HSLA Colors

<p style="color: hsl(0, 100%, 50%);">HSL red</p>
<p style="color: hsla(0, 100%, 50%, 0.5);">Semi-transparent HSLA red</p>

Color Contrast and Web Accessibility

Designing websites is not just about choosing your favorite aesthetics. Web Content Accessibility Guidelines (WCAG) require that your text colors have sufficient contrast against the background fill.

This ensures that users with visual impairments or people reading screens under bright sunlight can read your content.

Example: Color Contrast and Web Accessibility

<p style="color: #000000; background-color: #FFFFFF;">
  High contrast text for accessibility
</p>

CSS Custom Properties for Colors

CSS custom properties, also called CSS variables, let you define a color once with a name like --primary-color and reuse it everywhere in your stylesheet.

If the brand color ever changes, you update it in one single place instead of hunting through every rule.

Example: CSS Custom Properties for Colors

<style>
  :root {
    --primary-color: #0000ff;
  }
  p {
    color: var(--primary-color);
  }
</style>
<p>Styled with a custom property</p>