Skip to main content
Back to Colors generators

Colors

Color Tint & Shade Scale Generator

Used by developers, writers, and creators worldwide.

A color tint and shade scale generator solves one of the most tedious tasks in UI design: building a coherent range of lighter and darker variants from a single base color. Instead of eyeballing hex values, you get a structured ramp — from near-white tints to near-black shades — in seconds. Designers use this when setting up Tailwind CSS custom palettes, defining design tokens, or onboarding a new brand color into an existing system. Set the number of steps (10 works for most systems) and dial in your saturation to match brand guidelines. Keeping saturation between 55% and 70% avoids the neon tints and muddy darks that plague hand-picked scales. The result maps cleanly into CSS custom properties or Figma styles.

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 in Scale to match your design system — 10 or 11 steps covers most use cases.
  2. Adjust the Saturation slider to align with your brand color's intensity, starting around 65% for neutral palettes.
  3. Click Generate to produce a new random base hue with a full scale applied across your chosen steps.
  4. Review the scale from lightest to darkest and regenerate until the base color matches your target hue family.
  5. Copy individual hex values into your design tokens file, CSS custom properties, or Figma color styles.

Use Cases

  • •Generating a 10-step custom color scale for a Tailwind CSS config file
  • •Creating design token values for light and dark mode surface colors in Figma
  • •Producing hover, active, and disabled state variants for a React component library
  • •Mapping a new brand hue into an existing Material Design 3 color scheme
  • •Auditing a legacy palette by comparing hand-picked hex values against a mathematically consistent ramp

Tips

  • →If you need a specific hue rather than a random one, generate repeatedly — the hue randomizes each time, making it easy to land near your target quickly.
  • →Use step counts divisible by your token naming convention: 10 steps maps neatly to 100-1000, while 11 steps mirrors Tailwind's 50-950 scale.
  • →Lower saturation to 40-50% for neutral grays with a color cast — useful for backgrounds that feel brand-adjacent without competing with content.
  • →Cross-check your darkest two stops against white text for AA contrast before committing them as text colors in your system.
  • →Generate scales for your primary, secondary, and semantic colors (success, warning, error) using the same saturation value to keep the palette feeling unified.
  • →In Figma, import the full scale as a color collection so every component automatically inherits the right stop when you swap the library color.

FAQ

how many steps should a design system color scale have

Most production systems use 9 to 11 steps — enough to cover subtle backgrounds, borders, body text, and high-contrast labels without gaps. If your UI has many interactive states (hover, active, focus, disabled), bump to 12 or 13 to avoid one-off values. Ten steps is the default here because it maps cleanly onto Tailwind's naming convention with minimal renaming.

what saturation should I use for a ui color scale

A saturation between 55% and 70% produces the clean, professional ramps you see in Tailwind and Material Design. Above 80%, light tints go neon and dark shades look muddy; below 40%, the scale reads as near-gray. Start at the default 70% and nudge down until the lightest stop looks neutral rather than vivid.

can I use these hex values directly in css custom properties

Yes — copy each stop and assign it to a variable like --color-brand-100 through --color-brand-900, then reference those variables in your component styles instead of hard-coding hex values. This makes a future rebrand a single-file change. Avoid opacity-based shortcuts; they shift appearance on colored backgrounds and break design token consistency.