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.

Générer a color palette from a base color

Derive complementary, analogous, triadic, et shade/tint variants de un single base color pour design systèmes.

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

Générateur de palette de couleurs →
Enter a base color. The tool generates shades (darker), tints (lighter), and harmonious variants (complementary, analogous, triadic, split-complementary) in your chosen format.
3

Mélangeur de couleurs →
Mix two specific colors to find intermediate shades — useful for gradient stops or hover states between two palette colors.
4

Convertisseur de couleur →
Convertir the generated palette colors en the format your design system uses (hex for CSS, HSL for Tailwind, RGB for Figma)

Questions fréquentes

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.