Tints & Shades Generator - Color Scale Tool

What are tints and shades?

In color theory, a tint is a color mixed with white, producing a lighter version. A shade is a color mixed with black, producing a darker version. Together, they form a color scale: the foundation of every modern design system.

Why use a color scale?

Design systems like Tailwind CSS, Material Design, and Ant Design all use color scales. Instead of choosing a single brand color, you define a range (e.g., 50–950) and use different steps for backgrounds, borders, text, and hover states. This ensures consistent visual hierarchy without picking values ad hoc.

How to use this in Tailwind CSS

Generate 9 shades and assign them to Tailwind weight keys:

• Lightest tint -> 100
• Base color -> 500
• Darkest shade -> 900

Copy each hex into your tailwind.config.js under theme.extend.colors.brand.

Accessibility and contrast

When using a generated color scale in a design system, follow these guidelines to ensure WCAG 2.1 compliance:

• Background fills: steps 50–100 (very light tints) work well as card and surface backgrounds.
• Borders and hover states: steps 200–400 provide visible differentiation without being too dark.
• Text on white: steps 700–900 (dark shades) typically achieve the required ≥4.5:1 contrast ratio for normal text (WCAG AA).
• Large text / UI components: steps 500–600 may achieve the ≥3:1 contrast ratio required for large text and UI components.

Always verify actual contrast ratios with a dedicated contrast checker - different hues at the same step number will have very different luminance values.

Perceptual uniformity

HSL-based color scales (which this tool uses) are not perceptually uniform. The steps may appear to jump unevenly because human vision is not equally sensitive to all hues. Yellow, for example, appears much lighter than blue at the same HSL lightness value.

For design systems where perceptual uniformity matters (e.g., data visualization, accessible UI), consider tools that use OKLCH or CIELAB color spaces, such as Radix UI Colors, Tailwind CSS v4's color system, or the open-source Huetone tool.

Named vs. numbered scale conventions

Two naming conventions dominate design system color scales:

• Numbered (Tailwind-style): 50 / 100 / 200 / … / 900 / 950. Scales well for large design systems with many colors; easy to add intermediate steps. Recommended for new design systems.
• Named (legacy): primary-light / primary / primary-dark. Simpler for small projects but hard to extend when you need more granularity.