Tints, Shades & Tones Generator

Generate lightness, saturation and hue scales from any color. Export to CSS, SCSS, Tailwind and JSON. With WCAG contrast and UI preview.

Generate color scales by adjusting the lightness and saturation of the base color.

Base Color

hsl(207°, 90%, 54%)

Lightness Steps: 10

Saturation Steps: 10

Hue Steps: 12

Lightness Scale

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#000000

0%AA

#031c30

10%AA

#053861

20%AA+

#085491

30%

#0a70c2

40%

#0d8df2

50%

#3da3f5

60%

#6ebaf7

70%

#9ed1fa

80%

#cfe8fc

90%

#ffffff

100%AA+

Saturation Scale

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#8a8a8a

#7e8b96

10%

#738da1

20%

#678ead

30%

#5b8fb9

40%

#4f91c4

50%

#4492d0

60%

#3893dc

70%

#2c95e8

80%

#2196f3

90%

#1597ff

100%

Hue Scale

207°

237°

267°

297°

327°

357°

27°

57°

87°

117°

147°

177°

#2196f3

207°

#212df3

237°

#7e21f3

267°

#e721f3

297°

#f32196

327°

#f3212d

357°

#f37e21

27°

#f3e721

57°

#96f321

87°

#2df321

117°

#21f37e

147°

#21f3e7

177°

UI Preview

Example Title

This text uses colors from your lightness scale.

Colors are automatically assigned from the lightness scale: light backgrounds, button from the middle step, text from the darkest step.

Export All Scales

How it works

This generator creates three types of color scales from a base color: lightness scales (tints and shades), saturation scales (tones), and hue scales (hue rotation). It's the essential tool for building professional design systems.

What does this calculator offer?

Lightness scale — from black to white keeping hue and saturation
Saturation scale — from gray to full vibrance keeping hue and lightness
Hue scale — hue rotation keeping saturation and lightness
WCAG indicator — each tone shows if it has AA/AAA contrast with the base
Use as base — click any tone to use it as the new base color
UI preview — button and card mockup using generated colors
Export — CSS Variables, SCSS, Tailwind Config and JSON
Random color — for quick exploration

Tint vs Shade vs Tone: Differences

Variation	Mixed with	HSL Effect	Result
Tint	White	L ↑ (increases)	Lighter, pastel color
Shade	Black	L ↓ (decreases)	Darker, deeper color
Tone	Gray	S ↓ (decreases)	Muted, subtle color

Formulas

Tint (mix with white)

Tint = Base + (255 - Base) × factor

factor = 0 (base color) to 1 (pure white)

Shade (mix with black)

Shade = Base × (1 - factor)

factor = 0 (base color) to 1 (pure black)

Tone (mix with gray)

Tone = Base + (128 - Base) × factor

Equivalent to reducing saturation in HSL

Design system conventions

Tailwind CSS (50-950)

Tailwind uses 11 steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The 500 is the base color. Generate 10 lightness steps to reproduce this scale.

Material Design (50-900)

Material uses 10 main levels + A100-A700 accent variants. The 500 is the "hero" color. High levels (700-900) are used for active states and text.

Design Tokens

Export your scale as CSS variables or JSON to integrate into your token system. Each step becomes a semantic token: --color-primary-100.

Accessibility

The WCAG badges next to each tone show which steps can be used as text over the base color. Look for AA or AAA to guarantee readability.

Practical Use Cases

Case 1: Brand color design system

Your brand uses blue #3B82F6. You need 11 Tailwind-style variants.

→ Generate 10 lightness steps
→ 50-200: backgrounds, highlights, subtle hovers
→ 300-400: borders, secondary icons
→ 500: primary buttons, links, badges
→ 600-700: button hover, text on light background
→ 800-950: text, headings, dark backgrounds

Case 2: Interactive button states

Primary green button #22C55E.

→ Normal: step 500 (base color)
→ Hover: step 600 (one shade darker)
→ Active/pressed: step 700
→ Focus ring: step 300 at 50% opacity
→ Disabled: step 200 with reduced opacity

Case 3: Cards with visual hierarchy

→ Page background: lightest step (50 or 100)
→ Main card: white or step 50
→ Nested card: step 100
→ Subtle border: step 200
→ Main text: step 900, secondary: step 600

Case 4: Dark mode

Invert the lightness scale for dark mode.

→ Background: step 900 or 950
→ Surface/card: step 800
→ Border: step 700
→ Text: step 100 or 50
→ Buttons: step 400-500 (lighter than in light mode)

Case 5: Semantic color palette

Generate scales for success, warning, error and info.

→ Success: #22C55E → 10 steps → bg-success-100, text-success-700
→ Error: #EF4444 → 10 steps → bg-error-100, border-error-300
→ Warning: #F59E0B → 10 steps → badge-warning-200
→ Export all as CSS variables or JSON tokens

Frequently Asked Questions

How many steps should I generate?

For professional design systems (Tailwind, Material), 10-11 steps (50-950) is standard. For simple projects, 5-7 steps is enough. For a complete system with dark mode, generate at least 10 steps to have enough variants for inverting the scale.

What is the difference between tint, shade and tone?

Tint = color + white (lighter, raises Lightness L in HSL). Shade = color + black (darker, lowers L). Tone = color + gray (more muted, lowers Saturation S). All three variations keep the hue (H) intact. This calculator generates all three scales independently.

How do I replicate the Tailwind CSS scale?

Generate 10 lightness steps. The middle step (~50% L) corresponds to Tailwind's 500. Lighter steps are 50-400 and darker steps are 600-950. Export as "Tailwind Config" to get the object ready for your tailwind.config.js.

What do the AA/AAA badges next to each color mean?

They indicate the WCAG contrast level between that tone and your base color. AA+ (≥3:1) is valid for large text, AA (≥4.5:1) for normal text, AAA (≥7:1) for maximum accessibility. Tones without a badge don't have enough contrast with the base to be used as text.

Is this the same as a monochromatic palette?

Yes and no. A monochromatic palette uses a single hue with lightness and saturation variations, which is exactly what the lightness and saturation scales generate. But this calculator also includes the hue scale (hue rotation), which is no longer strictly monochromatic but analogous.

How do I use this for dark mode?

Invert the lightness scale: where in light mode you used light steps (50-200) for backgrounds, in dark mode use dark steps (800-950). Text that was 800-900 becomes 100-200. Primary buttons can keep the same step or go up 1-2 levels for more contrast on dark backgrounds.

Can I use "Use as base" to explore?

Yes. Hover over any generated tone and you'll see a crosshair icon. Clicking it makes that tone the new base color and all scales recalculate. It's very useful for refining your color: generate a scale, find a tone you like better, and use it as the new base.

Which export format should I choose?

CSS Variables if you use plain CSS/HTML. SCSS if you use Sass and want compiled variables. Tailwind Config if you use Tailwind and want to integrate the scale into your config. JSON if you use a design token system or need colors in another framework (React Native, Flutter, etc.).