What is Color Converter?
A Color Converter converts data from one format to another using a deterministic mapping. It parses the input, transforms it according to the relevant standard, and returns a ready-to-use result. Designers and developers use it to pick palettes and copy CSS values.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK. Live swatch preview.
TLDR
Paste a color in any format (#FF6699, rgb(255,102,153), hsl(338,100%,70%)), click Convert. The page parses the input and shows the same color in every supported format with a live swatch.
About color models and conversion
A color converter translates a single color between the notations that screens and print use: HEX, RGB, HSL, HSV, and CMYK. Each is a different way of describing the same point in color space, and design and development tools each prefer their own. Being able to move between them without re-picking the color by eye keeps a palette consistent across CSS, a design file, and a print proof.
RGB and its hexadecimal shorthand HEX are additive models built for light-emitting screens: red, green, and blue channels each run 0 to 255, and stacking them at full strength makes white. HSL and HSV reorganise the same RGB space around an intuitive hue wheel so you can lighten or saturate a color without juggling three channels. CMYK is the odd one out: a subtractive, ink-on-paper model for print where the channels absorb light instead of emitting it.
This tool parses whatever notation you paste, converts it to RGB internally, and then derives every other format from there, showing them side by side with a live swatch so you can confirm the color is the one you meant.
How the conversions work
Everything routes through RGB. HEX is just RGB written in base 16; HSL, HSV, and CMYK are derived with standard formulas.
HEX -> RGB : each 2-digit pair is a base-16 value 0-255
RGB -> HSL : hue from channel order; S, L from max/min channels
RGB -> HSV : same hue; S = (max-min)/max; V = max
RGB -> CMYK: K = 1 - max(r,g,b)/255
C = (1-r/255-K)/(1-K), and similarly for M, Y
The hue is found from which channel is largest and the spread between the brightest and darkest channel. Lightness, value, and the black key are simple functions of those same max and min channels, which is why a single RGB triple fixes every other representation.
Worked example
Take the pink #FF6699 and convert it across every model.
- HEX to RGB: FF = 255, 66 = 102, 99 = 153, so rgb(255, 102, 153).
- To HSL: hue 338 degrees, saturation 100 percent, lightness 70 percent.
- To HSV: hue 338, saturation 60 percent, value 100 percent.
- To CMYK: 0 percent cyan, 60 percent magenta, 40 percent yellow, 0 percent black.
All four describe the identical pink. The HSL and HSV hue match at 338 degrees, but their second and third numbers differ because lightness and value measure brightness on different scales.
Common color reference
A few widely used colors in each notation.
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Green | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Teal | #0D9488 | rgb(13, 148, 136) | hsl(174, 84%, 32%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Common mistakes and pitfalls
- Trusting RGB for print. Screens show colors no ink can match. Always convert to CMYK and proof before sending artwork to a printer.
- Confusing HSL lightness with HSV value. At 100 percent, HSL lightness is white but HSV value is the pure hue. They are not interchangeable.
- Expecting a lossless RGB to CMYK round trip. CMYK has a smaller gamut, so out-of-range colors get clamped and cannot be recovered.
- Dropping the leading zero in a hex pair. Each channel needs two digits; 0F not F, or the code is misread.
- Forgetting the alpha channel. rgba and hsla carry opacity that opaque formats like HEX or CMYK cannot represent.
Related tools
HEX to RGB
Dedicated one-way HEX to RGB conversion.
Contrast Checker
Test text and background pairs for WCAG accessibility.
Gradient Generator
Build CSS gradients from two or more colors.
Palette Generator
Create harmonious palettes from a base color.
Frequently asked questions
How do I convert a HEX color to RGB?
Split the six-digit hex code into three pairs and read each pair as a base-16 number from 0 to 255. For #FF6699, FF is 255 (red), 66 is 102 (green), and 99 is 153 (blue), giving rgb(255, 102, 153). Three-digit shorthand like #F69 doubles each digit first, so #F69 expands to #FF6699. This converter does the base-16 math for you and shows the result instantly with a live swatch.
What is the difference between HSL and HSV?
Both describe a color by hue, but they treat brightness differently. HSL uses saturation and lightness, where 100 percent lightness is always white and 50 percent is the pure hue. HSV (also called HSB) uses saturation and value, where 100 percent value is the brightest version of the hue, not white. HSL is common in CSS, while HSV appears in color pickers like Photoshop. The converter shows both so you can use whichever a tool expects.
What is CMYK used for and why does it look different?
CMYK (cyan, magenta, yellow, key/black) is a subtractive model used for print, where inks absorb light on white paper. RGB is additive and used for screens, which emit light. Because the two work in opposite directions and screens can show colors no ink can reproduce, a bright RGB color often looks duller once converted to CMYK. Always proof print colors in CMYK rather than trusting the on-screen RGB version.
Why does converting RGB to CMYK and back not give the same numbers?
RGB to CMYK is a lossy conversion. The CMYK gamut is smaller than RGB, so colors outside it get clamped to the nearest printable value, and rounding to whole percentages loses precision. Converting back cannot recover the original because information was discarded. For exact screen work stay in RGB or HEX; only move to CMYK at the final print step, ideally with a proper ICC color profile.
What does the alpha channel mean in RGBA and HSLA?
Alpha is opacity, ranging from 0 (fully transparent) to 1 (fully opaque) in CSS, sometimes written as a percentage. rgba(255, 102, 153, 0.5) is the same pink at half opacity. Alpha is not part of the color itself, just how it blends with whatever is behind it, so it has no equivalent in opaque models like plain HEX, RGB, HSL, HSV, or CMYK.