About this tool
Paste a color in any common format — #4C4DDC, rgb(76, 77, 220) or hsl(240, 67%, 58%) — and get it converted to all three notations at once, with a live swatch so you can confirm it is the color you meant.
The three formats describe the same color differently: HEX packs red, green and blue into compact hexadecimal pairs; RGB spells the same channels out in decimal; HSL re-expresses the color as hue, saturation and lightness, which is far easier to reason about when you want “the same blue, just lighter.” Modern CSS accepts all three everywhere, so the choice is about readability, not capability.
How to use it
- Paste or type a color in HEX, RGB or HSL.
- Check the preview swatch matches your expectation.
- Copy whichever notation your stylesheet or design tool needs.
Frequently asked questions
What do the six HEX digits mean?
Three pairs of hexadecimal values for red, green and blue, each 00–FF (0–255). #FF0000 is pure red. Shorthand #F00 expands each digit: #FF0000.
When is HSL better than HEX?
When you are adjusting a color: making it lighter, darker or less saturated is a single-number change in HSL, but requires recalculating all three channels in HEX or RGB.
Does this support alpha (transparency)?
This converter handles opaque colors. For transparency, append an alpha channel — #4C4DDC80, rgba(…, 0.5) or hsla(…, 0.5) — the conversion of the color part is identical.