Colors

Tints and Shades Generator

A tints and shades generator lets you build a complete color scale from a single hex value, producing lighter tints and darker shades in one click. Tints are created by mixing the base color with white, while shades blend it with black — together they form a spectrum usable across backgrounds, borders, text, hover states, and focus rings. This tool outputs a Tailwind CSS-style numeric scale with a configurable number of steps, so you can dial in a 5-step minimal palette or an 11-step exhaustive one depending on your project's needs. Design systems live and die by consistent color variation. Without a structured scale, designers pick ad-hoc lighter or darker values that drift over time, creating visual inconsistency across components. Generating the full scale upfront — with mathematically even steps — eliminates guesswork and ensures your 100-level background and your 800-level text always feel like they belong to the same family. This generator is particularly useful when you're working from a brand color that was defined by a marketing team without accompanying scale documentation. Paste the hex in, choose your step count, and you immediately have tokens ready to name and drop into Figma, Tailwind config, or a CSS custom property file. The output mirrors the convention designers and developers already know, so handoff is frictionless.

How to Use

  1. Enter your base color as a hex value (e.g. #3b82f6) in the Base Color field.
  2. Set the Number of Steps to match your design system — 9 for a Tailwind-style scale, 5 for a minimal palette.
  3. Click generate to render the full color grid from lightest tint to darkest shade.
  4. Click any swatch in the output grid to copy its hex value to your clipboard.
  5. Paste the hex values into your Tailwind config, CSS variables file, or Figma color styles.

Use Cases

  • •Generating a Tailwind config color scale from a custom brand hex
  • •Creating background-to-text color ramps for dark mode themes
  • •Mapping hover, active, and focus states to consistent shade steps
  • •Producing accessible foreground-background pairs from a single primary color
  • •Building color token sets for Figma Variables or Style Dictionary
  • •Filling in missing mid-range tones for an inherited brand palette
  • •Generating muted tint backgrounds for card and alert components
  • •Prototyping a full UI color system before committing to a specific brand hue

Tips

  • →Start with your brand's primary action color as the base — it usually lands near step 5, giving balanced tints and shades on either side.
  • →For neutral gray scales, desaturate your brand color slightly before generating — this produces warm or cool grays that harmonize with your palette rather than clashing.
  • →Use a 9-step scale for primary and secondary colors, but drop to 5 steps for accent or semantic colors (error, success) to keep your token set manageable.
  • →Compare your step 100 and step 900 against pure white and black — if the contrast gap is too small, increase your step count to get more extreme endpoints.
  • →Generate scales for your primary, neutral, and semantic colors in one session and name them consistently (e.g. brand-100 through brand-900) before importing into any tool.
  • →If the middle step looks too saturated next to UI chrome, try shifting your base color 5-10 degrees in hue before regenerating — cooler bases often produce cleaner-feeling scales.

FAQ

What is the difference between a tint and a shade?

A tint lightens a color by mixing it with white, shifting it toward pastel or near-white territory. A shade darkens it by mixing with black, pushing it toward deep or near-black tones. Together they form a continuous ramp: tints occupy the low-numbered steps in a scale, shades the high-numbered ones, with the original base color sitting roughly in the middle.

How does Tailwind CSS number its color scale?

Tailwind uses a numeric scale from 50 to 950 where lower numbers are lighter tints and higher numbers are darker shades. The 500 value is typically close to the original base color. When you generate a 9-step scale here, the output maps naturally to Tailwind's 100-through-900 range, making it straightforward to paste values directly into your tailwind.config.js.

How many steps should a design system color scale have?

Seven to eleven steps covers most UI needs. A 9-step scale gives you light backgrounds (steps 1-2), subtle fills and borders (3-4), primary interactive states (5), hover and pressed variants (6-7), and strong text or icon colors (8-9). Fewer steps work for simple projects; more steps give finer control in dense design systems with many component states.

Can I use this to generate tints and shades from a brand color?

Yes. Paste your brand hex into the Base Color field exactly as it appears in your brand guidelines, set the number of steps you need, and click generate. The tool calculates even tint and shade intervals automatically, so you get a scale that is mathematically consistent rather than visually guessed. You can then name the steps and document them as official brand tokens.

Are these tints and shades accessible for text contrast?

The generator produces the scale, but contrast ratios depend on which steps you pair. As a rule, steps 1-3 work as backgrounds against dark text (steps 7-9) and vice versa. Use a contrast checker like WebAIM's Contrast Checker to verify WCAG AA or AAA compliance for any foreground-background combination before committing to it in production.

What is the difference between tints/shades and tones?

Tints add white, shades add black, and tones add gray — a mix of both white and black. Tones produce more muted, desaturated variants without going fully light or dark. Most design system scales use tints and shades because they are predictable and map cleanly to light-to-dark ramps, while tones are more common in artistic or paint-based color systems.

Can I use the generated hex values directly in CSS or Tailwind?

Yes. Each step in the output is a valid hex color value you can copy directly into a CSS custom property, a Tailwind config color object, a Sass variable, or a Figma color style. No conversion is needed. If your project uses HSL or RGB formats, run the hex through a converter after generating the scale.

Why does the base color not always land exactly in the middle of the scale?

The tint-to-shade split is calculated relative to the base color's luminance. A very dark base color will have more tint steps than shade steps to fill the full range. Likewise, a very light base skews toward more shades. This keeps the output perceptually distributed rather than mechanically centered, which produces more usable light and dark extremes.