Most design systems generate ten or eleven tints and shades per brand color (the 50, 100, 200, 300… 900, 950 scale). Start from a base hue, lock the saturation, and step the lightness. The light and dark shades produced by this generator are the endpoints of that scale, derived from your seed.
Color glossary
Tint and Shade
A tint is a color mixed with white, a shade is a color mixed with black.
Try the generator
🎨 Make a palette →Related
Primary Color
The signature hue that identifies a brand and drives main CTAs and navigation surfaces.
Secondary Color
A supporting hue that complements the primary, used for less critical UI like tags, secondary buttons, and chart series.
Accent Color
A high-saturation contrast color used sparingly to emphasize one or two elements per screen.
WCAG Contrast Ratio
The luminance ratio between two colors, used by the Web Content Accessibility Guidelines to measure legibility.
Monochrome Palette
A palette built from a single hue, varying only saturation and lightness.
Analogous Palette
Three colors adjacent on the color wheel, typically within 30 degrees of each other.