CodeKitHubWhat Is This Tool?
Colors on the web are written in several equivalent formats, all defined by the CSS Color spec on MDN. 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.
Which format should you use?
All three describe the same color exactly — the choice is about which one is easiest to work with for the task at hand, not accuracy.
| Format | Best for | Why |
|---|---|---|
| HEX (#4f46e5) | CSS, design handoffs, quick copy-paste | Shortest to type and paste; the universal format in design tools like Figma. |
| RGB (rgb(79,70,229)) | Code that manipulates channels directly, canvas/image work | Matches how graphics APIs and image pixel data actually store color. |
| HSL (hsl(243,75%,59%)) | Adjusting a color — lighter, darker, more/less saturated | Lightness and saturation are separate numbers you can tune directly, unlike HEX/RGB where every channel shifts. |
Common use cases
- Picking a color visually in a design tool, then converting it to the exact HEX or RGB value needed in CSS or code.
- Generating a set of related shades (lighter/darker variants) by converting to HSL, adjusting lightness, and converting back.
- Matching a brand color across different tools that each expect a different format — a logo file in RGB, a style guide in HEX, a CSS variable that needs HSL for theming.
- Verifying that a color pulled from a screenshot or design file (often given as RGB) matches the HEX value in a stylesheet.
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.
When should I use HEX, RGB or HSL?
If you need transparency, use 8-digit HEX (#RRGGBBAA) or rgba() — 6-digit HEX has no alpha channel. If you want lighter or darker variants of the same color, HSL is easiest: keep hue and saturation fixed and only change the lightness number. For plain copy-paste into CSS or design tools, 6-digit HEX remains the most universally accepted form.