Color Converter
Enter a color in HEX, RGB, HSL or CMYK and see it converted to the other three instantly. Both classic rgb(79, 70, 229) and modern rgb(79 70 229) CSS syntax are accepted.
What the colour converter does
It translates one colour between four notations: HEX, RGB and HSL, which CSS understands directly (see CSS Color Module Level 4 and MDN’s <color> reference), and CMYK, which describes printing inks. HEX, RGB and HSL are three ways of writing the same sRGB colour. CMYK is a different model altogether, so that conversion is only an estimate — more on that below.
How to use it
- Type or paste a value into the HEX, RGB, HSL or CMYK field, or click the colour box beside HEX to use your browser’s picker.
- As soon as the text is a valid colour, the other three fields and the swatch update. The field you are typing in keeps your text exactly as entered.
- Copy the value you need. Out-of-range numbers are clamped and decimals rounded, so
rgb(300, -5, 128.6)becomes#ff0081.
Accepted input
| Field | Accepted | Not accepted |
|---|---|---|
| HEX | 3, 4, 6 or 8 digits, with or without # (f80, #4f46e580); any alpha digits are ignored | Named colours such as red |
| RGB | rgb(79, 70, 229), rgb(79 70 229 / 50%), rgba(…) or just 79 70 229; channels 0–255 or percentages such as rgb(31% 27.5% 89.8%) | Named colours, and newer functions such as color(display-p3 …) |
| HSL | hsl(210, 50%, 40%), hsl(210deg 50% 40%), hsla(…); the hue may use deg, turn, rad or grad, and negative hues wrap round | hwb(), lab() and oklch() |
| CMYK | cmyk(66%, 69%, 0%, 10%) or 0 100 100 0; 0–100 per ink | Fractions such as 0.66 (read as 0.66%) |
The four colour models
- HEX writes red, green and blue as two hexadecimal digits each, 00 to FF. It is the most common notation in CSS and design tools.
- RGB gives the same three channels as decimals from 0 to 255 — how a screen mixes light.
- HSL describes hue (an angle on the colour wheel, 0–360°), saturation and lightness. Changing only the lightness gives a lighter or darker version of the same colour, which makes it handy for hand-tuning.
- CMYK gives cyan, magenta, yellow and black (key) ink coverage, as used in four-colour printing.
Verified conversions
These values were computed in Node.js with the page’s own conversion functions and checked by typing them into the converter. For the HSL column, Chromium’s CSS engine gives the same RGB back except where rounding intervenes (see below).
| HEX | RGB | HSL | CMYK |
|---|---|---|---|
#4f46e5 | rgb(79, 70, 229) | hsl(243, 75%, 59%) | cmyk(66%, 69%, 0%, 10%) |
#ff8000 | rgb(255, 128, 0) | hsl(30, 100%, 50%) | cmyk(0%, 50%, 100%, 0%) |
#336699 | rgb(51, 102, 153) | hsl(210, 50%, 40%) | cmyk(67%, 33%, 0%, 40%) |
#16a34a | rgb(22, 163, 74) | hsl(142, 76%, 36%) | cmyk(87%, 0%, 55%, 36%) |
#808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |
Why values can shift by one
HEX ↔ RGB is exact: each pair of hex digits is one channel, so 4f = 4 × 16 + 15 = 79. HSL and CMYK, though, are shown as whole numbers, and that rounding loses a little information. Type hsl(243, 75%, 59%) back in and you get #5048e5, not #4f46e5; Chromium renders that HSL value as rgb(80, 72, 229) too. Likewise cmyk(66%, 69%, 0%, 10%) converts back to #4e47e6. When an exact colour matters, keep HEX or RGB as the source of truth.
Why CMYK conversion is approximate
The tool uses the common naive formula: with R, G and B scaled to 0–1, K = 1 − max(R, G, B), then C = (1 − R − K) / (1 − K), and likewise for M and Y. Real presses do not behave like that formula. The result depends on the paper, the inks and the press, which is why print workflows use ICC colour profiles such as FOGRA or GRACoL, and why many bright screen colours — saturated blues, greens and oranges — cannot be printed at all. Use these CMYK numbers as a starting point, and ask your printer for their profile or a proof when colour must match.
Common problems and fixes
| Message or symptom | Cause | Fix |
|---|---|---|
| “Invalid HEX color.” while typing | The value is not yet 3, 4, 6 or 8 hex digits. | Keep typing; it clears once the value is complete. |
| “Invalid RGB color. Use rgb(r, g, b).” | A named colour or fewer than three channels. | Enter three numbers from 0 to 255, or three percentages. |
| “Invalid HSL color. Use hsl(h, s%, l%).” | A missing value or an unknown hue unit. | Give the hue as a number of degrees, or with deg, turn, rad or grad. |
| The colour looks different in a design app | The app is working in another colour profile, such as Display P3. | Set the document to sRGB, or compare HEX values rather than appearance. |
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into pairs and convert each from base 16 to base 10: #4f46e5 → 4f = 79, 46 = 70, e5 = 229. The Number Base Converter can do the arithmetic.
Is transparency supported?
Alpha in 8-digit HEX, rgba() and hsla() is accepted but ignored; the conversions cover the opaque colour only.
Which format should I use in CSS?
Browsers treat them identically, so choose for readability. HEX is compact and familiar; HSL is easier to adjust by hand. For palettes that need even perceived steps, CSS also offers oklch(), which this tool does not convert.
Why does my printed colour look different from the screen?
Screens emit light and can show more saturated colours than ink on paper can reproduce. Bright blues and greens in particular tend to print duller, whatever CMYK values you start from.
How do I check whether two colours have enough contrast?
WCAG 2 asks for a contrast ratio of at least 4.5:1 for normal body text. This tool does not calculate contrast, so use a dedicated checker or your browser’s developer tools.
Are the colours I enter sent anywhere?
No. All conversions are simple arithmetic done by JavaScript in your browser.