Free Color Converter (HEX ↔ RGB ↔ HSL)

Paste any CSS color — #0ea5a6, rgb(34, 197, 94), hsl(220, 90%, 56%), with or without alpha — and see it converted to all three formats instantly, with a live swatch and a synced native color picker. Everything runs in your browser; nothing is uploaded.

About this Color Converter

CSS understands the same color written three common ways: hexadecimal (#0ea5a6), RGB function notation (rgb(14, 165, 166)), and HSL function notation (hsl(180, 84%, 35%)). Design tools export one format, your design system standardizes on another, and the CSS you inherited uses a third. This free Color Converter accepts any of them — including shorthand hex, alpha variants like #0ea5a680 and rgba()/hsla() — and shows the same color in all three formats side by side, with a live swatch so you can confirm it looks right.

Conversion is pure math done locally in your browser: no API call, no upload, no storage. You can also drag the native color picker to explore — it writes the chosen hex back into the input, and all three outputs update live.

How the three formats relate

• HEX is RGB in base 16: two hex digits per channel, red-green-blue, so #0ea5a6 means red 14, green 165, blue 166. An optional fourth pair encodes alpha. Compact and ubiquitous, but hard to reason about mentally.
• RGB spells out the same three channels as decimal numbers 0-255. It is the format closest to how screens actually mix light, and the easiest to manipulate in code.
• HSL re-expresses the color as hue (0-360 degrees around the color wheel), saturation (0-100%), and lightness (0-100%). It is the most human-friendly format: want a darker shade of the same color? Lower the lightness. A muted version? Lower the saturation. Related accent colors? Rotate the hue.

All three describe the same sRGB color, so conversion is lossless apart from rounding HSL components to whole numbers for readability.

When to use which format

• Use hex for tokens and handoff — it is the shortest form, universally supported, and what most design tools copy by default.
• Use rgb()/rgba() when alpha matters in older codebases — rgba(14, 165, 166, 0.5) reads more clearly than 8-digit hex to many reviewers.
• Use HSL when designing palettes — systematic shade scales (hover states, disabled states, dark-mode variants) are trivial to derive by adjusting lightness while holding hue and saturation constant.

Alpha channels, briefly

Alpha is opacity from 0 (transparent) to 1 (opaque). In hex it rides along as a fourth pair of digits, where 80 is about 50%. This converter preserves alpha through every format: paste rgba(34, 197, 94, 0.5) and the hex output gains an alpha pair while the HSL output becomes hsla(). The one limitation is the native picker, which browsers restrict to opaque 6-digit colors.

Practical tips

• Shorthand hex expands each digit: #0af is #00aaff, not #0a0f00.
• Grays are any color with 0% saturation in HSL — the hue value is irrelevant for them.
• When two colors will sit as text on background, check their contrast ratio — a pleasant palette can still fail WCAG AA. Our color contrast accessibility guide covers the thresholds.
• Validating user-supplied colors in code? See our regex for hex color validation before rolling your own.

FAQ: Color Converter