What's the difference between HEX and RGB?

Nothing but notation: #FF5733 and rgb(255, 87, 51) describe the exact same color. HEX writes each 0–255 channel as two hexadecimal digits. Use whichever your team finds more readable.

When should I use HSL?

Whenever you adjust colors by feel: building palettes, hover states, tints and shades. Changing one number (lightness) to darken a color beats recomputing three RGB channels. For final handoff values, any format works.

Is HSL better than HEX?

Better for thinking, identical for rendering. HSL maps to how humans perceive color (what hue? how vivid? how bright?), while HEX/RGB map to how screens produce it. Designers reason in HSL; machines don't care.

What does hue 0–360 mean?

A position on the color wheel in degrees: 0° = red, 120° = green, 240° = blue, 360° = red again. Rotating the hue by fixed steps (e.g. +30°) generates harmonious palettes — complementary colors sit 180° apart.

How do I make a color lighter in CSS?

In HSL, raise the lightness value: hsl(210, 70%, 50%) → hsl(210, 70%, 65%). In modern CSS you can also use relative colors: rgb(from #3498db r g calc(b + 40)). Either way, adjust one dimension instead of guessing three.

What's the difference between HSL and HSV?

Both separate hue from "colorfulness", but differently: HSL's third axis is lightness (0% = black, 100% = white, 50% = pure hue), HSV's is value/brightness. HSL is the one built into CSS; HSV shows up in design tools' pickers.

Do browsers support all formats?

Yes — hex (3, 4, 6, and 8 digit), rgb()/rgba(), and hsl()/hsla() are universally supported, including the modern space-separated syntax (rgb(255 87 51 / 50%)). Very old browsers needed fallbacks; that era is over.

HEX vs RGB vs HSL: Color Formats Explained

September 26, 2026 · Design

#FF5733, rgb(255, 87, 51), hsl(11, 100%, 60%) — three ways to write the same orange. CSS gives you multiple color formats, and most tutorials describe each in isolation. The one insight that organizes everything: HEX and RGB are the same data in two notations; HSL is a genuinely different way to think about color. Here's what each is for.

The one insight

Screens make color by mixing red, green, and blue light. RGB says how much of each (0–255 per channel); HEX says the same thing in hexadecimal (#FF5733 = 255 red, 87 green, 51 blue). Converting between them is pure notation — no information changes. HSL, by contrast, remaps the color into human terms: hue (which color?), saturation (how vivid?), lightness (how bright?). Same color, perceptual coordinates. That's why HSL is the format you think in, even if you ship HEX.

HEX explained

#RRGGBB: three pairs of hex digits, one pair per channel. #FF5733 → red FF (255), green 57 (87), blue 33 (51). Shorthand: #F73 expands by doubling each digit → #FF7733 (note: not #F77333 — a common misread). An 8-digit form adds alpha: #FF573380 is the same orange at ~50% opacity. HEX is compact, copy-paste friendly, and the lingua franca of design handoffs — which is why it's everywhere despite being unreadable to humans.

RGB explained

rgb(255, 87, 51): three decimal channels, 0–255 each. It's the most literal description of what the screen does — full red, some green, a little blue. The modern space-separated syntax rgb(255 87 51 / 50%) folds alpha in without a separate rgba() function. RGB shines where code does math on channels (canvas, WebGL, image processing) and reads naturally to programmers. For humans picking colors, though, "increase the green channel by 40" is meaningless — which is HSL's cue.

HSL explained

hsl(11, 100%, 60%):

Hue 0–360° — position on the color wheel (0° red, 120° green, 240° blue).
Saturation 0–100% — 0% is gray, 100% is the most vivid version of the hue.
Lightness 0–100% — 0% is black, 100% is white, 50% is the "pure" hue.

The workflow advantage is concrete: need a darker hover state for hsl(210, 70%, 50%)? Drop lightness to 40% — done, hue and vividness preserved. In RGB you'd recompute three channels and probably shift the hue by accident. Palette math gets easy too: rotate hue by 180° for complements, by 120° steps for triads, keep saturation/lightness fixed for a coherent family.

Side-by-side: one color, three formats

Format	Value	Reads as
HEX	`#3498DB`	Compact; opaque to humans
RGB	`rgb(52, 152, 219)`	Screen channels; code-friendly
HSL	`hsl(204, 70%, 53%)`	Human reasoning; tweakable

Same blue. The table also demonstrates the alpha story: #3498DB80 = rgb(52 152 219 / 50%) = hsl(204 70% 53% / 50%) — every format has an alpha variant, so "but I need transparency" never decides the format.

Convert instantly: paste any color into our free Color Converter for HEX, RGB, HSL, and CMYK side by side — plus a WCAG contrast check.

When to use which

HEX — design handoffs, config files, anywhere compact copy-paste wins. The default for static values.
RGB — JavaScript color math, canvas/WebGL, when code manipulates channels.
HSL — design systems, palettes, hover/focus states, theming (dark mode = same hues, lower lightness). If a color will ever be adjusted, author it in HSL.

A common pro pattern: define design tokens in HSL (tweakable), then let the build output whatever the codebase prefers. The authoring format serves humans; the shipped format serves machines.

Common mistakes

3-digit shorthand misread: #1A2 = #11AA22 (digit-doubling), and it can only express "web-safe-ish" colors — most brand colors need all six digits.
Forgetting the #: color: FF5733 is invalid CSS; the hash is part of the syntax, not decoration.
Alpha range confusion: hex alpha is 00–FF, but opacity and slash-alpha are 0–1 (or 0–100%). #FF573380 ≈ 50%, not 80%.
Pure black text: #000 on white is harsh and can cause halation for some readers; very dark gray (#1a1a1a) usually reads better. Check contrast ratios (4.5:1 minimum for body text) rather than eyeballing.

Frequently asked questions

What's the difference between HEX and RGB?: Nothing but notation: #FF5733 and rgb(255, 87, 51) describe the exact same color. HEX writes each 0–255 channel as two hexadecimal digits. Use whichever your team finds more readable.
When should I use HSL?: Whenever you adjust colors by feel: building palettes, hover states, tints and shades. Changing one number (lightness) to darken a color beats recomputing three RGB channels. For final handoff values, any format works.
Is HSL better than HEX?: Better for thinking, identical for rendering. HSL maps to how humans perceive color (what hue? how vivid? how bright?), while HEX/RGB map to how screens produce it. Designers reason in HSL; machines don't care.
What does hue 0–360 mean?: A position on the color wheel in degrees: 0° = red, 120° = green, 240° = blue, 360° = red again. Rotating the hue by fixed steps (e.g. +30°) generates harmonious palettes — complementary colors sit 180° apart.
How do I make a color lighter in CSS?: In HSL, raise the lightness value: hsl(210, 70%, 50%) → hsl(210, 70%, 65%). In modern CSS you can also use relative colors: rgb(from #3498db r g calc(b + 40)). Either way, adjust one dimension instead of guessing three.
What's the difference between HSL and HSV?: Both separate hue from "colorfulness", but differently: HSL's third axis is lightness (0% = black, 100% = white, 50% = pure hue), HSV's is value/brightness. HSL is the one built into CSS; HSV shows up in design tools' pickers.
Do browsers support all formats?: Yes — hex (3, 4, 6, and 8 digit), rgb()/rgba(), and hsl()/hsla() are universally supported, including the modern space-separated syntax (rgb(255 87 51 / 50%)). Very old browsers needed fallbacks; that era is over.