Aura Mixer

Color Formats Explained

HEX, RGB, HSL, OKLCH — when to use what

The same color can be represented in multiple formats. Each has its strengths and ideal use cases. Understanding these formats makes you more effective at working with color in code and design tools.

Same Color, Different Formats

Aura Blue
hex#3b82f6
rgbrgb(59, 130, 246)
hslhsl(217, 91%, 60%)
oklchoklch(63% 0.2 250)

Format Breakdown

HEX

#RRGGBB or #RGB
#3b82f6

Hexadecimal notation. The most common format in web design. Each pair represents Red, Green, Blue values from 00-FF.

✓ Pros

  • Universal browser support
  • Compact notation
  • Easy to copy/paste
  • Works everywhere

✗ Cons

  • Not human-readable
  • Hard to adjust by eye
  • No native alpha support (#RRGGBBAA less common)

When to Use

Default choice for CSS. Great for design handoffs and color documentation.

RGB / RGBA

rgb(R, G, B) or rgba(R, G, B, A)
rgb(59, 130, 246)

Red, Green, Blue values from 0-255. RGBA adds an alpha channel for transparency (0-1).

✓ Pros

  • Alpha channel support
  • Matches how screens work
  • Easy programmatic manipulation

✗ Cons

  • Verbose syntax
  • Not intuitive for color picking
  • Hard to predict results

When to Use

When you need transparency (RGBA) or are programmatically generating colors.

HSL / HSLA

hsl(H, S%, L%) or hsla(H, S%, L%, A)
hsl(217, 91%, 60%)

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Maps to how humans perceive color.

✓ Pros

  • Intuitive color adjustment
  • Easy to create variations
  • Great for theming
  • Human-readable

✗ Cons

  • Perceptually uneven lightness
  • Less familiar to some developers

When to Use

Creating color scales, themes, or when you need to adjust colors programmatically.

OKLCH

oklch(L C H) or oklch(L C H / A)
oklch(63% 0.2 250)

Perceptually uniform color space. Lightness, Chroma, Hue. The future of CSS colors.

✓ Pros

  • Perceptually uniform
  • Better gradients
  • Wider gamut support
  • Consistent lightness

✗ Cons

  • Limited browser support (improving)
  • Unfamiliar syntax
  • Requires modern CSS

When to Use

Modern projects prioritizing perceptual accuracy. Great for design systems.

Deep Dive Articles

HEX, RGB, and HSL

The three most common color formats — and when to use each.

8 min read

Modern Color: OKLCH

The perceptually uniform color space that's changing web color.

7 min read

Quick Reference

  • HEX→ Default for CSS, design handoffs, documentation
  • RGBA→ When you need transparency
  • HSL→ Creating themes, color scales, adjusting colors
  • OKLCH→ Modern projects needing perceptual uniformity