About this tool
Convert colors between HEX, RGB, and HSL. Saves time when logs, design specs, or infra configs use a different format than your code expects.
Paste a color as HEX (#3B82F6) or rgb(59, 130, 246). Read the matching HEX, RGB, and HSL values in the result. Example — HEX to RGB and HSL: try `#3B82F6` and expect something like `HEX: #3b82f6 RGB: rgb(59, 130, 246) HSL: hsl(217, 91%, 60%)`.
Alpha channels (RGBA/HSLA) and named CSS colors like cornflowerblue are not converted. See also: CSS Formatter. Runs in your browser — nothing you paste gets uploaded.
How to use
- Paste a color as HEX (#3B82F6) or rgb(59, 130, 246).
- Read the matching HEX, RGB, and HSL values in the result.
- Copy the format your stylesheet or design token expects.
- Use the converted HSL when tuning lightness without changing hue.
Example
HEX to RGB and HSL
Input
#3B82F6
Output
HEX: #3b82f6 RGB: rgb(59, 130, 246) HSL: hsl(217, 91%, 60%)
Limitations
- Alpha channels (RGBA/HSLA) and named CSS colors like cornflowerblue are not converted.
- HSL input is not accepted — start from HEX or RGB.
- Round-trips can differ by 1% on HSL due to integer rounding.
Related tools
1Frequently asked questions
What does the Color Converter do?
Convert colors between HEX, RGB, and HSL. Runs in your browser — no install, no account.
How do I use the Color Converter?
Paste a color as HEX (#3B82F6) or rgb(59, 130, 246). Read the matching HEX, RGB, and HSL values in the result. Copy the format your stylesheet or design token expects. Use the converted HSL when tuning lightness without changing hue.
Is the Color Converter free?
Yes. No signup, no usage limits, no paywall.
Does the Color Converter upload my data?
No. Processing happens locally in JavaScript. Your input is not uploaded, stored, or logged.
What are the limitations of the Color Converter?
Alpha channels (RGBA/HSLA) and named CSS colors like cornflowerblue are not converted. HSL input is not accepted — start from HEX or RGB. Round-trips can differ by 1% on HSL due to integer rounding.