Free · live preview · no signup
Color Converter
Type a color in any format — HEX, RGB channels, or HSL — and the other two update instantly with a live swatch. The three formats CSS actually speaks, converted exactly.
Short answer
HEX and RGB are the same numbers in different bases — #ff8000 is rgb(255, 128, 0), two hex digits per channel. HSL re-expresses themas hue (0–360°), saturation and lightness, which is the format to use when you want "the same color, lighter". Edit any field below; the others and the swatch follow instantly.
Preview
- HEX
- #ff8000
- RGB
- rgb(255, 128, 0)
- HSL
- hsl(30, 100%, 50%)
All three are valid CSS — same color, different notation.
Format converters and common colors
Common colors in HEX, RGB and HSL
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime | #00ff00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000ff | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Yellow | #ffff00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Cyan | #00ffff | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Magenta | #ff00ff | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Orange | #ffa500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Pink | #ffc0cb | rgb(255, 192, 203) | hsl(350, 100%, 88%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| White | #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
All values computed with the same conversions the tool uses.
Which format should you use?
They render identically, so the choice is about who's reading. HEX travels best — short, unambiguous, pasteable anywhere. RGB is what code manipulates, channel by channel. HSL is what humans reason in: a palette of tints is one lightness axis in HSL and an error-prone tangle in RGB — our per-color pages demonstrate exactly that with computed shade tables. Everything here runs in your browser; nothing you type is sent anywhere.
How we calculate this
Three notations, two genuinely different models:
- HEX ↔ RGB. pure notation: each RGB channel (0–255) is two hexadecimal digits, #RRGGBB. Lossless in both directions — no color changes.
- RGB ↔ HSL. a real remapping: hue is the angle around the color wheel (0–360°), saturation the distance from gray, lightness the distance from black/white — the standard CSS algorithm, rounded to whole units for display.
- Which to use. HEX for compactness, RGB when code manipulates channels, HSL when humans reason about color — 'same hue, lighter' is one HSL number but three coupled RGB ones.
Assumptions
- All values are sRGB, the web's default color space — wide-gamut spaces (Display-P3) are out of scope.
- HSL round-trips can drift by ±1 per channel from display rounding; the underlying math is exact.
- Alpha (transparency) is orthogonal to these conversions — append it as the fourth value in any of the three notations.
Last reviewed: July 29, 2026
Frequently asked questions
How do I convert HEX to RGB?+
Split the six digits into three pairs and read each pair as a base-16 number: #ff8000 → ff|80|00 → rgb(255, 128, 0). Three-digit shorthand doubles each digit first (#f80 = #ff8800). It's pure notation — the color itself doesn't change, which is why the conversion is exact in both directions.
What is HSL and when should I use it?+
Hue (0–360° around the color wheel), Saturation (0% gray to 100% vivid), Lightness (0% black to 100% white). Use it whenever you're thinking like a human: making a color 'lighter', building tints and shades of a brand color, or generating palettes — each of those is a single HSL number, versus three coupled channels in RGB. CSS supports hsl() everywhere.
Are HEX, RGB and HSL the same color?+
Yes — all three describe points in the same sRGB space, so #ff8000, rgb(255, 128, 0) and hsl(30, 100%, 50%) render identically in CSS. HEX/RGB are literally the same numbers in different bases; HSL is a geometric remapping of them. The only caveat is rounding: whole-number HSL can be off by about one RGB step when converted back.
How do I make a color lighter or darker correctly?+
Convert to HSL, change only the lightness, convert back. Adding white/black in RGB (or worse, scaling channels) drifts the hue — orange fades toward brown. Our per-color pages show this: each shade table holds hue and saturation fixed and steps lightness, keeping every variant recognizably the same color.
What about CMYK?+
CMYK is for ink, not screens: it's a subtractive model whose real output depends on printer, paper, and profile, so any formula-based CMYK value is an approximation. For web work you never need it; for print, do the conversion inside your design tool with the actual output profile rather than a generic formula.
Does this tool upload my colors or track what I pick?+
No — the conversions are a few lines of math running entirely in your browser. Nothing you type or pick is transmitted anywhere. That's also why it works offline once the page has loaded.
Pure sRGB math in your browser — nothing is transmitted.