Shades and Tints Generator

Generate an evenly balanced scale of lighter tints and darker shades from any brand color.

Base Color

Steps (10)

Complete Gradient Scale (21 swatches)

#EBF1FD

#D7E3FB

#C4D4FA

#B0C6F8

#9CB8F6

#88AAF4

#749CF2

#608EF0

#4D7FEF

#3971ED

#2563EB

#225AD6

#1E51C0

#1B48AB

#183F96

#143680

#112D6B

#0D2455

#0A1B40

#07122B

#030915

Tints (+ White)

#EBF1FD

Tint 188% lum

#D7E3FB

Tint 276% lum

#C4D4FA

Tint 366% lum

#B0C6F8

Tint 456% lum

#9CB8F6

Tint 548% lum

#88AAF4

Tint 641% lum

#749CF2

Tint 734% lum

#608EF0

Tint 828% lum

#4D7FEF

Tint 923% lum

#3971ED

Tint 1019% lum

Shades (+ Black)

#225AD6

Shade 113% lum

#1E51C0

Shade 210% lum

#1B48AB

Shade 38% lum

#183F96

Shade 46% lum

#143680

Shade 54% lum

#112D6B

Shade 63% lum

#0D2455

Shade 72% lum

#0A1B40

Shade 81% lum

#07122B

Shade 91% lum

#030915

Shade 100% lum

Tonal Architecture & Design System Engineering Guide

Mastering Tonal Scales, Monochromatic Tints & Shades for UI Systems

A single brand color is only the starting point. To build a rich, production-ready user interface, designers and frontend engineers need a structured, mathematically coherent spectrum of lighter tints and darker shades. Tonal ramps establish visual hierarchy, provide clear interactive feedback states, and power seamless light and dark mode theme switching.

Tints, Shades & Tones: The Core Definitions

In classical color theory and modern digital design, altering a base hue follows three fundamental operations:

