HEX vs RGB vs HSL: Which Color Code Should You Use and When?

Three notations, one color. Here's a plain-English explainer of HEX, RGB, and HSL — and when each one actually wins.

If you've ever stared at #FF6B6B, rgb(255, 107, 107), and hsl(0, 100%, 71%) and wondered why three completely different-looking codes describe the same color, you're not alone. They're three notations for the same RGB color space — but each shines in different situations.

Here's a plain-English breakdown of when to reach for each one.

HEX: The Default for Everything Web

HEX (short for hexadecimal) looks like #FF6B6B. The first two characters represent red, the next two green, the last two blue — each on a 0–255 scale, written in base 16.

Use HEX when:

Pasting colors into CSS, HTML, or design tools (Figma, Sketch, Adobe XD all accept HEX)
Sharing a single color value with a teammate ("the brand red is #DC2626")
Documenting a brand kit or style guide
Pulling colors from images — the ColorSense color picker defaults to HEX because it's the most universally compatible format

Avoid HEX when: you need transparency (HEX doesn't natively support alpha — though 8-character HEX like #FF6B6BCC exists, support is inconsistent in older tools), or when you're trying to programmatically lighten or darken a color (HEX is mathematically awkward to manipulate).

RGB: When You Need Transparency or Programmatic Control

RGB stands for Red, Green, Blue. Written as rgb(255, 107, 107) or with alpha as rgba(255, 107, 107, 0.5). Each channel is a number from 0 to 255.

Use RGB when:

You need partial transparency (the "a" in rgba is alpha — 0 is invisible, 1 is fully opaque)
You're writing CSS that animates or interpolates colors via JavaScript
You're working in print or video software (After Effects, Premiere, InDesign all default to RGB)
You're explaining color to someone non-technical — "255 red, 107 green, 107 blue" is more intuitive than "FF6B6B"

Avoid RGB when: you want to easily adjust lightness or saturation. Changing rgb(255, 107, 107) into a darker version requires re-calculating all three channels in tandem.

HSL: The Designer's Secret Weapon

HSL stands for Hue, Saturation, Lightness — written as hsl(0, 100%, 71%). Hue is the color itself (0–360 degrees on the color wheel — 0 is red, 120 is green, 240 is blue). Saturation is how vivid the color is (0% is grey, 100% is fully saturated). Lightness is how bright (0% is black, 50% is the "true" color, 100% is white).

Use HSL when:

You want to programmatically generate variants — a hover state that's 10% darker, a disabled state that's 50% less saturated, an accent that's 30 degrees around the color wheel
You're building a design system with consistent tints and shades
You want to communicate why a color works — "we wanted a calmer version, so we dropped saturation from 100% to 60%"
You're an experienced designer who thinks in color theory terms (analogous, complementary, triadic — these are all measured in degrees of hue)

Avoid HSL when: you're sharing colors with non-designers. Most clients don't intuit "hsl(217, 91%, 60%)" the way they grasp "blue."

Worked Example: Building a Hover State

Say your primary button color is #3B82F6 (a Tailwind blue). You want a hover state that feels slightly darker and a "pressed" state that's even darker. Here's how each notation handles it:

HEX: You'd guess and check — try #2563EB, view it, adjust. Tedious.
RGB: Subtract a fixed amount from each channel. rgb(59, 130, 246) → rgb(37, 99, 235). Works, but the math is unintuitive.
HSL: Just lower the lightness. hsl(217, 91%, 60%) → hsl(217, 91%, 50%) for hover, hsl(217, 91%, 40%) for pressed. Done in seconds, mathematically consistent, and you can apply the same lightness shifts across your entire palette for consistent hover states.

This is why design systems like Tailwind, Material, and the modern CSS color spec lean heavily on HSL (and its newer cousin, OKLCH) — it scales.

The Practical Workflow

Here's how most professional designers actually use the three together:

Extract colors from inspiration images using a picker tool that gives you HEX (because it's the most copy-pasteable format). The ColorSense picker does this in one click.
Document your brand kit in HEX (universal compatibility) plus RGB (for print and video workflows that need it).
Build your design system in HSL (for derived states like hover, focus, disabled, and dark mode variants).
Convert to RGBA only when you need transparency for overlays, glass effects, or layered UI.

You don't need to memorize the conversions. Every modern color picker shows all three notations side by side — open the ColorSense picker, click any pixel, and you'll see HEX, RGB, and the full breakdown together.

Try it now

Pick any color from any image — free, no signup

Drop in a photo, click anywhere to grab the exact HEX and RGB of that pixel, or extract a 5-color palette in one click. Runs entirely in your browser.

Open Color Picker →

Bonus: What About OKLCH and Display P3?

If you're reading the latest CSS specs, you'll see new color spaces — OKLCH, LCH, Display P3, Rec2020. These are designed to handle wider color gamuts (the rich reds and greens that modern phone screens can display but sRGB cannot). For mainstream brand work, sticking to HEX/RGB/HSL is still the right call in 2026 — the wider gamuts shine for video and HDR content but are still inconsistently supported across browsers and design tools for everyday UI work. Bookmark them for the next two years; they'll matter eventually.

The Short Version

HEX — your default for sharing, copying, documenting
RGB — when you need transparency or are working in print/video
HSL — when you're building a design system and need predictable variants

Pick the right one for the job and your color workflow becomes dramatically faster.