English
العربية
Deutsch
Español
Français
Italiano
Português
Русский
Türkçe
Tiếng Việt
Color Converter
Convert a color between HEX, RGB, HSL and CMYK instantly.
A designer hands you hsl(174, 62%, 41%) and your CSS file is full of hex codes. A print shop wants CMYK percentages for a logo you only ever specified in RGB. Every one of these is the same colour described in a different language, and converting between them should not require guesswork.
The four formats at a glance
| Format | Structure | Typically used for |
|---|---|---|
| HEX | #RRGGBB, base-16 | CSS, HTML, design tools |
| RGB | red, green, blue, 0–255 each | Screens, digital design |
| HSL | hue, saturation, lightness | Building and adjusting palettes |
| CMYK | cyan, magenta, yellow, key (black), % | Print production |
Why HSL is the one designers reach for
HEX and RGB describe a colour by how much red, green and blue light combine to make it, which is precise but not intuitive — changing #2E86AB into a slightly lighter version of itself is not obvious by looking at the numbers. HSL separates hue, saturation and lightness into three independent sliders, so “the same blue, but lighter” is just raising the lightness value and leaving hue and saturation alone.
That is why most palette generators and design tools let you pick hue on a colour wheel and then drag saturation and lightness separately — it maps to how people actually think about colour, rather than how a screen renders it.
CMYK exists because print and screens are different physics
RGB is additive — you start with black and add red, green and blue light to reach white. CMYK is subtractive — you start with white paper and subtract light by layering cyan, magenta, yellow and black ink. Because the two systems work in opposite directions with different physical media, not every RGB colour has an exact CMYK equivalent. Bright, highly saturated screen colours, especially certain greens and oranges, sit outside what ink on paper can reproduce, which is why a logo can look duller printed than it does on a monitor no matter how carefully it was converted.
Converting a color
- Paste your colour in any supported format — HEX, RGB, HSL or CMYK.
- The tool detects the format and converts it to the other three simultaneously.
- Copy whichever format you need for CSS, a design tool, or a print spec sheet.
- For print work, check the converted CMYK against your printer’s actual colour profile before finalising, since converters use a generic profile.
Color converter questions
Why does my color look different printed than it does on screen?
Screens produce colour with light (RGB), while print produces it by absorbing light with ink (CMYK), and the two have different achievable ranges. Some bright RGB colours simply cannot be matched exactly in CMYK ink.
What is the difference between HSL and HSB/HSV?
They are closely related but not identical. HSL uses lightness, which runs from black through the pure hue to white, while HSB/HSV uses brightness, which runs from black to the pure hue only. The saturation value differs slightly between the two as a result.
Is HEX just another way of writing RGB?
Yes, exactly. A HEX code like #2E86AB is the same three RGB values — 46, 134, 171 — written in base-16 instead of base-10, purely because it is shorter to type and paste into CSS.
Why does converting RGB to CMYK and back not always give the exact same color?
Because the two colour spaces do not map perfectly onto each other. A colour outside CMYK’s printable range gets pulled to the closest printable equivalent during conversion, so converting back to RGB afterward returns that adjusted colour, not the original.
Which format should I use for a website’s CSS?
HEX and RGB are both fully supported and equally valid; HEX is more compact, RGB (or RGBA) is easier to read when you also need to set transparency. HSL is often the easiest to reach for when you are actively tweaking a colour by eye.
