How to use the Shades & Tints Generator
- Enter or pick a base color.
- Choose the number of steps.
- Click any swatch to copy it, or copy a whole row as CSS or SCSS variables, Tailwind colors, JSON or a HEX list.
- Open any row in the palette generator to keep editing it. Your base color and settings are remembered.
Shades & Tints Generator features
- Tints, shades and tones of any color in one view
- 3 to 20 evenly spaced steps per row
- Perceptual OKLab mixing for even lightness steps, or plain RGB
- Copy rows as CSS or SCSS variables, Tailwind colors, JSON or a HEX list
- Open any row in the palette generator
- Base color and settings remembered in your browser
Generate lighter and darker versions of any color
The shades and tints generator takes one base color and creates a full family of related colors from it: lighter tints, darker shades and softer tones, each in evenly spaced steps. Enter a HEX, RGB or HSL code (or pick a color visually) and you get up to 20 variations per row, ready to copy individually or export as a set.
It is the quickest way to get background colors, borders, hover states, disabled states and text colors that all clearly belong to the same color, without guessing values by hand.
Tints, shades and tones explained
| Term | How it is made | Effect | Typical use |
|---|---|---|---|
| Tint | Color + white | Lighter, softer, more pastel | Backgrounds, highlights, badges, selected rows |
| Shade | Color + black | Darker and deeper | Hover and pressed states, text, borders, dark themes |
| Tone | Color + gray | Less saturated, more muted | Subtle UI, calm editorial designs, secondary elements |
In everyday speech people often say "shades of blue" for any variation of blue, but in color theory the three terms have these precise meanings. Together they let you build a whole palette from a single brand color.
Perceptual steps for even results
If you simply mix a color with white in RGB, the first few steps look almost the same and then the color washes out quickly. With the Perceptual (OKLab) option turned on, the generator mixes in OKLab, a color space designed around how people see. Each step then looks like an equal jump in lightness, which gives cleaner, more usable scales, especially for blues and purples that tend to shift toward violet or gray in RGB.
Turn the option off if you need values that match a tool that mixes in plain RGB.
How many steps to use
- 5 steps for a simple light, medium and dark set.
- 9 to 11 steps for a design-system scale similar to Tailwind's 50–950 or Material Design's 50–900.
- 15 to 20 steps when you need fine control, such as data visualisation or gradients.
If you specifically want a Tailwind-style scale with the usual 50, 100 … 950 names, the Tailwind Palette Generator builds one in OKLCH and exports it straight to your config.
Export the whole scale
Click any swatch to copy its HEX code, or copy a whole row in the format you need:
- CSS variables such as
--tint-1: #DCEBFF; - SCSS variables for Sass projects
- Tailwind colors for the
colorssection of your config - JSON for design tokens and scripts
- A HEX list to paste into Figma, Canva or a spreadsheet
Any row can also be opened in the Color Palette Generator to lock, rearrange and save it. Your base color, number of steps and options are remembered in your browser.
Tips for using shades and tints in a design
- Use one of the lightest tints as a page or card background and a mid shade for text on it. Check the pair with the Contrast Checker.
- For buttons, take your base color for the default state and the next one or two shades for hover and pressed.
- Tones are great for borders and dividers because they sit quietly next to the base color.
- Need a blend between two different colors rather than toward white or black? Use the Color Mixer.
Shades & Tints Generator: frequently asked questions
What is the difference between a shade and a tint?
A shade adds black to make a color darker. A tint adds white to make it lighter.
How many steps should I use?
Ten steps is a common choice for design systems. Use fewer for a simple palette and more when you need fine control.
What is a tone in color theory?
A tone is a color mixed with gray. It keeps roughly the same lightness but becomes less saturated, which gives a softer, more muted look.
How do I make a color darker without it looking muddy?
Keep Perceptual (OKLab) mixing on. It darkens in even visual steps and avoids the dull, grayish middle values that plain RGB mixing with black can produce.
Can I use the scale in Tailwind CSS?
Yes. Copy a row as Tailwind colors and paste it into the colors section of your config. For the standard 50–950 names, use the Tailwind Palette Generator.
How do I find lighter shades of a hex color?
Enter the hex code as the base color. The tints row lists lighter versions from your color up to near white; click any of them to copy its hex code.