Colour Picker
Pick a colour and get it back as five tints and shades, ready to paste into a stylesheet.
Results
What this tool does
Pick the colour with the swatch — your operating system's own picker opens, with an eyedropper on most systems so you can take a colour straight off the screen — and it comes back as a row of five: two steps darker, the colour itself, and two steps lighter. That is the working set for almost anything you are building, because a colour on its own has no hover state, no pressed state and no background.
Formula
keeps the hue and varies the lightness over five steps
Variables
| Symbol | Meaning | Unit |
|---|---|---|
color | Pick a colour | — |
OUT | Tints and shades | — |
S1 | Two steps darker | — |
S2 | One step darker | — |
S3 | The colour itself | — |
S4 | One step lighter | — |
S5 | Two steps lighter | — |
Worked example
- Pick a colour#2e6f9e
- Tints and shades#0e212f #1e4867 #2e6f9e #4994ca #81b5da
- Two steps darker#0e212f
- One step darker#1e4867
- The colour itself#2e6f9e
- One step lighter#4994ca
- Two steps lighter#81b5da
Limitations
- The calculation runs entirely in your browser. The values you type are never sent to a server.
Frequently asked questions
Why five steps of the same colour?
Because one colour is never enough to build anything with. A button needs a darker version for the pressed state and a lighter one for the background it sits on, a chart needs several tones that read as the same family, and a table needs a tint pale enough to stripe rows without shouting. Varying the lightness while holding the hue and saturation still is what keeps all five recognisably the same colour.