Color Converter
Convert colors between HEX, RGB and HSL
🔒 100% free · no signup · files never leave your device
Colors on the web exist in three main notations, and every project eventually needs all of them. HEX (#3B82F6) is what design tools and brand guidelines hand you. RGB (59, 130, 246) is what CSS filters, canvas code and image editors think in. HSL (217°, 91%, 60%) is the human-friendly one — its hue, saturation and lightness channels map to how designers actually reason, making it far easier to build hover states, dark variants and full palettes by adjusting a single number.
This color converter translates between HEX, RGB and HSL bidirectionally and live: type any format, or use the visual picker, and the other two update instantly with a large swatch preview. One-click copy on every value means no more manual retyping between a Figma file and a stylesheet. With RGBA and HSLA alpha support included, it covers every color conversion a front-end developer or designer hits in daily work.
Why use Color Converter
Moving colors from a design file into CSS
Design tools show HEX, but your stylesheet convention may use RGB or CSS variables — converting once, accurately, avoids subtle mismatches.
Building hover and active states
Convert a brand color to HSL, drop lightness by 8–10%, and you get a predictable darker variant for button hover states.
Generating a full palette from one brand color
In HSL, stepping saturation and lightness produces tints and shades that stay harmoniously on-hue.
Adding transparency to an existing color
Convert HEX to RGBA to set a semi-transparent overlay without changing the base hue.
Pro tips
- Prefer HSL when designing variations: changing only the L channel keeps hue consistent, which is nearly impossible to eyeball in RGB.
- A 3-digit HEX like #48F is shorthand that doubles each digit (#4488FF) — handy for quick mental shortening.
- Check contrast after converting brand colors for text; WCAG requires 4.5:1 for body text regardless of notation.
- When copying from design tools, verify the color profile — an sRGB mismatch can shift values even when the HEX code matches.
How to use Color Converter
- 1Enter a color in any format or use the picker
- 2See all formats instantly
- 3Click any value to copy it
Frequently Asked Questions
What formats are supported?▾
HEX (#RRGGBB), RGB/RGBA, HSL/HSLA — all converted live as you type.