Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
Design tools, CSS, and image editors don't always agree on which color format they want — a design spec might hand you a hex code while your CSS uses HSL for easy lightness adjustments. This tool converts a color between the three formats web developers use most: HEX (#RRGGBB), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)) — paste any one and get the other two instantly.
It automatically detects which format you pasted, so there's no separate mode to select — just paste a color in whatever format you have it in.
How it works
Paste a color in any of the three supported formats — a hex code (with or without the #), an rgb(...) string, or an hsl(...) string. The tool detects the format automatically and shows the equivalent value in all three formats at once.
- Paste a color in HEX, RGB or HSL format.
- The format is detected automatically.
- Read the equivalent value in the other two formats.
Examples
Converting a hex code to HSL
Pasting "#ff0000" (pure red) shows the equivalent as rgb(255, 0, 0) and hsl(0, 100%, 50%) — useful when you need to adjust just the lightness in HSL but only have the hex value.
Converting an RGB value from a design tool
Pasting "rgb(0, 255, 0)" from a design tool's color picker shows the hex equivalent "#00ff00" for use directly in CSS or code.
Who should use it
- Converting a design spec's hex color into RGB or HSL for code that needs a specific format.
- Getting the HSL equivalent of a hex color to adjust its lightness or saturation.
- Converting a color picked in one tool's format into what another tool expects.
Industry applications
- Web design and front-end development
- UI/UX design
- Graphic design and branding
Advantages
- Automatically detects HEX, RGB or HSL input with no mode to select.
- Converts to both other formats at once.
- Supports the 3-digit hex shorthand as well as the full 6-digit form.
Limitations
- Doesn't preserve an alpha/transparency channel through the conversion.
- Doesn't support named CSS colors (like "rebeccapurple") as input, only HEX/RGB/HSL values.
Common mistakes to avoid
- Entering an RGB or HSL component out of range (like 999 for a color channel), which isn't a valid color value.
- Forgetting the % sign on HSL saturation/lightness values, which this tool expects.
- Assuming alpha/transparency carries through the conversion — only the underlying color is converted.
Best practices
- Use HSL when you need to programmatically lighten, darken, or adjust the saturation of a color consistently.
- Use HEX for concise storage and the most common format in design handoffs.
- Double-check a converted value visually if precision matters, since rounding can shift the last digit slightly between formats.
Tips
- If you need a lighter or darker version of a brand color, convert to HSL first and adjust the lightness percentage directly.
- Keep a consistent format across a project's stylesheets rather than mixing hex, rgb() and hsl() arbitrarily.