One color, many languages
The same red can be written in five ways. HEX. RGB. HSL. CMYK. A Pantone number.
It is still the same red. Or almost.
Knowing which language to use saves you from surprises at the printer and on the screen.
✦ The formats in plain words
- HEX. A short code like #1E6BD6. The standard for the web.
- RGB. Red, green and blue light, each from 0 to 255. How screens build color.
- HSL. Hue, saturation, lightness. The most human way to adjust a color.
- CMYK. Cyan, magenta, yellow and black ink. The language of print.
✦ Why HSL is your friend
Want a lighter version of your brand color? In HEX that is guesswork.
In HSL you change one number: the lightness.
Same hue. Same character. Different role.
That is how you build tints and shades that belong together.
✦ Screen and paper are different worlds
A screen makes color with light. Paper makes color with ink.
Some bright screen colors simply do not exist in print. Electric blue. Neon green. They become duller.
A converted CMYK value is always an approximation. The result depends on the paper, the printer and the color profile.
For important print work, ask the printer for a proof.
✦ How to use this converter
- Paste a color in any format.
- Copy the version you need.
- Save colors you use often, so they stay on this device.
- Use the suggestions to find related shades.
- Write your final values down in one place: a small brand sheet.
✦ Common mistakes
- Picking colors with an eyedropper from a compressed image. The value is often slightly off.
- Three slightly different versions of the same brand color. Nobody notices. Until they sit side by side.
- Designing a print job in RGB and converting at the last minute.
- Trusting a monitor that has never been calibrated.
✦ Try this
Take your main brand color. Write it in HEX, RGB, HSL and CMYK on one card.
Add a lighter and a darker version in HSL. You now have the start of a color system.
✦ In practice
A logo color for web and print. The designer delivers a HEX code. The printer asks for CMYK. The sign maker asks for a Pantone number.
Convert once, check the print proof, and write all versions on one brand sheet. From then on nobody has to guess.
A hover color for a button. Take the button color in HSL. Lower the lightness by about 8 to 10 points.
Same color family. Clearly different. No new color needed.
A soft background from a strong brand color. Keep the hue. Lower the saturation. Raise the lightness to around 95.
You get a pale tint that clearly belongs to the brand, without shouting.
✦ Four questions before you convert
- What do you want to say? Where will this color live: screen, paper or both?
- What must be seen first? The main brand color. Get that one exactly right.
- What can go? Almost-the-same versions of one color. Keep one.
- What is the next small step? Make a one-page color sheet with all formats.
✦ A small checklist
- Each brand color is written in HEX, RGB, HSL and CMYK.
- Print colors are checked on a real proof.
- Tints and shades are made in HSL from the same hue.
- There is one source of truth for colors, shared with the team.
- Old or slightly different versions are removed from templates.
✦ From the classroom
We ask students to bring one object from home and match its color on screen. A mug. A book cover. A scarf.
It is harder than it sounds. It teaches more about color than any theory.
