Skip to content
Color Formats Guide: HEX vs RGB vs HSL vs OKLCH

Color Formats Guide: HEX vs RGB vs HSL vs OKLCH

4 min read

Why Color Formats Matter

CSS supports multiple color formats, and choosing the right one affects your workflow, design consistency, and browser compatibility. HEX and RGB have been the defaults for decades, HSL made colors more intuitive to work with, and OKLCH is the modern format that solves problems the others cannot.

This color formats guide explains how each one works, when to use it, and how they compare for real-world web development.

HEX Colors

How They Work

HEX colors represent RGB values using hexadecimal notation. Each pair of characters represents a color channel (red, green, blue), with values from 00 (0) to FF (255).

color: #FF5733;    /* Red: FF, Green: 57, Blue: 33 */
color: #333;       /* Shorthand for #333333 */
color: #FF573380;  /* With 50% alpha (80 in hex = 128/255) */

Pros

  • Compact: Six characters represent a full color
  • Universal: Supported everywhere — CSS, design tools, image editors, brand guidelines
  • Copy-paste friendly: Easy to share in chat, docs, or code reviews
  • Shorthand available: Three-character shorthand for simple colors (#FFF, #000, #333)

Cons

  • Not human-readable: Looking at #7B2D8E, can you tell it is purple? Most people cannot
  • Hard to adjust: Making a color lighter, darker, or more saturated requires changing multiple channels
  • Alpha is awkward: The 8-digit hex format for transparency is unintuitive

When to Use HEX

Use HEX when you are copying colors from design specs, brand guidelines, or tools like Figma and Sketch. It is the lingua franca of color communication. Use the Color Converter to quickly convert HEX values to other formats.

RGB / RGBA Colors

How They Work

RGB defines colors using three decimal values (0-255) for red, green, and blue channels. RGBA adds an alpha channel for transparency (0 to 1).

color: rgb(255, 87, 51);         /* Same as #FF5733 */
color: rgba(255, 87, 51, 0.5);   /* 50% transparent */

/* Modern syntax (no commas, slash for alpha) */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

Pros

  • More readable than HEX: Decimal values are easier to reason about than hexadecimal
  • Clean alpha support: The alpha channel is a simple 0-1 value
  • Direct mapping to display: Monitors display pixels using RGB, so these values map directly to hardware

Cons

  • Still not intuitive: How do you make rgb(123, 45, 142) 20% lighter? You would need to increase all three channels proportionally, which is not straightforward.
  • Perceptually uneven: Equal mathematical steps in RGB do not produce equal visual steps. Going from rgb(0,0,0) to rgb(50,50,50) looks like a bigger change than going from rgb(200,200,200) to rgb(250,250,250).

When to Use RGB

Use RGB when you need alpha transparency and are working with older CSS codebases, or when doing programmatic color manipulation in JavaScript where channel math is straightforward.

HSL / HSLA Colors

How They Work

HSL defines colors using hue (0-360 degrees on the color wheel), saturation (0-100%), and lightness (0-100%). This maps to how humans naturally think about color.

color: hsl(14, 100%, 60%);         /* Same orange as #FF5733 */
color: hsla(14, 100%, 60%, 0.5);   /* 50% transparent */

/* Modern syntax */
color: hsl(14 100% 60%);
color: hsl(14 100% 60% / 0.5);

Pros

  • Intuitive adjustments: Want a lighter version? Increase lightness. Want a muted version? Decrease saturation. Want a different hue? Change the first number.
  • Easy to create color palettes: Generate tints and shades by varying lightness while keeping hue and saturation constant
  • Readable: hsl(14, 100%, 60%) tells you it is a warm color (hue 14), fully saturated, at medium lightness

Cons

  • Perceptually non-uniform: HSL’s “lightness” does not match perceived brightness. hsl(60, 100%, 50%) (yellow) looks much brighter than hsl(240, 100%, 50%) (blue) even though both have 50% lightness.
  • Saturation behaves oddly at extremes: At very high or very low lightness, changing saturation has little visible effect.
  • Design tools lag behind: Most design tools still default to HEX or RGB, making HSL a manual conversion step.

When to Use HSL

Use HSL when you are building CSS custom properties for theming, creating color scales programmatically, or when you want to adjust colors directly in code without a color picker. It is excellent for design systems where you derive variants from base colors.

OKLCH — The Modern Standard

How It Works

OKLCH is a perceptually uniform color space that defines colors using lightness (0-1 or 0-100%), chroma (0 to roughly 0.4), and hue (0-360 degrees). It is based on the Oklab color model designed to match human perception.

color: oklch(65% 0.25 30);           /* A warm orange */
color: oklch(65% 0.25 30 / 0.5);     /* 50% transparent */

Pros

  • Perceptually uniform: Equal mathematical changes produce equal visual changes. A 10% lightness increase looks the same across all hues and chromas.
  • Consistent lightness across hues: Unlike HSL, two OKLCH colors with the same lightness value actually look equally bright to the human eye.
  • Wide gamut support: OKLCH can represent colors in the P3 and Rec. 2020 gamuts that go beyond what sRGB (and therefore HEX/RGB) can display. Modern displays support these wider colors.
  • Better gradients: Gradients through OKLCH avoid the muddy middle tones that RGB and HSL gradients produce.
  • Intuitive adjustments: Like HSL, you can independently adjust lightness, vividness (chroma), and hue.

Cons

  • Newer syntax: Requires modern browsers (all major browsers support it as of 2024, but very old browsers do not)
  • Unfamiliar values: Chroma values like 0.25 are less intuitive than HSL’s percentage-based saturation at first
  • Fewer tools: Color pickers and design tools are still catching up with OKLCH support
  • No HEX equivalent: You cannot represent OKLCH colors as a simple hex string

When to Use OKLCH

Use OKLCH for CSS custom properties in modern projects, design system color scales, accessible color palettes (where perceptual uniformity helps meet contrast requirements), and any project targeting modern browsers. It is becoming the recommended format for new CSS projects.

:root {
  --brand-hue: 250;
  --brand-base: oklch(55% 0.25 var(--brand-hue));
  --brand-light: oklch(75% 0.15 var(--brand-hue));
  --brand-dark: oklch(35% 0.20 var(--brand-hue));
}

This creates a consistent color scale where each variant is predictably lighter or darker.

Comparison Table

FeatureHEXRGBHSLOKLCH
Human readableLowMediumHighHigh
Perceptually uniformNoNoNoYes
Easy to adjustNoNoYesYes
Wide gamut supportNoNoNoYes
Browser supportAllAllAllModern
Alpha supportLimitedYesYesYes
Common in design toolsYesYesSomeGrowing

Converting Between Formats

Converting colors between formats is a daily task. The Color Converter handles all conversions — paste any color value and get the equivalent in every supported format instantly.

For programmatic conversions in CSS, modern browsers can handle this natively:

/* The browser converts automatically */
.card {
  background: #FF5733;
  border-color: hsl(14, 100%, 60%);
  color: oklch(40% 0.05 250);
}

All formats can coexist in the same stylesheet. The browser handles the math internally.

Conclusion

Use HEX for communicating colors in specs and docs. Use RGB when you need basic alpha transparency in legacy codebases. Use HSL for intuitive color adjustments and simple theming. Use OKLCH for modern projects where perceptual uniformity, wide gamut, and accessible color design matter.

For instant conversions between all formats, use the Color Converter. Paste any color value, see it in every format, and copy the one you need.