What Is This Tool?
Colors on the web are written in several equivalent formats. HEX (#4f46e5) is the compact form used everywhere in CSS and design handoffs. RGB (rgb(79, 70, 229)) states the red, green and blue components directly, which code often needs. HSL (hsl(243, 75%, 59%)) describes hue, saturation and lightness — the most intuitive format for adjusting a color, like making it darker or less saturated.
They all describe the same color; this tool converts between them exactly and shows a preview so you can confirm it's the color you meant.
Why Use It?
- Accepts any format in — HEX (3 or 6 digit), RGB or HSL — and gives all formats out.
- Live preview swatch so you see the color, not just numbers.
- Visual color picker when you'd rather choose by eye.
- One-click copy per format, ready for CSS or code.
- Free, instant, no upload.
How to Use
- Type or paste a color: #4f46e5, rgb(79, 70, 229) or hsl(243, 75%, 59%) all work.
- Or click the color picker and choose visually.
- Read all three formats in the results and check the preview swatch.
- Click "Copy" next to the format you need.
Example
Input
#4f46e5Output
HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)Three notations, one identical color.
Frequently Asked Questions
When should I use HSL instead of HEX or RGB?
When you want to reason about a color. Making a color 10% darker in HSL means lowering lightness by 10 points; in HEX or RGB you'd have to recompute all channels. Design systems often define palettes in HSL for exactly this reason.
Does the tool support 3-digit HEX like #fff?
Yes. #fff is shorthand for #ffffff — each digit is doubled. Both forms are accepted and the output shows the full 6-digit form.
What about alpha (transparency)?
This tool converts opaque colors (the RGB/HSL values). If you need transparency, add the alpha yourself: rgba(79, 70, 229, 0.5) or #4f46e580 — the color part stays the same.
Why do my HSL values differ by 1 from another tool?
Rounding. HSL↔RGB conversion produces fractional values, and tools round differently. A ±1 difference in hue or percent is invisible and normal.
Are the color names like 'red' supported?
Not in Phase 1 — the tool focuses on the three numeric formats developers convert most. Enter the color's HEX/RGB/HSL value, or pick it visually with the picker.