The same color can be written many ways: designers hand you #FF6B35, CSS variables use rgb(255, 107, 53), and modern stylesheets increasingly prefer hsl(16, 100%, 60%) because humans can reason about hue, saturation and lightness. Converting between formats by hand requires non-obvious math — this tool does it instantly and shows a live swatch of the color.
Paste any HEX, RGB, or HSL value and get all equivalent forms at once, ready to copy into your stylesheet, design tool, or brand guide.
How to Use This Tool
- Enter a color in any supported format: #hex, rgb(), or hsl().
- All other formats are computed instantly, with a visual preview.
- Click any value to copy it.
- Tweak the color with the picker to fine-tune, then copy the format your project uses.
Frequently Asked Questions
What is the advantage of HSL over HEX?
HSL separates what humans perceive: hue (the color itself), saturation (intensity), and lightness. Making a hover state 10% darker is trivial in HSL — just lower L — but requires recalculating all three channels in HEX or RGB.
What do the six HEX digits mean?
They are three pairs of hexadecimal values for red, green, and blue: #RRGGBB. #FF0000 is pure red (255, 0, 0). A shorthand three-digit form like #F00 expands each digit by doubling it.
How do I add transparency?
Use the alpha variants: an eight-digit hex like #FF6B35CC, rgba(255, 107, 53, 0.8), or hsla(16, 100%, 60%, 0.8). The alpha channel ranges from 0 (invisible) to 1 (fully opaque).