HEX, RGB, HSL Color Systems Guide

Why Color Models Matter

Digital colors can be expressed in many ways, and each model has its own strengths depending on the use case. Understanding HEX, RGB, and HSL — the three color models most commonly used in web development — will make your code cleaner and your collaboration with designers more efficient.

HEX Colors

HEX represents RGB values as a hexadecimal string in the format #RRGGBB, where each pair denotes the intensity of red, green, and blue from 00 to FF (0 to 255). For example, #3b82f6 is R=59, G=130, B=246.

HEX is the most widely used format in design tools (Figma, Sketch, Adobe XD) and CSS. It supports a 3-digit shorthand (#fff = #ffffff) and an 8-digit form that includes alpha transparency (#3b82f680 = 50% opacity). The downside is that HEX values are hard to interpret intuitively at a glance.

RGB Colors

RGB represents the three primary light colors — Red, Green, Blue — each as an integer from 0–255 or a percentage. It supports an alpha channel via rgba(59, 130, 246, 0.5).

RGB shines in programmatic contexts: Canvas API, WebGL, image processing, and any scenario where you're manipulating pixel values numerically. It's less intuitive for manual color adjustments compared to HSL.

HSL Colors

HSL describes color using Hue (0–360° on the color wheel), Saturation (0% = grayscale, 100% = full color), and Lightness (0% = black, 100% = white). Example: hsl(217, 91%, 60%).

HSL's biggest advantage is its intuitiveness. Want to lighten a color by 20%? Just change the L value. Need five shades of the same hue? Adjust L in steps. This makes HSL the natural choice for theming, button states, and dark mode implementations.

:root {
  --brand-hue: 217;
  --brand-s: 91%;
}
.btn { background: hsl(var(--brand-hue), var(--brand-s), 60%); }
.btn:hover { background: hsl(var(--brand-hue), var(--brand-s), 55%); }
.btn:disabled { background: hsl(var(--brand-hue), 30%, 70%); }

WCAG Accessibility Contrast

The WCAG (Web Content Accessibility Guidelines) defines contrast ratio requirements between text and background colors. Contrast ratios range from 1:1 (identical colors) to 21:1 (black on white).

WCAG 2.1 AA level requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). AAA level requires 7:1 for normal text.

A practical rule: text colors used on white backgrounds generally need an HSL lightness (L) value of 50% or below to pass AA. If your brand color fails, use a darker shade for text and reserve the bright brand color for icons and decorative elements.

Dark Mode Implementation

Combining CSS custom properties with HSL makes dark mode clean and maintainable:

:root {
  --bg: hsl(0, 0%, 100%);
  --text: hsl(0, 0%, 10%);
  --accent: hsl(217, 91%, 60%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(0, 0%, 10%);
    --text: hsl(0, 0%, 95%);
    --accent: hsl(217, 91%, 70%); /* slightly brighter in dark mode */
  }
}

Simply inverting colors in dark mode often results in overly saturated values that are tiring to look at. The standard approach is to reduce saturation by 10–15% and increase lightness by 5–10% when switching to dark mode.

Choosing the Right Color Model

Use HEX when receiving colors from a design tool and applying them directly in CSS — it requires no additional manipulation. Use HSL for programmatic adjustments: button states, theme palettes, and dark mode. Use RGB for low-level work like Canvas API, WebGL, or image processing.

FAQ

Try the Tool

Use the Color Converter to instantly convert between HEX, RGB, and HSL, generate color harmony palettes, check WCAG contrast ratios, and find the nearest Tailwind CSS color class.