Color Formats•8 min read

HEX, RGB, and HSL

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

Same Color, Different Formats

HEX

#3b82f6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

HEX

#3b82f6

Six-digit hexadecimal code representing RGB values. Most common format.

✓ Advantages

• Universally supported
• Compact notation
• Easy to copy/paste
• Designer-friendly

⚠ Drawbacks

• Hard to adjust manually
• No built-in alpha
• Not intuitive

Best for: Brand colors, design handoffs, quick color specification

RGB / RGBA

rgb(59, 130, 246) / rgba(59, 130, 246, 0.5)

Red, Green, Blue values from 0-255. Alpha channel for transparency.

✓ Advantages

• Native transparency (RGBA)
• Mathematical color mixing
• JavaScript-friendly

⚠ Drawbacks

• Verbose syntax
• Hard to predict results
• Not intuitive to adjust

Best for: Programmatic color generation, transparency effects, JS manipulation

HSL / HSLA

hsl(217, 91%, 60%) / hsla(217, 91%, 60%, 0.5)

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Most intuitive.

✓ Advantages

• Intuitive adjustments
• Easy to create variations
• Built-in transparency

⚠ Drawbacks

• Less familiar to some
• Slightly longer syntax
• Conversion needed from HEX

Best for: Creating color scales, hover states, dynamic theming, CSS variables

Why HSL Is Often Best for Development

HSL (Hue, Saturation, Lightness) is the most intuitive format because it maps to how we actually think about colors:

Creating Variations

Need a lighter version? Just increase lightness. Need a muted version? Decrease saturation.

--primary: hsl(217, 91%, 60%);

--primary-light: hsl(217, 91%, 75%); /* +15% lightness */

--primary-dark: hsl(217, 91%, 45%); /* -15% lightness */

Dynamic Theming

With CSS variables, you can adjust hue, saturation, or lightness independently:

--hue: 217;

--saturation: 91%;

--lightness: 60%;

--primary: hsl(var(--hue), var(--saturation), var(--lightness));

Quick Reference

Use Case	Recommended Format
Design specs/handoff	HEX
CSS variables	HSL
JavaScript color manipulation	RGB
Transparency	RGBA or HSLA
Creating color scales	HSL
Brand guidelines	HEX + RGB

Export in Any Format

Aura Mixer palettes can be exported in HEX, RGB, HSL, and modern formats like OKLCH.

Generate Palette