HEX vs RGB vs HSL: Color Formats Explained

CSS Color Formats Overview

CSS supports multiple color formats. Understanding each one helps you pick the right tool for the job.

HEX (#rrggbb)

color: #ff6b6b;   /* Full 6-digit */
color: #f6b;      /* Shorthand 3-digit */
color: #ff6b6b80; /* With alpha (8-digit) */

Best for: Copy-pasting from design tools, hardcoded brand colors.

RGB (rgb(r, g, b))

color: rgb(255, 107, 107);
color: rgba(255, 107, 107, 0.5); /* with alpha */
color: rgb(255 107 107 / 50%);   /* modern syntax */

Best for: When you need to manipulate individual channels in JavaScript.

HSL (hsl(h, s%, l%))

color: hsl(0, 100%, 71%);        /* red */
color: hsl(120, 60%, 50%);       /* green */
color: hsla(240, 100%, 50%, 0.3); /* blue with alpha */

Best for: Creating color themes, tints/shades, designer-friendly adjustments.

• H (Hue): 0-360° color wheel position
• S (Saturation): 0% = gray, 100% = full color
• L (Lightness): 0% = black, 50% = normal, 100% = white

HWB (modern)

color: hwb(0 20% 10%); /* Hue Whiteness Blackness */

OKLCH (modern, perceptual)

color: oklch(0.7 0.2 30);

Perceptually uniform - great for color palettes that look consistent to the human eye.

When to Use Each

Format	Best for
HEX	Brand colors, design handoff
RGB	JavaScript color manipulation
HSL	Theme systems, color variations
OKLCH	Modern design systems

Convert between all formats with our Color Converter.