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 saves hours of manual lightness-tweaking by producing a complete, evenly distributed color ramp from a single base hue. Designers building Tailwind configs, Figma token sets, or CSS custom property files all need the same thing: a reliable progression from near-white to near-black that holds one hue constant. This tool gives you that in seconds. Set the number of steps (10 matches Tailwind's convention; fewer suits quick mockups) and pick a hue from 0 to 359, or leave it on random to discover palettes you wouldn't have chosen manually. The output is ready to paste straight into a design system.

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 Number of Steps to 10 for a standard scale, or adjust down to 5 for a minimal palette.
  2. Enter a Base Hue between 0 and 359 to match your brand color, or leave it at -1 to generate a random hue.
  3. Click Generate to produce the full tint-to-shade scale ordered from lightest to darkest.
  4. Review the scale and regenerate with a new random hue if the color direction doesn't suit your project.
  5. Copy the hex values in order and paste them into your CSS custom properties, Tailwind config, or Figma color styles.

Use Cases

  • •Populating a custom Tailwind CSS color config with a 10-step primary palette
  • •Generating hex tokens for a Figma color style library before a design sprint
  • •Mapping light tints (steps 1–3) to page backgrounds and deep shades (steps 8–10) to body text for WCAG AA contrast
  • •Exploring random accent hues to find a secondary brand color that pairs with an existing primary
  • •Supplying a full CSS custom property ramp (--color-brand-100 to --color-brand-1000) for a component library

Tips

  • →Generate three scales at the same hue but offset by 30 degrees each to build a harmonious triad design system.
  • →Use 5-step mode to prototype quickly, then switch to 10 steps before handing off to developers.
  • →Steps 2-3 make excellent card and surface backgrounds that stay on-brand without overpowering content.
  • →If two adjacent steps look identical on screen, reduce total steps — the scale has more resolution than your use case needs.
  • →For neutral grays with a warm or cool cast, enter a hue near 30 (warm) or 220 (cool) instead of 0.

FAQ

how do I turn my brand hex into the right base hue number

Convert your brand hex to HSL using any browser DevTools color picker or a tool like oklch.com, then read the H value (0–359). Enter that into the base hue field and the generator keeps that hue fixed while stepping lightness, so the mid-range output should closely approximate your original brand color.

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

Ten is the standard — it maps directly onto Tailwind's 100–950 convention and gives you enough distinct values for backgrounds, borders, secondary text, primary text, and interactive states. Use 5 or 6 steps for prototypes or illustration palettes where fewer tones keep things simple.

what's the difference between a tint-shade scale and tailwind's built-in colors

This generator holds the hue fixed and only shifts lightness, which produces clean, predictable token values. Tailwind's built-in palettes nudge the hue slightly as they get lighter or darker for a more organic look. Fixed-hue scales are better for systematic design tokens; hue-shifted scales feel more natural in freeform design work.