Every color you see on a screen or send to a printer can be written down as a short code - but there are several competing ways to write it, and they look nothing alike. #3b82f6, rgb(59, 130, 246), hsl(217, 91%, 60%) and cmyk(76%, 47%, 0%, 4%) all describe exactly the same shade of blue. This guide explains what each of the four common color systems - HEX, RGB, HSL and CMYK - actually means, how they relate to one another, and when to reach for each. You can convert any color between all four instantly with the Color Converter, and the guide works through the same shade the tool shows by default, so you can follow every number yourself.
Four color systems, and why there are so many
A color code is just a set of numbers that pins down one exact shade so a browser, design tool or printer can reproduce it. The reason there is more than one system is that each was built for a different job. HEX and RGB describe light - the red, green and blue a screen emits - and are effectively two spellings of the same thing. HSL also describes screen color, but arranges it the way a person thinks about color, which makes it easy to adjust by hand. CMYK describes ink on paper, a fundamentally different medium. Knowing which system you are looking at, and how to move between them, saves guesswork.
HEX - six digits, two per channel
A HEX (hexadecimal) code is the format you meet most in web design and CSS: a hash sign followed by six characters, like #3b82f6. Those six characters are three pairs - one each for red, green and blue. Each pair is a base-16 number: hexadecimal uses the digits 0-9 and then a-f for the values ten to fifteen, running from 00 (none of that channel) up to ff (the maximum, which is 255 in ordinary decimal). So #3b82f6 splits into 3b for red, 82 for green and f6 for blue. Converting a pair to decimal is straightforward: 3b means 3x16 + 11 = 59, 82 means 8x16 + 2 = 130, and f6 means 15x16 + 6 = 246. You will also meet three-digit shorthand like #abc; each digit is simply doubled, so #abc is identical to #aabbcc.
RGB - mixing red, green and blue light
RGB writes the same three channels as plain decimal numbers from 0 to 255, usually as rgb(59, 130, 246). It is an additive model: a screen starts black and adds red, green and blue light, and the more of each it adds the brighter the result, until all three at full strength - rgb(255, 255, 255) - make white. Because each HEX pair is just a channel value in disguise, HEX and RGB are interchangeable: #3b82f6 and rgb(59, 130, 246) are the identical color, one written in base-16 and the other in base-10. RGB is handy when you want to reason about the channels numerically or nudge a single one, and it is the format that gains an alpha channel - becoming RGBA - when you need transparency. If you only ever go one direction, the dedicated Hex to RGB and RGB to Hex converters do just that single step.
HSL - hue, saturation and lightness
HSL rearranges the same screen colors into three values that match how people actually describe color, written hsl(217, 91%, 60%). Hue is an angle from 0 to 360 degrees around a color wheel - 0 and 360 are red, 120 is green, 240 is blue - so our example's 217 sits firmly in the blue range. Saturation is how vivid the color is, from 0% (a flat grey) to 100% (fully intense). Lightness runs from 0% (black) through 50% (the pure hue) to 100% (white). The big advantage is intuitive editing: to make a color a little darker you lower the lightness; to mute it you drop the saturation; to shift it towards purple you raise the hue - all without juggling three separate channel numbers. That makes HSL the friendliest format for building consistent palettes, tints and hover states.
CMYK - ink instead of light
CMYK is the odd one out because it describes printing, not screens. Its four channels are cyan, magenta, yellow and key (black), each given as a percentage of ink coverage. Printing is subtractive: paper starts white and every ink subtracts light, so more ink means a darker result - the opposite of RGB's additive light. The black 'key' channel exists because layering the three color inks to make black wastes ink and looks muddy, so printers lay down real black separately. One important caveat: CMYK is device-dependent. The exact shade depends on the printer, inks and paper, so an on-screen CMYK preview is only an approximation - for color-critical print work, match to a physical swatch or a Pantone reference rather than the screen.
A worked example across all four
Take the blue the Color Converter shows by default. As a HEX code it is #3b82f6. Splitting that into channels gives red 3b (59), green 82 (130) and blue f6 (246) - which is exactly rgb(59, 130, 246). Feeding those channels through the HSL maths yields hsl(217, 91%, 60%): a hue of 217 degrees (blue), a high 91% saturation and a middling 60% lightness - numbers that immediately tell you it is a fairly bright, vivid blue. The same channels convert to cmyk(76%, 47%, 0%, 4%): heavy cyan, moderate magenta, no yellow at all and a touch of black, roughly how a printer would lay that blue down. All four codes name one identical color; they are just four languages for the same thing. Paste any of them into the converter and you get the other three back.
Which format should you use?
- HEX for the web. It is the most compact and by far the most common format in CSS, design handoffs and style guides - the default for anything on screen.
- RGB (or RGBA) when you need the raw channel numbers, want transparency, or are generating colors in code where separate 0-255 values are easier to work with.
- HSL for editing and palettes. Its hue, saturation and lightness split makes it the easiest format for tweaking a color by hand or generating tints and shades that feel related.
- CMYK only for print. If your work is heading to a physical printer, supply CMYK (or a spot-color reference) - but treat any on-screen preview as approximate.
Converting between them
Because all four systems describe the same colors - with CMYK the only one tied to a different medium - you can move between them freely. The Color Converter detects whatever you paste, whether a HEX code with or without the hash, an rgb(...) value, a bare 59, 130, 246 triplet, or an hsl(...) value, and shows all four formats at once with a live preview swatch, each ready to copy. Everything runs in your browser, so nothing about your colors is uploaded. When you only need a single hop, the focused Hex to RGB and RGB to Hex tools cover the two most common conversions on their own.
Frequently asked questions
- Are HEX and RGB the same color?
- Yes. They describe identical red, green and blue channels using different number bases. HEX writes each channel as a two-digit base-16 value (00 to ff), while RGB writes it as a decimal number (0 to 255). So #3b82f6 and rgb(59, 130, 246) are exactly the same blue - ff equals 255, 82 equals 130, and so on. Converting between them never changes the color, only how it is written.
- What does the K in CMYK stand for?
- K stands for 'key', the printing term for the black plate that the other colors are aligned - keyed - to. Black gets its own channel rather than being mixed from cyan, magenta and yellow because layering all three inks to make black wastes ink and produces a muddy, off-black result. A dedicated black plate gives deeper blacks, sharper text and lower ink use.
- Why does the same color look different in print than on screen?
- Screens create color by adding red, green and blue light (RGB), while printers create it by layering cyan, magenta, yellow and black ink (CMYK), and the two cannot reproduce exactly the same range of colors. Bright, saturated screen colors - vivid blues and greens especially - often fall outside what CMYK ink can achieve, so they shift when printed. CMYK is also device-dependent, so the printer and paper matter. For color-critical work, match to a printed swatch rather than trusting the screen.