alltools.one
Design•
2025-07-07
•
7 min
•
alltools.one Team
ColorHEXRGBHSLCSSDesign

Color Formats Explained: HEX, RGB, HSL Conversion Guide

Every pixel on your screen is defined by numbers. But the same color can be expressed in multiple formats — HEX, RGB, HSL, HSB, and more. Understanding these formats and when to use each one makes you a more effective developer and designer.

The Color Models

RGB (Red, Green, Blue)

RGB is an additive color model based on how screens work. Each pixel is a combination of red, green, and blue light at varying intensities.

color: rgb(59, 130, 246);       /* Solid blue */
color: rgba(59, 130, 246, 0.5); /* 50% transparent blue */

Each channel ranges from 0 (none) to 255 (maximum intensity):

  • rgb(0, 0, 0) = Black (no light)
  • rgb(255, 255, 255) = White (all light)
  • rgb(255, 0, 0) = Pure red

When to use RGB: Programmatic color manipulation, canvas operations, image processing. RGB maps directly to hardware, making calculations straightforward.

HEX (Hexadecimal)

HEX is simply RGB written in hexadecimal notation. Each pair of characters represents one channel (00-FF):

color: #3B82F6;   /* Same blue as rgb(59, 130, 246) */
color: #3B82F680; /* With 50% alpha (8-digit hex) */

The conversion is direct: 3B = 59, 82 = 130, F6 = 246.

Shorthand: When each pair has identical digits, you can shorten: #AABBCC → #ABC

When to use HEX: CSS stylesheets (most common format), design handoffs, brand guidelines. HEX is compact and universally understood.

HSL (Hue, Saturation, Lightness)

HSL represents colors as humans perceive them. Instead of mixing light channels, you describe the color by its properties:

  • Hue: The color angle on the color wheel (0-360°). 0° = red, 120° = green, 240° = blue
  • Saturation: How vivid the color is (0% = gray, 100% = full color)
  • Lightness: How bright the color is (0% = black, 50% = pure color, 100% = white)
color: hsl(217, 91%, 60%);       /* Same blue */
color: hsla(217, 91%, 60%, 0.5); /* With alpha */

When to use HSL: Creating color palettes, adjusting colors programmatically (e.g., creating hover states by adjusting lightness), accessible color design. HSL is the most intuitive format for human reasoning about color.

HSB/HSV (Hue, Saturation, Brightness/Value)

HSB is similar to HSL but defines brightness differently. At maximum brightness, you get the pure color; at minimum, you get black. This model is used by design tools like Figma, Sketch, and Photoshop.

Key difference from HSL: In HSL, lightness 50% gives the pure color. In HSB, brightness 100% gives the pure color. This makes HSB more intuitive for some tasks but less useful in CSS (which does not support HSB natively).

Conversion Between Formats

Converting between formats involves straightforward math. Here are the key relationships:

HEX to RGB

Split the hex string into pairs and convert each to decimal:

#3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246)

RGB to HSL

The algorithm normalizes RGB values to 0-1, finds the max and min channels, then calculates hue based on which channel is dominant, saturation from the range, and lightness from the average.

Rather than implementing these conversions manually, use our Color Converter to instantly translate between any format.

Practical Applications

Building Color Palettes with HSL

HSL excels at generating consistent palettes. Keep hue constant and vary saturation and lightness:

:root {
  --blue-100: hsl(217, 91%, 95%);  /* Lightest */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* Base */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* Darkest */
}

This approach guarantees perceptually consistent steps. Creating a full palette by hand? Our Color Palette Generator automates this process.

Hover and Focus States

With HSL, creating interactive states is trivial:

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 5% darker */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 10% darker */
}

Accessibility and Contrast

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. The lightness component in HSL gives you an intuitive way to ensure sufficient contrast:

  • Light backgrounds (lightness > 90%) pair well with dark text (lightness < 30%)
  • Dark backgrounds (lightness < 20%) pair well with light text (lightness > 80%)

Modern CSS Color Functions

CSS now supports powerful color manipulation functions:

/* Relative color syntax (CSS Color Level 4) */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - Perceptually uniform color space */
color: oklch(0.7 0.15 250);

The oklch format is gaining adoption because it is perceptually uniform — equal numerical changes produce equal perceived changes, unlike HSL where a 10% lightness change looks different at different hue values.

FAQ

Which color format should I use in CSS?

For most projects, use HEX for simple colors and HSL when you need to create variations or manipulate colors programmatically. HEX is the most compact and widely recognized format. HSL is more readable when building color systems. Modern CSS supports all formats interchangeably.

What is the difference between HSL and HSB?

HSL and HSB both use hue and saturation, but they define brightness differently. In HSL, lightness 0% is black, 50% is the pure color, and 100% is white. In HSB, brightness 0% is black and 100% is the pure color (no path to white through brightness alone). CSS supports HSL natively; HSB is primarily used in design tools like Figma and Photoshop.

Related Resources

Published on 2025-07-07
← Back to Blog
Color Formats Explained: HEX, RGB, HSL Conversion Guide | alltools.one