Pick a colour and this tool shows you its complement and a ramp of tints and shades. Those are useful starting points. They are also produced by arithmetic on HSL, and HSL lies about lightness in a way that shapes every palette built on it — which is worth understanding before you trust the output.
HSL lightness is not lightness
Here is the measurement that explains a great deal of frustration. Take six fully saturated colours, all at HSL lightness 50%: yellow, green, cyan, blue, red, magenta. HSL claims they are equally light. They are not, and it is not close.
Measured as actual emitted light, yellow at hsl(60, 100%, 50%) reaches 92.8% of white. Blue at hsl(240, 100%, 50%) reaches 7.2%. The yellow is putting out thirteen times the light of the blue while both are labelled the same lightness. Green sits at 71.5%, red at 21.3%.
The reason is that HSL was designed in the 1970s to be easy to compute, not to model vision. Its lightness axis is the midpoint between the largest and smallest RGB channel — a piece of arithmetic that has nothing to do with how the eye responds. Green contributes about 71% of perceived brightness and blue about 7%, and HSL knows nothing about that.
The practical consequence: a palette built by holding lightness constant and rotating the hue will look wildly uneven. Your yellow will glare and your blue will disappear. Every designer who has built a set of status colours in HSL and wondered why the yellow needs special-casing has met this.
What the complement actually is
The complementary colour here is the hue rotated 180 degrees — blue gives yellow, red gives cyan. That is the standard definition and it is a genuinely useful starting point, because opposite hues do create the strongest possible hue contrast.
Two cautions. The first is that it is a starting point rather than an answer: two fully saturated opposite hues placed against each other is rarely a design, it is a warning sign. The usual move is to take the complement and then desaturate and lighten it heavily, so it works as an accent rather than a competitor.
The second is that "complementary" in a colour wheel sense says nothing about contrast in an accessibility sense. Blue and yellow are complements and they happen to reach 8:1, which is fine for text. Red and cyan are complements too, and they land far lower. If you are choosing a pair for text on a background, the wheel is not the tool — a contrast ratio is.
Tints and shades, and why the steps feel wrong
A tint is the colour mixed toward white, a shade toward black. Generating a ramp by stepping the lightness value in equal increments is the obvious approach, and it produces a ramp whose steps do not feel equal — the light end crowds together and the dark end spreads apart, or the reverse, depending on the hue.
That is the same problem as above: equal steps in HSL are not equal steps in perception. It matters if you are building a design system, where a colour ramp has to work as a scale — where "500 is two steps darker than 300" needs to mean the same thing for your blue as for your yellow.
The modern answer is Oklch, a colour space built specifically so that its lightness axis is perceptually uniform. Adding ten points of lightness in Oklch looks like the same size of step regardless of hue. CSS supports it directly now, and if you are generating a ramp programmatically rather than by eye, it is worth the afternoon it takes to learn.
Common questions
Is anything sent to a server?
No. This tool is marked "client": the colour maths runs in your browser tab and nothing is transmitted.
Why does my yellow look so much brighter than my blue at the same lightness?
Because it genuinely is — measured, thirteen times brighter. HSL lightness is a formula over RGB channels, not a measure of light. The eye is far more sensitive to green and yellow than to blue, and HSL does not model that at all. If you need colours that look equally light, you need a perceptual space like Oklch, or you need to adjust by eye and accept that the numbers will not be tidy.
Can I use the complement as a text colour on the base?
Check the contrast ratio before you do. Complementary means opposite on the wheel, which is about hue and says nothing about whether one is legible on the other. Some complement pairs clear WCAG comfortably and some fail badly. It is a two-second check and it is the only thing that answers the question.
How do I pick a colour off my screen?
Not with this tool — a web page cannot read pixels outside itself, which is a security boundary rather than a missing feature. Chrome and Edge expose an EyeDropper API that some sites use, but the reliable answer is your operating system: macOS has Digital Colour Meter, Windows has the colour picker in PowerToys, and every design tool has one built in.
Why does the same hex look different on my phone?
A hex code says nothing about which colour space it means; the web assumes sRGB. Modern phone screens can display a wider range, and how they handle an untagged sRGB colour varies — some map it faithfully, some stretch it toward their wider gamut and make it more saturated than you intended. Add brightness, ambient light and any night-shift filter, and identical numbers reaching different eyes is the normal case rather than the exception.