Color Converter
Convert colors between HEX, RGB, HSL, HWB, and CMYK with transparency support and live preview.
How It Works
The Color Converter translates between the colour models used in CSS and graphic-design workflows: HEX (#rrggbb or #rgb), RGB, HSL, HWB, and CMYK, with full alpha-channel support. Type a value in any supported format and the other formats update simultaneously, accompanied by a live preview swatch so you can confirm the result visually. The conversion path goes through the sRGB colour space: HEX and RGB map directly, HSL and HWB are derived using the standard CSS Color Level 4 formulas, and CMYK uses the simple subtraction model commonly applied for screen previews (note that print-accurate CMYK depends on the destination ICC profile, which is outside the scope of an in-browser tool). Alpha is preserved across formats — a #1a2b3c80 input round-trips through rgb(26 43 60 / 0.5) and hsl(...). The tool accepts both legacy comma-delimited CSS notation (rgb(255, 0, 0)) and the modern space-separated notation with / for alpha, so you can copy-paste from any source.
Worked Example
Enter #1E90FF: the tool reports rgb(30, 144, 255) and hsl(210, 100%, 56%), identifies it as the named CSS colour dodgerblue, and shows its WCAG relative luminance. The harmony section generates its complementary, analogous, triadic and split-complementary partners — click any swatch to load it and keep exploring. Working the other way is just as common: paste rgb(30, 144, 255) from a design tool and copy out the hex for your stylesheet, with every format kept in sync as you adjust the value.
Use Cases
- Translating a designer's HEX colour into HSL for CSS animations
- Checking the RGB triplet behind a brand colour
- Copying colour values between design tools that use different formats
- Teaching colour theory with a visual swatch
Frequently Asked Questions
- Why does my CMYK output look slightly off compared to Photoshop?
- Print-accurate CMYK requires an ICC profile mapping sRGB to a specific press; this tool uses the simple sRGB→CMYK subtraction formula that browsers and many web tools use for preview, which is good enough for screen but not for print proofs.
- Does the tool support alpha (transparency)?
- Yes. Alpha is preserved when round-tripping between HEX (8-digit form), RGB, and HSL.
- What format does the swatch use?
- The swatch is rendered in CSS, so it shows exactly what the colour will look like in your browser at the current display gamma.
- Why are HSL hue values 0–360 and saturation 0–100?
- That matches the CSS specification: hue is an angle in degrees, saturation and lightness are percentages.
- Is the colour value sent anywhere?
- No. All conversion math happens in your browser, so brand colour palettes stay private.