Tint & Shade Generator

Generate a complete tint and shade scale from any base color. 9 tints, 9 shades — copy individual HEX codes or export them all as CSS variables.

9 tints · 9 shadesCSS variables exportOne-click copy

① Enter a HEX code or pick a color ② Generate 9 tints & 9 shades ③ Click any swatch to copy

Base Color

Brand presets:

How it works

Enter any HEX color and the tool generates 9 tints (lighter) and 9 shades (darker) by mathematically mixing the base color with white and black. Click any swatch to copy its HEX code.

Tints

A tint is created by mixing the base color with white. The percentage indicates how much white is added — 90% is nearly white, 10% is barely lighter than the original.

Shades

A shade is created by mixing the base color with black. The percentage indicates how much black is added — 90% is nearly black, 10% is barely darker than the original.

Tints and shades — how color scaling works

Tints mix a base color with white using linear RGB interpolation: channel = base + (255 − base) × p. Shades mix with black: channel = base × (1 − p). This generates a smooth 9-tint / 9-shade color ramp — 19 steps total — compatible with the Tailwind CSS 100–900 scale and Material Design tokens. Export all 19 values as CSS custom properties in a :root {} block: --color-tint-10 through --color-shade-90 and --color-base. Ideal for design system tokens, component libraries, and dark/light mode palettes. For accessibility always verify contrast ratios — WCAG AA requires 4.5:1 for normal text; darker shades contrast better on white, lighter tints on dark backgrounds.

Frequently asked questions

A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. Both keep the original hue, but tints appear pastel-like while shades appear deeper and more saturated. A "tone" (mixed with grey) is a third concept not covered here.

The tool uses linear RGB interpolation. For a tint at p%: each channel = base + (255 − base) × p. For a shade at p%: each channel = base × (1 − p). This gives a mathematically even progression from the base toward white (tints) or black (shades).

Because 90% tint means mixing 90% white with 10% base color. The resulting color is dominated by white, leaving only a hint of the original hue. If you want subtle lightening, use 10–30% tints.

Design systems like Tailwind CSS and Material Design use a 9-step scale where 100 is the lightest tint and 900 is the darkest shade, with 500 (or 600) typically representing the base color. This tool generates 9 steps in each direction with mathematically equivalent spacing.

Tints and shades alone do not guarantee accessibility. You still need to verify the contrast ratio (minimum 4.5:1 for normal text, 3:1 for large text under WCAG AA). Darker shades on white or lighter tints on dark backgrounds generally improve contrast. Use the Contrast tool to verify.

Click "Export CSS" to copy all 19 colors as CSS custom properties (--color-tint-90 through --color-shade-90 and --color-base). Paste them into your :root block and reference them anywhere in your CSS with var(--color-tint-30) etc.

Yes — the tool works with any valid 6-digit HEX code (#000000 to #FFFFFF), covering all 16+ million colors in the 8-bit RGB model. All calculations happen instantly in the browser without sending data to a server.

Tints and shades — how color scaling works

Frequently asked questions

Explore Our Network