Tint & Shade Generator

Every design system needs a color scale. You pick a brand color, then define lighter and darker variants for backgrounds, hover states, borders, text, and disabled states. The question is: how do you derive those variants systematically?

This tool takes any hex color and generates 10 tints (progressively lighter, toward white) and 10 shades (progressively darker, toward black). Click any swatch to copy its hex value.

What Are Tints and Shades?

Tints are created by mixing a color with white. Each step adds more white, making the color progressively lighter until it approaches white at the extreme.

Shades are created by mixing a color with black. Each step adds more black, making the color progressively darker until it approaches black at the extreme.

This is distinct from changing the saturation or hue — tints and shades preserve the hue while varying the lightness by linear interpolation in RGB space. The result is a clean, predictable scale that works well for design system color palettes.

How to Use This Tool

1. Pick your base color using the color picker or type a hex value (e.g. #6366f1).
2. View the tints — 10 steps from near-white down to close to the base color.
3. View the shades — 10 steps from close to the base color down to near-black.
4. Click any swatch to copy its hex value to your clipboard.
5. Copy All HEX Values at once to paste a complete scale into your design tool or CSS.

Building a Design System Color Scale

Most design systems define 10 shades for each base color — numbered 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (or 1000). Tailwind CSS popularized this scale. Here’s how to map the output of this tool to a Tailwind-style scale:

Note that this tool generates evenly spaced linear interpolations. For a perceptually uniform scale, you may want to adjust individual steps manually using the Color Converter to fine-tune HSL lightness values.

Use Cases

Hover and active states: A button at shade 5 (base), hover at shade 6, active at shade 7 gives a clear, consistent interaction pattern.

Background hierarchy: Use tint 1 or tint 2 as a page background, tint 3 for card backgrounds, and the base color for primary buttons.

Text on color: Shade 8 or shade 9 text on tint 1 backgrounds provides high contrast while keeping color consistent with your brand palette.

Border colors: Tint 4 or tint 5 works well as a subtle border on a tint 1 background.

Disabled states: Tint 3 or tint 4 communicates “not interactive” without losing the brand identity.

Color Scale in CSS Custom Properties

Once you have your 20 swatches, define them as CSS custom properties:

:root {
  --color-brand-50:  #eef2ff;  /* Tint 1 */
  --color-brand-100: #e0e7ff;  /* Tint 2 */
  --color-brand-200: #c7d2fe;  /* Tint 3 */
  --color-brand-300: #a5b4fc;  /* Tint 4 */
  --color-brand-400: #818cf8;  /* Tint 5 */
  --color-brand-500: #6366f1;  /* Base */
  --color-brand-600: #4f46e5;  /* Shade 5 */
  --color-brand-700: #4338ca;  /* Shade 6 */
  --color-brand-800: #3730a3;  /* Shade 7 */
  --color-brand-900: #312e81;  /* Shade 8 */
}

Frequently Asked Questions

What is the difference between tints/shades and hue rotation?

Tints and shades only change lightness (by mixing with white or black). Hue rotation changes the color entirely — a rotated blue becomes purple or cyan. For a single-color scale, tints and shades are what you want.

Can I use this for Tailwind CSS?

Yes. The 10-step scale maps directly to Tailwind’s 100–900 range. After generating, paste the hex values into your tailwind.config.js under theme.colors.

How accurate are the hex values?

All calculations are done in RGB space using linear interpolation. The resulting hex values are rounded to the nearest integer per channel. For most design work this is perfectly accurate.

What if I want more than 10 steps?

This tool generates exactly 10 tints and 10 shades, which covers most design system needs. If you need finer granularity, use the Color Converter to manually create intermediate values by adjusting the lightness component in HSL space.

Related Tools

• Color Palette Generator — generate complementary, analogous, and triadic palettes from a base color
• Color Converter — convert between HEX, RGB, and HSL formats
• Color Contrast Checker — verify WCAG contrast ratios between your tints and text
• Color Name Finder — find the closest CSS named color to any hex value