How to use the colour converter
When you're building a web page, writing CSS or working from a design file, converting between colour formats is a constant chore. Design software hands you HEX; in CSS you might want HSL so you can lighten or darken easily; print work needs CMYK; and front-end frameworks like their variables in RGB. Converting by hand is slow and error-prone, so this tool puts every common format on one page — change one and the rest follow.
What the five formats are
- HEX (hexadecimal): the most universal notation in web and design tools, written like
#3b82f6. Two characters per colour, in the order red, green, blue, each ranging from 00 to ff. First choice for CSS. - RGB (red green blue): splits the colour into three channel values from 0 to 255, mirroring how a screen emits light. CSS also accepts
rgb(59, 130, 246). - HSL (hue / saturation / lightness): hue is an angle on the colour wheel from 0 to 360, saturation is vividness from 0 to 100%, lightness from 0 to 100%. For "make this blue darker but keep the hue", HSL is the easiest — just change the lightness.
- HSV / HSB (hue / saturation / brightness): similar in spirit to HSL but with a different definition of brightness. This is the "HSB" you see in design tools like Photoshop and Sketch.
- CMYK (cyan / magenta / yellow / key): the subtractive model used in printing. Emissive RGB can't be printed; a print shop wants CMYK. Note that the values here are a formula conversion — real printing also depends on paper and ink, so treat them as a guide.
A few traps people fall into
HSL lightness of 50% doesn't mean "normal". Many people assume setting lightness to 50% gives the original colour, but in HSL, L=50% is simply the most vivid point for that hue. Pure red #ff0000 is hsl(0, 100%, 50%), while pure white is hsl(0, 0%, 100%). To generate a light-to-dark scale within one hue, varying L is the most effective lever.
CMYK back to RGB introduces drift. CMYK is four-channel subtractive, RGB is three-channel additive, and their gamuts don't coincide. CMYK colours like pure cyan and pure magenta simply can't be shown on screen, and equally a highly saturated green on screen can't be printed. Treat the screen version as the source for design work, and have the printer confirm colour shift before you hand over.
Short HEX has a precondition. #fff is shorthand for #ffffff, and it only works when each pair of characters is doubled. #3b82f6 cannot be shortened to three digits.
Don't forget alpha. HEX can be written with eight digits (like #3b82f680), where the last two are the alpha channel; in CSS that's rgba(59,130,246,0.5). This tool works with six-digit HEX without transparency; specify opacity separately.
Why contrast matters
WCAG (the Web Content Accessibility Guidelines) sets clear requirements for text contrast: normal body text should reach at least 4.5:1, and large text (18pt and up, or 14pt bold) at least 3:1. Insufficient contrast makes content unreadable for users with low vision or anyone looking at a phone in bright sunlight, and it also hurts a page's accessibility score and search performance. This tool calculates the contrast between the foreground and background colours and tells you whether it passes.
Frequently asked questions
Why don't the CMYK percentages add up to 100%?
In theory the four channels should sum to about 100% (it's a subtractive model — four inks layered absorb all light to make black), but in practice the total often comes out above or below. One reason is that real inks aren't pure; another is that the industry uses algorithms like GCR/UCR (grey component replacement) to optimise the black plate, saving ink and improving print quality. This tool gives the pure formula conversion, without those process adjustments.
What exactly is the difference between HSL and HSV?
The key difference is how "lightness" and "brightness" are defined. In HSL, L goes from black (0%) through the saturated colour (50%) to white (100%); in HSV, V goes from black (0%) straight to the most vivid colour (100%), with no "towards white" segment. So the same colour gets different numbers in the two models — check which one your software uses. The H, S and B in Photoshop's colour picker are HSV.
How is the colour scale generated?
This tool steps lightness evenly from 95% down to 5% in the HSL model, holding hue and saturation constant, then converts back to HEX. The result is a scale within one hue running light to dark, which suits button hover states, layered card backgrounds and chart gradients. If your base colour has very low saturation (close to grey), the steps will be less noticeable.
What does a contrast ratio of 21:1 mean?
That is the theoretical maximum, achieved by pure black on pure white (#000000 on #ffffff). It's calculated as the ratio of relative luminance: (lighter + 0.05) / (darker + 0.05). The higher the ratio, the stronger the contrast. For everyday web work, aim for 7:1 or better on body text and at least 4.5:1 for text on buttons.
Is #0000ff different from #0000FF?
No — HEX colour codes are case-insensitive. It's just that teams usually agree on lowercase to keep style linters happy.