Shade & Tint Generator

Generate shades (darker) and tints (lighter) from any base color. Create complete color palettes for your designs.

Base Color
Select your starting color
10
Generated Palette
Click any color to copy its HEX value
#e9f3fc90% tint
#c0def872% tint
#98c8f354% tint
#6fb3ee36% tint
#479dea18% tint
#1e88e5Base
#1769b123% shade
#114b7e45% shade
#0a2c4a68% shade
#030e1790% shade
Gradient Preview
Visual representation of your color palette

What are Shades and Tints?

Shades and tints are variations of a color created by adjusting its lightness.

Shades

Shades are created by adding black to a color, making it darker.

Tints

Tints are created by adding white to a color, making it lighter.

Color Palette Generation

This tool generates a complete palette from your base color:

  1. Lighter tints - Progressively lighter versions
  2. Base color - Your selected color
  3. Darker shades - Progressively darker versions

Use Cases

Design Systems

Create consistent color scales for UI components:

  • Buttons (normal, hover, active states)
  • Backgrounds (light, medium, dark)
  • Text colors (primary, secondary, muted)

Branding

Generate a full color palette from a single brand color.

Accessibility

Use darker shades for text on light backgrounds and lighter tints for text on dark backgrounds.

Tips

  • Primary actions typically use the base color
  • Hover states often use a shade (darker)
  • Disabled states often use a tint (lighter)
  • Backgrounds typically use very light tints
  • Borders often use medium shades