Skip to main content
Back to Colors generators

Colors

Tints & Shades Scale Generator

Used by developers, writers, and creators worldwide.

A tints and shades scale generator produces a complete lightness spectrum from any base color, stepping from near-white tints down through rich midtones to near-black shades. Design systems in Tailwind CSS, Material Design, and Ant Design all depend on this kind of structured scale — without one, teams end up with mismatched grays, arbitrary hover colors, and contrast ratios that fail WCAG. Pick a hue family or let the tool randomize one, then set how many steps you need. Nine steps maps directly to Tailwind's 100–900 naming convention. The output is a coherent hex scale ready to drop into CSS custom properties, Sass maps, or design token files.

Loading usage…

Free forever — no account required

How to use

  1. Choose your options above
  2. Click Generate
  3. Copy your result

Detailed instructions

  1. Choose a hue family from the dropdown, or leave it on 'random' to get a surprise base color.
  2. Set the Steps in Scale to 9 for a standard Tailwind-style palette, or 11 for extra tonal range.
  3. Click Generate to produce the full tint-to-shade spectrum with hex values for each stop.
  4. Click any color swatch to copy its hex value, or copy the entire scale output for bulk use.
  5. Paste the hex values into your tailwind.config.js, CSS custom properties block, or Figma color styles.

Use Cases

  • •Building a tailwind.config.js custom color with 9 named stops (100–900)
  • •Generating hover, active, and focus-ring shades from a single brand hex
  • •Producing a sequential color ramp for choropleth maps in D3 or Observable
  • •Filling a Figma color style library with a full tonal palette per brand hue
  • •Defining dark-mode surface layers using the four darkest stops in a design token file

Tips

  • →Use stop 50 or 100 as a page background and stop 900 as body text to guarantee strong contrast with minimal effort.
  • →For dark mode, invert the scale mapping — what was stop 100 (light background) becomes stop 900 (dark surface).
  • →If you need a brand-matched scale, generate several random palettes within your target hue family and pick the one whose midpoint hex is closest to your brand color.
  • →Eleven-step scales shine for data visualization: use stops 100 through 900 as a sequential ramp and reserve 50 and 950 for annotation text.
  • →Avoid using stops adjacent to the midpoint (e.g., 400 and 500) as a text-on-background pairing — they rarely pass contrast checks regardless of hue.
  • →When building hover states, shift exactly two stops darker: a button at 500 becomes 700 on hover, keeping the interaction feel consistent across your whole palette.

FAQ

how many steps should a color scale have for a design system

Nine to eleven steps covers almost every use case. Nine maps cleanly to Tailwind's 100–900 naming; eleven (adding 50 and 950) gives extra room at the extremes for subtle backgrounds and near-black text. Fewer than seven steps often leaves gaps between interactive states like hover and focus.

how do I use a tints and shades scale in Tailwind CSS

In tailwind.config.js, add your color under theme.extend.colors as an object with numeric keys — 100 through 900 for a 9-step scale — and paste each hex as the value. Tailwind then exposes utilities like bg-brand-300, text-brand-700, and border-brand-500 automatically.

are tints and shades the same as lightness steps in HSL

Roughly yes. Tints push the HSL lightness value toward 100% (mixing toward white) while shades push it toward 0% (mixing toward black), keeping the hue constant. The midpoint of any generated scale sits closest to the original base color's native lightness.