Calcoid

Farbpaletten-Generator

Erzeuge aus einer Basisfarbe komplementäre, analoge, triadische, tetradische oder monochrome Paletten mit HSL, RGB, Hex und WCAG-Kontrast.

Farbpaletten-Generator

Erzeuge fünf gängige Harmonien aus einer Basisfarbe und prüfe Hex, RGB, HSL sowie WCAG-Kontrast.

Erlaubt sind drei oder sechs Hex-Ziffern, mit oder ohne #.

Die Farbtöne werden auf dem HSL-Farbkreis verteilt.

Basisfarbe

#0f766eHSL(175, 77 %, 26 %)

Palette (2 Farben)

CSS-Verlauf
linear-gradient(90deg, #0f756d, #750f18)
Lesefarbe
#ffffff, #ffffff

Jede Kachel zeigt RGB, HSL und WCAG-Kontrastwerte. Klicke eine Kachel zum Kopieren des Hex-Werts an.

Farbton-Versätze der Harmonien

Der Generator verteilt die Farbtöne anhand dieser Beziehungen auf dem Farbkreis.

HarmonieFarbton-VersätzeFarbbeziehung
Komplementär0 und 180 GradGegenüberliegende Farbtöne
Analog-30, 0 und 30 GradBenachbarte Farbtöne
Triadisch0, 120 und 240 GradDrei gleichmäßig verteilte Farbtöne
Tetradisch0, 90, 180 und 270 GradVier gleichmäßig verteilte Farbtöne
MonochromGleicher Farbton, 15 % HelligkeitFünf Helligkeitsvarianten

Häufige Fragen

Wie erstellt der Farbpaletten-Generator eine Palette?
Die Basisfarbe wird in HSL zerlegt. Anschließend dreht der Rechner den Farbton auf dem Farbkreis und wandelt jeden erzeugten Farbton wieder in RGB und Hex um.
Was unterscheidet die fünf Harmonietypen?
Komplementär setzt zwei Gegenfarben ein. Analoge, triadische und tetradische Paletten verteilen mehrere Farbtöne. Monochrom verändert nur die Helligkeit einer Farbe.
Wie wird die monochrome Palette aufgebaut?
Farbton und Sättigung bleiben gleich. Die Helligkeit wird in fünf Schritten um jeweils 15 Prozentpunkte verändert und zwischen 10 % und 90 % begrenzt.
Welche Hex-Formate kann ich eingeben?
Du kannst eine drei- oder sechsstellige Hex-Farbe mit oder ohne führendes # eingeben. Der Farbwähler setzt ebenfalls eine gültige sechsstellige Basisfarbe.
Was sagen die WCAG-Kontrastwerte aus?
Jede Farbe erhält einen Kontrastwert für weißen und schwarzen Text. Je höher das Verhältnis von 1 bis 21 ist, desto deutlicher hebt sich der Text vom Hintergrund ab.
Kann ich die Farben in ein anderes Designwerkzeug kopieren?
Ja. Klicke eine Farbkachel an, um ihren Hex-Wert zu kopieren. Die einzelnen Werte und CSS-Angaben kannst du anschließend in CSS, Figma oder andere Werkzeuge übernehmen.

Änderungsverlauf

Aktualisierungen von Farbpaletten-Generator, nach Datum gruppiert.

1 Aktualisierung
  1. Farbpaletten-Generator hinzugefügt

    • Erzeuge aus einer Basisfarbe komplementäre, analoge, triadische, tetradische oder monochrome Paletten mit HSL, RGB, Hex und WCAG-Kontrast.

Ähnliche Rechner

Weitere geprüfte Rechner im Themenbereich „Technik“.