Color Converter
Convert colours between HEX, RGB, HSL, HSV and CMYK, with a live preview — and the reasons a colour picked on screen will not print the same way.
The midpoint of black and white is #bcbcbc, not #808080
#808080 looks like it must be halfway between black and white, because 0x80 is
halfway between 0x00 and 0xff. It is not. sRGB values are gamma-encoded — the stored
number is roughly the amount of light raised to the power 1/2.2, not the amount of light.
The encoding exists for a good reason: human vision resolves dark tones far better than bright ones, so spending 256 codes evenly on light would waste most of them on brightnesses nobody can distinguish and leave visible banding in the shadows. Gamma encoding puts the codes where the eye can use them. The cost is that arithmetic on the stored numbers is not arithmetic on light.
So #808080 — “50% grey” — actually reflects
21.6% of the light falling on it, and a
surface that really does return half the light encodes as
#bcbcbc: 60 levels brighter.
Which is why blends and gradients go muddy
| Mixing | Naive average | In light | Apart by |
|---|---|---|---|
| black and white | #808080 | #bcbcbc | 60 levels |
| red and green | #808000 | #bcbc00 | 60 levels |
| blue and yellow | #808080 | #bcbcbc | 60 levels |
| dark red and dark blue | #400040 | #5c005c | 28 levels |
In every case the naive average is the darker answer, and that darkening in the middle is the muddy band you see in a lot of two-colour gradients. Blend red into green by averaging the stored numbers and you get a dark olive; shine both at a wall and you get something much brighter.
The fix is three steps and no guesswork: decode each channel to linear light, do the arithmetic there, encode back. Every one of the 256 channel values round-trips exactly, so nothing is lost by the detour — which is worth knowing before reaching for a colour space that needs more explaining.
How to use
- Enter a colour in any supported format.
- Read the equivalent values in the others.
- Use the preview to confirm it is the colour you meant.
- Treat CMYK values as an approximation, not a match.
Frequently asked questions
What does a hex colour actually mean?
Three pairs of hexadecimal digits giving the red, green and blue channels, each from 00 to FF — that is 0 to 255. So FF0000 is full red, and 808080 is a mid grey with all three channels equal. A fourth pair, where present, is the alpha channel.
When is HSL more useful than RGB?
Whenever you want to modify a colour rather than specify one. HSL separates hue from saturation and lightness, so making a colour lighter means changing one number instead of three. Building a palette of related shades is far easier in HSL, which is why design systems use it.
What is the difference between HSL and HSV?
They handle brightness differently. In HSL, lightness of 100 per cent is always white; in HSV, value of 100 per cent is the most vivid version of the hue. HSV suits picking a colour from a swatch, HSL suits generating tints and shades systematically.
Why does CMYK not match my screen?
Because they are different kinds of colour. Screens emit light and add it together; ink absorbs light and subtracts it. The range of colours ink can produce is smaller, so vivid screen colours — bright greens, deep blues, anything neon — have no printable equivalent and get approximated. Any RGB to CMYK conversion is a best guess without a colour profile for the specific printer and paper.
What are the shorthand three-digit hex codes?
Each digit is doubled, so #F0C is identical to #FF00CC. It only works when all three pairs happen to repeat, which limits it to 4,096 colours out of 16.7 million.
How do I check a colour has enough contrast?
By its relative luminance against the colour behind it, not by how different the hues look. Accessibility guidance asks for a ratio of at least 4.5 to 1 for normal text. Two colours can be visually distinct and still fail, which is why contrast has to be measured rather than eyeballed.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.