Base + White (#FFFFFF)Lightness +

Tints (Lighter Steps)

Tints increase overall luminosity while softening chromatic intensity. In digital UI design, tints (such as 50, 100, 200) serve as gentle surface backgrounds, table row alternate striping, alert container tints, and subtle badge backdrops.

Base + Black (#000000)Lightness -

Shades (Darker Steps)

Shades decrease luminosity toward deep, saturated anchors. Shades (such as 600, 700, 800, 900) are essential for hover and pressed button states, high-contrast headings, borders, and dark mode background canvases.

Base + Gray (#808080)Saturation -

Tones (Desaturated Steps)

Tones reduce chroma purity without pushing toward stark white or black. Tones produce sophisticated, earthy aesthetics, vintage editorial palettes, and muted neutral grays tinted with subtle brand personality.

The 9-Step Tonal Scale Architecture in Design Systems

Enterprise design systems (such as Tailwind CSS, Material Design 3, and Radix UI) rely on a standardized 9-step tonal ramp. Here is how each step maps to specific user interface components:

Steps 50 – 200

Subtle Surfaces & Structural Dividers

50: Page canvas tints, subtle card backgrounds, light alert banners.
100: Selected menu item backdrops, hover table rows.
200: Card container border strokes, divider rules, disabled button fills.

Steps 300 – 600Base 500

Interactive Brand & Focal Points

300–400: Secondary icons, decorative illustrations, placeholder states.
500: The core brand anchor, primary action buttons, active navigation indicators.
600: Primary button hover state, focused input outlines.

Steps 700 – 950

High-Contrast Typography & Dark Canvases

700: Button active/pressed states, high-contrast accessible text on white.
800: Section headings, primary body typography in light mode.
900–950: Dark mode background canvases, sidebar headers.

Accessibility & WCAG 2.2 Pairing Rules Across Tonal Scales

A major advantage of using a structured tonal scale is the ability to guarantee WCAG 2.2 AA and AAA compliance through simple mathematical step distance rules:

Light Mode Text Pairing Rule

Step Distance ≥ 600

Placing text on a 50 or 100 tint background requires a 700, 800, or 900 shade to reliably achieve the 4.5:1 ratio required for WCAG Level AA body text.

Dark Mode Inversion Rule

Symmetrical Contrast Mapping

On a 900-shade dark surface, text using a 50 or 100 tint achieves over 10:1 contrast ratio, passing Level AAA enhanced criteria while eliminating optical glare.

Verify custom foreground and background pairings instantly in our WCAG 2.2 Contrast Checker.

Developer Integration: Exporting Tonal Scales to Code

Easily copy your tonal steps directly into modern frontend frameworks:

CSS Custom Properties

--color-primary-50: #eff6ff;

--color-primary-100: #dbeafe;

--color-primary-500: #3b82f6;

--color-primary-700: #1d4ed8;

--color-primary-900: #1e3a8a;

Tailwind CSS Config

50: '#eff6ff',

100: '#dbeafe',

500: '#3b82f6',

700: '#1d4ed8',

900: '#1e3a8a',

Explore Connected Color Suite Tools

Expand your creative workflow with our suite of interactive color tools:

Color Picker

Sample and convert HEX, RGB, HSL, and CMYK color codes.

Palette Generator

Generate 5-color optical harmonies with spacebar randomization.

Contrast Checker

Verify WCAG 2.2 AA & AAA contrast ratios between any two colors.

Gradient Generator

Craft multi-stop linear and radial CSS gradients with live preview.

Image Color Picker

Extract dominant palettes and sample pixel colors from images.

Color Converter

Batch convert between HEX, RGB, HSL, HSV, CMYK, and LAB codes.

Curated Palettes

Browse 800+ categorized color schemes for web, UI, and branding.

CSS Gradients

Explore multi-stop gradient blends with instant CSS code copying.

Shades, Tints & Tonal Scales FAQs

Clear, authoritative answers to common questions regarding tonal scales, monochromatic ramps, WCAG contrast compliance, and design token integration.

What is the difference between a shade, a tint, and a tone in color theory?

A tint is created by adding pure white to a base hue, increasing its lightness while reducing saturation toward pastel tones. A shade is created by adding pure black to a base hue, decreasing lightness toward dark, deep anchors. A tone is created by adding pure gray (or both black and white simultaneously), which desaturates the chroma and creates muted, sophisticated neutrals without drastically altering overall lightness.

Why do modern UI design systems use a 9-step (50 to 900) tonal color scale?

A 9-step tonal ramp (popularized by Tailwind CSS and Material Design) provides predictable, standardized steps for every UI role: 50–100 for subtle card backgrounds and hover surfaces, 200–300 for border strokes and dividers, 500 for primary brand anchors and buttons, 600–700 for interactive hover and pressed states, and 800–900 for high-contrast typography and dark mode canvases.

How does this tool calculate mathematically balanced shades and tints?

Our generator uses smooth linear interpolation across normalized RGB color channels. For tints, each channel linearly transitions from the base color value toward 255 (white). For shades, each channel linearly transitions from the base value down to 0 (black). This ensures uniform mathematical stepping without clipping or color channel overflow.

How can I guarantee WCAG 2.2 contrast compliance using a tonal ramp?

Follow the 'Rule of 500': pairing any light tint from the 50–100 range with a dark shade from the 700–900 range almost always yields a contrast ratio exceeding 7:1, easily passing WCAG 2.2 Level AAA standards. For normal text against pure white (#FFFFFF), always select a shade from the 700–900 range (which typically provides 4.5:1 or higher contrast).

Why does naive RGB lightening sometimes produce 'muddy' or washed-out yellows?

Standard sRGB color space is not perceptually uniform; humans perceive green and yellow wavelengths with much higher sensitivity than blue. Naive RGB interpolation shifts yellow toward white very rapidly, losing its chromatic warmth. Modern CSS is adopting perceptual color spaces like OKLCH (Oklch L C H) to maintain uniform chroma across lightness ramps.

Can I export my generated shades and tints directly into Tailwind CSS or CSS variables?

Yes. You can copy individual HEX codes with a single click or copy the entire 9-step array directly formatted as CSS Custom Properties (`--color-primary-50` through `--color-primary-900`) or as a Tailwind theme configuration object.

How should I design interactive button states using shades and tints?

Set your primary button's default state to the 500 base color. On hover, step down to the 600 shade for subtle depth. On active/pressed, step down to the 700 shade. In disabled states, use the 200 tint with a 400-level text color. This creates a tactile, responsive interaction model without introducing random, mismatched colors.

How do tonal scales simplify dark mode implementation?

In dark mode, you invert your tonal ramp mapping: light canvas surfaces that used 50-tint backgrounds in light mode map to 900-shade dark slate surfaces, while typography that used 900-shades in light mode maps to 50/100-tint text in dark mode. This maintains brand consistency without manually picking dozens of separate colors.