Tints and Shades Generator
From one colour, get its tints (towards white), shades (towards black) and tones (towards grey), plus a 50–950 scale, with code in HEX, RGB, HSL, CSS, SCSS, JSON or Tailwind.
Click a swatch to copy its HEX code. The PNG image carries a small KSPNAI signature at the bottom right.
Everything is computed in your browser: nothing is uploaded.
About this tool
The tints and shades generator takes one colour in three directions: tints, made by adding white, shades, made by adding black, and tones, made by adding grey. You also get a scale numbered 50 to 950, handy for a web project or brand guidelines.
Choose the number of steps (2 to 20) and the blending mode: RGB, the classic blend, or OKLab, which gives steps that look more even. Click a swatch to copy its code, then export the whole set as HEX, RGB, HSL, CSS variables, SCSS, JSON or Tailwind, or as a PNG image.
- Tints, shades and tones of one colour
- 2 to 20 steps per row
- RGB or OKLab blending
- Tailwind-style 50 to 950 scale
- HEX, RGB, HSL, CSS, SCSS, JSON, Tailwind v3 and v4 code
- One-click swatch copy, PNG image and share link
How to use it
- Pick the base colour or type its HEX code.
- Set the number of steps and the blending mode.
- Click a swatch to copy its code.
- Choose a code format and copy it, or download the PNG image.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is the colour mixed with white, a shade the colour mixed with black, and a tone the colour mixed with grey.
Why choose OKLab?
OKLab is a colour space designed around human perception: steps between colours look more even than with an RGB blend.
How is this different from the Tailwind shades generator?
That one only creates the 50–950 scale; here you also get full rows of tints, shades and tones, with more formats.
Are my colours sent anywhere?
No, everything is computed in your browser.