Skip to main content
Back to Colors generators

Colors

Tint & Shade Scale Generator

Used by developers, writers, and creators worldwide.

A tint and shade scale generator builds a complete color ramp from a single base hue, producing every value from near-white tints to near-black shades in one click. Design systems rely on exactly this kind of mathematically spaced scale for button states, text hierarchies, card backgrounds, and dark mode surfaces. Hand-picking hex codes produces uneven perceptual jumps; generating them keeps every step consistent. Two controls shape the output. Steps sets the number of swatches — 7 suits most component libraries, while 9 or 11 gives finer contrast resolution for data visualization or WCAG audits. Saturation shifts the entire ramp from near-neutral to vivid, letting you match an existing palette's energy without editing individual values. Every swatch ships with its hex code ready to paste into Figma tokens, CSS custom properties, or a Tailwind config.

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. Set the Steps slider to the number of swatches your design system needs, typically 7 for most UI palettes.
  2. Adjust the Saturation percentage to match the vibrancy of your existing palette — lower for neutrals, higher for vivid accents.
  3. Click Generate to produce a new random base hue and render the full tint-to-shade scale as a grid of hex-labeled swatches.
  4. Click any swatch or its hex code to copy the value, then paste directly into your CSS, Figma token, or config file.
  5. Regenerate repeatedly until the base hue falls in the range you need, then record the hex values you want to keep.

Use Cases

  • •Generating a 7-step Tailwind-style token scale (50–900) to drop into tailwind.config.js
  • •Building WCAG AA-compliant button states by pairing dark text steps against light background steps
  • •Exploring brand accent hues in Figma before committing to a design system's primary color
  • •Sourcing evenly spaced hex values for a sequential bar chart palette in D3 or Observable
  • •Setting up CSS custom properties for a dark mode surface hierarchy from --surface-1 to --surface-5

Tips

  • →Set steps to 9 and map them to Tailwind's 100–900 naming convention for a drop-in replacement palette.
  • →Keep saturation between 55–70% for UI backgrounds; values above 80% make light tints too intense for large surface areas.
  • →Use the two darkest steps for text and the two lightest for page backgrounds to guarantee contrast without a separate color picker.
  • →Generate three or four scales at the same saturation level to build a multi-color system where every hue shares the same tonal energy.
  • →For dark mode, invert usage: assign the lightest step to body text and the darkest step to the page background, keeping the mid-steps for interactive elements.
  • →If the random hue lands near orange or yellow, bump saturation down by 10–15% — those hues read as more saturated than blues or purples at the same percentage value.

FAQ

what's the difference between a tint and a shade in a color scale

A tint mixes the base hue with white, making it progressively lighter. A shade mixes it with black, pushing it toward dark. In a full scale, the base hue sits near the center, lighter tints extend toward one end, and darker shades toward the other — giving you the full range a UI needs.

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

Seven steps covers most cases: you get room for background, surface, border, placeholder, body text, heading, and interactive states without the scale becoming unwieldy. Push to 9 or 11 when you need tighter contrast control — for example, fine-grained WCAG contrast pairings or a sequential data visualization palette.

why does my tint scale look washed out or grayish at the light end

Low saturation causes lighter steps to bleed toward near-white before reaching mid-range, losing the hue entirely. Try bumping saturation above 65% — chromatic palettes typically need 65–80% to stay recognizable through the lightest tints. If the scale still looks flat, generate again for a different base hue with naturally higher chroma.