Color Converter
Convert between HEX, RGB, HSL, HSV, and CMYK
Quick Colours
What is a Color Converter?
A color converter translates colour values between the formats used in design, web development, and print: HEX (the six-digit code used in CSS and HTML), RGB (red, green, blue channels on a 0–255 scale), HSL (hue, saturation, lightness — intuitive for designers), HSV/HSB (hue, saturation, value — used in design software colour pickers), and CMYK (cyan, magenta, yellow, key/black — used in print production). Being able to convert between them instantly saves significant time when working across different tools and workflows.
Common Use Cases
- Convert a brand's HEX colour code to RGB for use in CSS
rgba()with opacity - Translate a Figma or Photoshop colour picker value (HSV) to a CSS-compatible HSL or HEX
- Convert web colours (HEX/RGB) to CMYK for a print design handoff
- Adjust a colour's lightness in HSL without losing the hue information
- Verify that two colour values from different tools are actually the same colour
How It Works
All conversions use RGB as the intermediate representation. HEX is parsed as three hexadecimal byte values. HSL is converted to RGB using the standard IEC 61966-2-1 algorithm. HSV is converted via the sector-based formula that maps the hue wheel to RGB channels. CMYK is converted using the formula R = 255 × (1 − C) × (1 − K) and equivalents. The live colour swatch updates as you type so you can immediately see the colour you're working with.
Frequently Asked Questions
What is the difference between HSL and HSV?
Both use hue and saturation, but differ in the third component. HSL's "lightness" ranges from black (0%) to white (100%) with the pure colour at 50%. HSV's "value" ranges from black (0%) to the pure colour (100%) — white is represented by low saturation, not high value. HSV matches most design-tool colour pickers; HSL is native to CSS.
Why doesn't CMYK convert perfectly to RGB?
RGB is an additive colour model (mixing light); CMYK is subtractive (mixing ink). The gamuts (ranges of representable colours) differ — some colours on a screen cannot be reproduced in print, and some printed colours cannot be displayed on a monitor. Conversion is an approximation.
What does the alpha channel control?
Alpha controls opacity from 0 (fully transparent) to 1 (fully opaque). It appears in formats like rgba() and hsla() in CSS. An 8-digit HEX code (#RRGGBBAA) encodes alpha as the last two hex digits.