Colour Converter
Tints and shades
Same hue and saturation, lightness stepped from 10% to 90%. Click any swatch to load it.
Which format for which job
- HEX — the default in CSS and design tools. Compact, but says nothing about the colour to a reader.
- RGB — how a screen actually mixes it, and the easiest to reason about when working with pixels.
- HSL — hue, saturation, lightness. The one to use when building a palette, because a lighter version is the same hue at a higher lightness.
- HSV — what most design software shows in its picker.
- CMYK — print. The value here is the standard arithmetic conversion, not a profiled one.
Building a palette
Pick your main colour, then read its HSL. Keeping the hue and saturation and changing only the lightness gives a set of tints and shades that genuinely belong together — the strip above is exactly that. Guessing at HEX values rarely produces the same coherence.
Share this tool with friends
Free to use, no sign-up, works on any phone.
Frequently Asked Questions
HEX for a fixed colour, HSL when you want to build variations. HSL keeps the hue separate from lightness, so a set of tints is just the same hue at different lightness values instead of three numbers you have to guess at.
Because true CMYK depends on the ink, the paper and a colour profile. The conversion here is the standard arithmetic one, which is right for a rough idea and wrong for a print run — for that, ask your printer for a profiled conversion.
Both start from a hue. HSL runs from black through the pure colour to white, so 50% lightness is the vivid one. HSV runs from black to the pure colour, and full value with full saturation is the vivid one. Design tools tend to use HSV; CSS uses HSL.
It is opacity, from 0 for invisible to 1 for solid. In HEX it becomes two extra characters at the end — #2563eb80 is that blue at about half opacity — which every current browser understands.
No. Everything is arithmetic done in your browser, so an unreleased brand palette stays on your device.