What is the difference between shades and tints?

Shades are created by mixing the base color with black (darkening). Tints mix with white (lightening). In HSL terms, shades decrease lightness; tints increase it. Tones mix with gray (decrease saturation).

Which harmony scheme should I use?

Complementary (opposite on the wheel) creates high contrast — use for call-to-action accents. Analogous (adjacent) creates calm, cohesive looks — use for backgrounds and subtle variation. Triadic (evenly spaced) creates vibrant, balanced palettes — use for illustrations and multi-category charts.

TASK

Generate a color palette from a base color

Derive complementary, analogous, triadic, and shade/tint variants from a single base color for design systems.

1

A design system needs multiple related colors: shades and tints of a base, plus harmonious accents (complementary, analogous, triadic). Generating these from one base color ensures visual coherence.
2

Color Palette Generator →
Enter a base color. The tool generates shades (darker), tints (lighter), and harmonious variants (complementary, analogous, triadic, split-complementary) in your chosen format.
3

Color Mixer →
Mix two specific colors to find intermediate shades — useful for gradient stops or hover states between two palette colors.
4

Color Converter →
Convert the generated palette colors to the format your design system uses (hex for CSS, HSL for Tailwind, RGB for Figma).

Frequently asked questions

What is the difference between shades and tints?: Shades are created by mixing the base color with black (darkening). Tints mix with white (lightening). In HSL terms, shades decrease lightness; tints increase it. Tones mix with gray (decrease saturation).
Which harmony scheme should I use?: Complementary (opposite on the wheel) creates high contrast — use for call-to-action accents. Analogous (adjacent) creates calm, cohesive looks — use for backgrounds and subtle variation. Triadic (evenly spaced) creates vibrant, balanced palettes — use for illustrations and multi-category charts.