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.

Erzeugen a color palette from a base color

Derive complementary, analogous, triadic, und shade/tint variants von ein single base color für design Systeme.

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

Farbpaletten-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

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

Farb-Konverter →
the generated palette colors in the format your design system uses (hex for CSS, HSL for Tailwind, RGB for Figma) konvertieren

Häufige Fragen

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.

Workflows, die diese Aufgabe lösen

Hex-Farbe zu RGB und Kontrastprüfung

Hex-Farbe in RGB umwandeln dann WCAG-Kontrastverhältnis prüfen.

PIPELINE

Häufige Fragen

Workflows, die diese Aufgabe lösen

Verwandte Tools