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.

Generar a color palette from a base color

Derive complementary, analogous, triadic, y shade/tint variants de un single base color para design sistemas.

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

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

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

Convertidor de color →
Convertir the generated palette colors a the format your design system uses (hex for CSS, HSL for Tailwind, RGB for Figma)

Preguntas frecuentes

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.