Hex Shades — Color Tint & Shade Generator

Every design system needs a color scale — 50 through 950, light to dark. Manually deriving 22 values from a single brand color is tedious. Hex Shades does it instantly.

What it does

Type or paste a hex color code. The tool generates two scales in real time:

• 11 tints — the color progressively mixed toward white (0% → 100% white)
• 11 shades — the color progressively mixed toward black (0% → 100% black)

Click any swatch to copy the hex value. The checkmark confirms the copy.

Features

• Live validation — accepts 3-digit (#f0f) and 6-digit hex, ignores invalid input gracefully
• Copy on click — any swatch copies its hex value with a ✓ feedback animation
• 22 swatches per color — 11 tints + 11 shades
• Pure CSS math — no color library needed; RGB interpolation handles everything
• Responsive grid — works on mobile and desktop

The math

Tints mix the base color with white linearly in RGB space:

weight = i * 0.1  // 0.0 to 1.0
r = round(r_base + (255 - r_base) * weight)

Shades mix the base color with black:

r = round(r_base * (1 - weight))

This gives perceptually reasonable steps for most use cases. For more accurate perceptual uniformity you'd want to work in OKLCH — a future v2 feature.

Screenshots