hex ↔ rgb ↔ hsl converter
Convert between the three main CSS color formats. Edit any field — the others sync, and the swatch updates live.
How the three formats work
All three describe the same color in different terms. Each is just a different way to encode a point in the sRGB color space.
- Hex packs three channels (red, green, blue) into six hexadecimal digits.
#3b82f6is red 0x3b (59), green 0x82 (130), blue 0xf6 (246). - RGBwrites the same three channels as decimal numbers, 0–255:
rgb(59, 130, 246). - HSLuses hue (0–360), saturation (0–100%), and lightness (0–100%) — the same color expressed as
hsl(217, 91%, 60%).
Hex and RGB are exactly equivalent; HSL is a different coordinate system on the same space. Rounding when converting to HSL and back can shift a value by 1 in any channel.
Worked examples
Hex to RGB. Take #ef4444. Split into pairs: ef, 44, 44. Convert each from hex to decimal: ef = 239, 44 = 68, 44 = 68. The color is rgb(239, 68, 68).
RGB to HSL.Normalize each channel to 0–1 (divide by 255). Find the max and min, then lightness is their average. Saturation depends on lightness and the gap between max and min. Hue depends on which channel is dominant. The math is in every browser’s renderer — there’s no shortcut, but the converter above does it instantly.
Lightening a color.The practical reason to learn HSL: to make a color brand-consistent but lighter, take its HSL, bump the lightness by 10–15 percentage points, convert back. Doing the same in hex or RGB requires guessing.
CSS color reference
Eight common UI colors in all three formats.
| Color | Hex | RGB | HSL |
|---|---|---|---|
| Slate 700 | #334155 | rgb(51, 65, 85) | hsl(215, 25%, 27%) |
| Red 500 | #ef4444 | rgb(239, 68, 68) | hsl(0, 84%, 60%) |
| Orange 500 | #f97316 | rgb(249, 115, 22) | hsl(25, 95%, 53%) |
| Amber 400 | #fbbf24 | rgb(251, 191, 36) | hsl(43, 96%, 56%) |
| Emerald 500 | #10b981 | rgb(16, 185, 129) | hsl(160, 84%, 39%) |
| Sky 500 | #0ea5e9 | rgb(14, 165, 233) | hsl(199, 89%, 48%) |
| Indigo 500 | #6366f1 | rgb(99, 102, 241) | hsl(239, 84%, 67%) |
| Pink 500 | #ec4899 | rgb(236, 72, 153) | hsl(330, 81%, 60%) |
When to use which format
Use hexfor static color values copy-pasted from design tools. It’s compact, every tool supports it, and there’s no ambiguity. Most design tokens and theme files default to hex.
Use RGBwhen you need channel-level math — mixing with an alpha channel via rgba(), or pulling individual channels for canvas/WebGL work. RGB also composes nicely with CSS variables when you want to vary opacity: rgb(var(--brand-rgb) / 0.5).
Use HSLwhen you need to reason about color perceptually — making a hover state lighter, generating a palette by rotating hue, building a shade ramp by stepping lightness. HSL is the format to author in, even if you ship hex.
Accessibility
Color format doesn’t affect accessibility — the underlying color does. WCAG contrast ratios apply equally whether you write a color in hex, RGB, or HSL. The minimum ratio for normal-size body text against its background is 4.5:1; for large text or UI components, 3:1.
The reason HSL helps with accessibility work: lightness is roughly perceptual, so adjusting it predictably raises or lowers contrast. Tweaking individual RGB channels gives less reliable results. Pair this converter with a contrast checker before shipping any new color pairing.
Common mistakes
- 1. Treating HSL as the source of truth then losing precision. HSL rounds aggressively. If you convert hex → HSL → hex, you may shift a channel by 1. Keep hex or RGB as the authoritative value; use HSL for derivation only.
- 2. Mixing three-digit and six-digit hex.
#abcexpands to#aabbcc, not#0a0b0c. Each digit duplicates. - 3. Forgetting the percent sign in HSL. Saturation and lightness must include
%. Hue does not. - 4. Using RGB for math when you mean HSL. “Make this 10% darker” only makes sense in HSL. Doing it in RGB by subtracting from each channel produces dingier, less-saturated colors, not a true shade.
FAQ
Is hex the same as RGB?
Mathematically yes — both encode the same three channels in the sRGB space. Hex is just RGB written in base 16. There is no information difference between #3b82f6 and rgb(59, 130, 246).
Can I include opacity?
Yes — use rgba(), hsla(), or 8-digit hex (#rrggbbaa). All modern browsers support all three. This converter handles the opaque RGB/HSL forms; for transparency, append the alpha value yourself.
Why does the same hex look different on different screens?
Because the screen, not the color value, varies. sRGB is the shared assumption, but individual monitors render it differently based on calibration, panel type, and ambient light. For brand-critical work, design against a calibrated reference and document the canonical hex.
What about modern CSS colors like oklch?
Newer color models (oklab, oklch, color-mix) are more perceptually uniform than HSL and worth learning. For most day-to-day CSS work, hex, RGB, and HSL remain the everyday tools — and tooling support is universal. This converter stays in the three classic formats.
Why does my HSL hue look different from a color picker?
Different tools handle rounding and color-space assumptions slightly differently. Hue is in degrees on a 360-degree wheel, and small differences in the underlying RGB will produce slightly different hue values. Within 1–2 degrees of any reputable tool is normal.