About the Tints & Shades Generator
This tints and shades generator takes one color and produces two things designers constantly need: a run of tints (the color mixed with white) and shades (the color mixed with black) at an even percentage step, and a complete 11-step 50–950 scale in the style used by Tailwind CSS and most design systems. The scale is exported as CSS custom properties and as a Tailwind theme snippet you can paste straight into a project.
It is useful when you have a single brand color and need hover and pressed states, subtle backgrounds, borders and dark text variants that all clearly belong to the same family. The swatch table also shows the WCAG contrast of every step against white and black, so you can see at a glance which steps are safe for text.
Tints and shades are mixed channel by channel in sRGB, the classic definition used by most "tint/shade" tools. The 500 step is always your exact input color; lighter steps add more white and darker steps add more black according to the fixed percentages shown in the method below.
How to use the tints & shades generator
- 1Enter your base color (it becomes step 500).
- 2Choose the tint/shade step — 10% gives nine of each.
- 3Optionally name the variable, e.g. "primary" or "brand".
- 4Check the contrast table to see which steps can carry white or black text.
- 5Copy the CSS variables or Tailwind snippet into your project.
Formula and method
Each channel C (red, green and blue, 0–255) is mixed toward white for a tint or toward black for a shade, then rounded to a whole number. A 20% tint moves every channel 20% of the way to 255; a 20% shade multiplies every channel by 0.8. The tint and shade lists use your chosen step (10%, 20% … up to 90% by default).
The 50–950 scale keeps your color as step 500 and uses fixed mixes: 50 = 95% white, 100 = 90%, 200 = 75%, 300 = 60%, 400 = 30%; 600 = 20% black, 700 = 40%, 800 = 55%, 900 = 70% and 950 = 80%. Contrast is the WCAG 2 ratio (L₁ + 0.05) ÷ (L₂ + 0.05) using relative luminance.
- C
- A red, green or blue channel of the base color (0–255)
- t
- Tint amount — share of white mixed in (0–1)
- s
- Shade amount — share of black mixed in (0–1)
Worked examples
Scale from blue #2563EB
Step 50 moves each channel 95% of the way to 255: red 37 → 37 + 218 × 0.95 = 244 (F4), green 99 → 247 (F7), blue 235 → 254 (FE). Step 950 keeps 20% of each channel: 37 × 0.2 = 7, 99 × 0.2 = 20, 235 × 0.2 = 47 → #07142F. The base itself is the first step where white text clears 4.5:1 (5.17:1).
25% tints and shades of red #FF0000
Green and blue start at 0, so a 25% tint lifts them to 0 + 255 × 0.25 = 63.75 → 64 (40 hex), 50% to 127.5 → 128 (80) and 75% to 191.25 → 191 (BF). Shades scale red down: 255 × 0.75 = 191 (BF), × 0.5 = 128 (80), × 0.25 = 64 (40).
Golden yellow brand color #EAB308
Yellow is very light, so white text fails on the base (1.92:1) and on step 600 (2.98:1). Step 700 keeps 60% of each channel — 234 × 0.6 = 140.4 → 140 (8C), 179 × 0.6 = 107.4 → 107 (6B), 8 × 0.6 = 4.8 → 5 — and reaches 4.98:1 with white text.
Frequently asked questions
What is the difference between a tint, a shade and a tone?+
A tint is a color mixed with white (lighter), a shade is a color mixed with black (darker) and a tone is a color mixed with gray (less saturated). This tool generates tints and shades, which cover most UI needs such as hover states and backgrounds.
How do I make a color darker for a hover state?+
Use a shade 10–20% darker than the base, or the next step up in the scale (e.g. 600 for a 500 button). Darker hover states are the most common convention and usually also improve contrast with white text.
Is this the same scale Tailwind CSS uses?+
It uses the same 50–950 naming so it drops into a Tailwind config, but Tailwind’s own palettes are hand-tuned in OKLCH with hue shifts. This generator uses consistent white/black mixing, so the steps are predictable and your 500 is exactly your input color.
Which steps should I use for text?+
Check the contrast table. Normal body text needs 4.5:1 (WCAG AA). For most mid-tone colors, steps 700–950 work as text on white, and steps 50–100 work as backgrounds behind dark text.
Why does mixing with black make some colors look muddy?+
Multiplying all channels toward black also lowers saturation perceptually, especially for yellows, which can turn olive. If that happens, use fewer dark steps or pick a slightly more orange base for the darker end.