Color Converter
Convert a color between HEX, RGB, and HSL — with a live swatch preview.
Live preview of the current color, shown in all three formats below.
The same color can be written three ways. #0055FF in HEX is rgb(0, 85, 255) in RGB and hsl(220, 100%, 50%) in HSL. HEX packs the red, green, and blue channels as base-16 pairs; RGB lists those same channels as numbers from 0 to 255; HSL describes the color by hue, saturation, and lightness instead.
Three ways to name one color
On screen every color is mixed from red, green, and blue light. HEX and RGB are just two notations for the same three channel values — HEX writes each channel as a two-digit base-16 number, RGB writes it as a decimal from 0 to 255. HSL takes a different angle: instead of mixing channels it names the color by its hue (which color), saturation (how vivid), and lightness (how bright). Designers often reach for HSL because nudging one number — say lightness — gives a predictable result.
What each format means
All three describe the same on-screen color; they differ only in notation.
| Format | Looks like | What it means |
|---|---|---|
| HEX | #0055FF | Red, green, and blue written as base-16 pairs (00–FF = 0–255 each). |
| RGB | rgb(0, 85, 255) | The same three channels as decimals from 0 to 255. |
| HSL | hsl(220, 100%, 50%) | Hue 0–360° on the color wheel, saturation 0–100%, lightness 0–100%. |
- 1 Drop the hash. Take #0055FF and remove the leading # to get 0055FF.
- 2 Split into three pairs. Read it two digits at a time: 00, 55, and FF — one pair each for red, green, and blue.
- 3 Convert each pair from base 16. 00₁₆ = 0, 55₁₆ = 5×16 + 5 = 85, and FF₁₆ = 15×16 + 15 = 255.
- 4 Write the RGB triple. Combine the channels: rgb(0, 85, 255). To go back, convert each channel to a two-digit hex pair.
When to use each
Reach for HEX when you just need a compact code to paste into CSS, a design tool, or a style guide — it’s the most common shorthand. Use RGB when you’re mixing channels by number or working with image data. Pick HSL when you want to tweak a color by feel: shift the hue to find a complementary color, drop the saturation for a muted tone, or raise the lightness for a tint.
Alpha and opacity. All three formats have an alpha variant for transparency — an eight-digit hex (#0055FFCC), rgba(0, 85, 255, 0.8), or hsla(220, 100%, 50%, 0.8). This converter works with the opaque color only; the alpha channel is independent and isn’t changed by converting between formats.