HEX, RGB, CMYK and HSL are four ways of writing down the same colour, each built for a different job. HEX is the language of web code, RGB is how screens mix colour, HSL describes colour the way humans think about it, and CMYK is the language of print. Pick the format that matches where the colour will end up: our free color picker shows every format side by side. The whole decision in one small table:
| Format | Written as | Use it for |
|---|---|---|
| HEX | #0E7C7B | Websites, CSS, sharing a colour unambiguously |
| RGB | rgb(14, 124, 123) | Screens and design tools |
| HSL | hsl(179, 80%, 27%) | Adjusting colour by eye — shades and tints |
| CMYK | cmyk(89%, 0%, 1%, 51%) | Print — brochures, packaging, business cards |
Meet the example colour: one teal, four languages
Every example in this guide uses one colour — the teal we use across Asad Webs, #0E7C7B: a deep blue-green, dark enough for buttons, bright enough to feel modern. In RGB it is 14 parts red, 124 parts green and 123 parts blue on the 0–255 scale. Notice the green and blue channels are almost equal while red is nearly absent — that is what makes it teal rather than green or blue.
One colour, four formats — teal #0E7C7B as RGB — hover or tap each bar for details.
HEX: the language of the web
A HEX code is RGB compressed into six characters. Split #0E7C7B into three pairs — 0E, 7C, 7B — and each pair is one RGB channel written in base 16: 0E is 14, 7C is 124, 7B is 123. That is all a HEX code ever is. Browsers, CSS and design tools accept it directly, so it became the default way to pass a colour around. If someone emails you a colour for a website, it will almost always be HEX. Its only weakness: it tells you nothing about what the colour looks like at a glance.
RGB: how screens actually mix colour
Every screen pixel is three tiny lights — red, green and blue — and RGB records how bright each is, from 0 (off) to 255 (full). All three at full power make white; all off makes black. Design tools, photo editors and presentation software all work in RGB because they are built for screens. Use it when a tool asks you to set the three channels separately, or when you need transparency — the extended RGBA form adds a fourth value for opacity. Its weakness: three raw numbers are hard to reason about. Is rgb(14, 124, 123) light or dark, vivid or greyish? RGB will not tell you without practice.
HSL: the format humans think in
HSL fixes that: it describes colour the way you would out loud. Hue is the colour itself, an angle on the colour wheel (0° red, 120° green, 240° blue — teal sits at 179°). Saturation is vividness, from grey (0%) to full colour (100%); Lightness runs from black (0%) to white (100%), with the pure colour at 50%. Our teal — hsl(179, 80%, 27%) — is vivid and on the darker side. This is why designers love HSL for interfaces: keep the hue fixed and raise lightness for a hover state, or lower saturation for a muted background version — the family always matches because the hue never moves. CSS supports HSL natively, so it is practical for web work too, not just theory.
CMYK: the language of print
Printers lay down ink rather than emitting light. CMYK describes a colour as percentages of four inks — cyan, magenta, yellow and black (K, the "key" plate). Our teal prints as cmyk(89%, 0%, 1%, 51%): mostly cyan ink and black, almost no magenta or yellow. Use CMYK whenever the final product is physical, and always convert before sending files to a print shop — the conversion shifts the colour slightly, and you want to see that shift on screen first, not on 5,000 printed flyers.
The gamut warning: CMYK cannot reproduce the brightest screen colours. Vivid neons and glowing greens that look stunning in RGB will print noticeably duller — ink on paper cannot emit that much light. If a brand colour must work in both worlds, choose it inside the CMYK-safe range from the start.
The ranges trip people up first — RGB counts to 255, CMYK counts in percent:
Component ranges by format — hover or tap each bar for details. ■ maximum value per channel (each group scaled to its own maximum: RGB 0–255, CMYK 0–100).
Converting between formats by hand
The color picker converts instantly, but one worked example makes all four formats click. HEX to RGB you have already seen: split into pairs and convert each from base 16 (0E = 14, 7C = 7×16 + 12 = 124, 7B = 7×16 + 11 = 123). RGB to HSL: the strongest channel is green (124) and the weakest is red (14); lightness is their midpoint, (124 + 14) ÷ 2 ÷ 255 ≈ 27%, and because green just edges out blue, the hue lands at 179°, with 80% saturation. RGB to CMYK: black (K) is whatever light is missing from the brightest channel — (255 − 124) ÷ 255 ≈ 51%. The inks are then measured against that brightest channel: cyan = (124 − 14) ÷ 124 ≈ 89%, magenta = (124 − 124) ÷ 124 = 0%, yellow = (124 − 123) ÷ 124 ≈ 1%. Result: cmyk(89%, 0%, 1%, 51%) — the same teal, ready for a printer.
Which format for common tasks
| Task | Format | Why |
|---|---|---|
| Styling a website in CSS | HEX (or HSL) | Compact and universal; HSL for shade variations |
| Picking colours in a design tool | RGB / HEX | Screens are RGB devices |
| Creating a hover or disabled shade | HSL | Change only lightness; hue stays matched |
| Making a vivid colour more muted | HSL | Lower saturation only |
| Printing flyers, cards or packaging | CMYK | The press lays down these four inks |
| Sending a colour to a developer | HEX | Short and unambiguous |
| Matching a colour sampled from a photo | HEX / RGB | What pickers read from a pixel |
| A logo used on screen and in print | HEX master + CMYK version | Keep both; approve print on a proof |
Common mistakes
Most colour-format problems come from a few mix-ups. Sending an RGB file to print without converting, then wondering why the brochure looks dull — the gamut problem above, and it is avoidable. Typing the same numbers into a different format: 124 means "about half" in RGB but an impossible 124% in CMYK — numbers are never portable between formats. An eight-digit HEX is not a typo — it adds an alpha (transparency) channel that some tools misread. And judging print on a backlit screen — paper has no backlight, so proof anything important.
The one-line summary: screens speak HEX and RGB, humans think in HSL, printers need CMYK. Describe the colour in the language of wherever it will appear, and let a converter translate.
Try it with your own brand colour: pick it with the free color picker and read off all four formats at once. Preparing web graphics in your new colours? Convert them with the image to WebP converter, check your page's presentation with the meta tag analyzer, and find more guides on the Asad Webs blog.
Frequently Asked Questions
Is HEX the same thing as RGB?
Yes. A HEX code is RGB written in base 16: #0E7C7B and rgb(14, 124, 123) are exactly the same colour — HEX is just more compact.
Why does my printed colour look different from my screen?
Because CMYK's gamut is smaller than RGB's, especially for bright colours. Out-of-range colours get pulled to the nearest printable equivalent, which looks duller. Convert early and proof on paper.
Which format do printers actually want?
CMYK. Print files (usually PDF) are expected to carry CMYK colours; send RGB and the shop converts it for you, without your input on the shift.
If screens use RGB, what is HSL for?
For humans. HSL reorganises the same colours by hue, saturation and lightness, so adjusting a colour becomes intuitive — and tools convert it back to RGB behind the scenes.
How do I convert a colour quickly?
Use a tool: enter the colour in the free colour picker and it shows all four formats together, ready to copy.
Be the first to share a useful question or thought.