Color converter
Convert colors between HEX, RGB and HSL with a live preview and picker.
How to use
Enter a colour in any common format — HEX, RGB or HSL — and instantly see it expressed in all the others, along with a live swatch. It's the quickest way to grab the exact value you need for CSS, design tools or code without converting by hand.
Adjust the value and every format updates together, so you can fine-tune a colour and copy whichever notation your project uses. Everything runs locally in your browser.
Handy whenever a design hands you one format but your codebase expects another, or when you just need to read a colour in numbers you understand.
Examples
Paste #3b82f6 to get its rgb() and hsl() equivalents for CSS.
Convert a brand HEX into HSL to create lighter and darker shades.
Turn an RGB value from a screenshot tool into a copy-paste HEX code.
Frequently asked questions
Which colour formats are supported?
The common web formats — HEX, RGB and HSL — converting freely between them with a live preview.
Does it handle transparency?
It focuses on solid colours. For alpha you can append it in your CSS (e.g. rgba) using the converted base value.
Why convert between HEX, RGB and HSL?
HEX is compact for CSS, RGB maps to screen channels, and HSL makes it intuitive to adjust lightness and saturation for shades.
Is anything uploaded?
No. Conversion is done in your browser, so your colours stay on your device.
Related tools
Build harmony palettes and a 50–900 tonal scale from a single base color.
Check the WCAG contrast ratio between a text and background color, with AA/AAA verdicts.
Build linear, radial and conic CSS gradients with multiple color stops and a live preview.
Convert length, mass, temperature, data, area, volume, speed, time, pressure and angle units.
Convert numbers between binary, octal, decimal and hexadecimal, even very large ones.