Tints & Shades Generator - Color Scale Tool

How to use this tool

1. Enter a base color. Type a hex code or use the color picker to choose your base color.
2. Set step counts. Choose how many tint and shade steps you want (1–20 each).
3. Copy the colors. Click a swatch or Copy all for hex values, or copy the generated 50–950 scale as CSS variables or a Tailwind config snippet.

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

The export buttons create a CSS variables block or a pasteable Tailwind config object with the conventional 11 keys: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The mapping puts the lightest tint at 50, the base at 500, and the darkest shade at 950.

• Lightest tint -> 50
• Base color -> 500
• Darkest shade -> 950

The other keys on each side are assigned by evenly sampling the generated tint and shade stops. If you generate fewer than five stops on one side, the nearest available colors repeat to fill its five keys. This is a convenient way to name an arbitrary scale; it does not recreate Tailwind's canonical palette. The Tailwind export includes the values under theme.extend.colors.brand, and the CSS export writes matching --brand-* custom properties.

Accessibility and contrast

The exported numbers are naming positions, not contrast scores. Treat these as starting points and measure each foreground/background pair to check WCAG 2.1 contrast:

• Background fills: keys 50–100 (the lightest generated tints) can be tested as card and surface backgrounds.
• Borders and hover states: keys 200–400 provide intermediate tints to test for visible differentiation.
• Text on white: keys 700–950 are darker candidates, but check for the required ≥4.5:1 contrast ratio for normal text (WCAG AA).
• Large text / UI components: keys 500–600 may meet the ≥3:1 contrast ratio required for large text and UI components; verify the actual pair.

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

This tool mixes each sRGB channel linearly toward white for tints or black for shades, then rounds the channels to byte values. This RGB channel mixing is simple and predictable, but it is not perceptually uniform: equal mix ratios can look uneven because people perceive different hues and lightness levels differently. Yellow, for example, can appear much lighter than blue at the same numeric mix ratio.

The export's 50–950 labels only organize the generated ramp; they do not indicate equal perceptual spacing, and this tool does not use HSL. For design systems where perceptual uniformity matters, such as data visualization or accessible UI, consider a scale built with 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 (50–950 convention): 50 / 100 / 200 / … / 900 / 950. Scales well for large design systems with many colors; easy to add intermediate steps. The export uses these familiar keys as names, without reproducing Tailwind's canonical colors.
• Named (legacy): primary-light / primary / primary-dark. Simpler for small projects but hard to extend when you need more granularity.