Zum Hauptinhalt springen
Bethemesh
Bilder & Grafiken

Farbpaletten-Generator

Wähle eine Grundfarbe und eine Farbharmonie: Die Palette erscheint als HEX- und HSL-Farbfelder zum Kopieren, samt CSS-Variablen.

  • Zwischenablage

Dieses Widget einbetten

Passe die Darstellung an, prüfe die Vorschau und kopiere anschließend den Code.

Vorschau

Art des Einbettungscodes

Zu kopierender Code

Responsive und automatisch von Bethemesh in der Größe angepasst.

Grundfarbe

HEX-Code, rgb() oder hsl(); Transparenz wird ignoriert.

Palette

    CSS-Variablen

    War dieses Werkzeug hilfreich?

    Wie funktioniert dieses Tool?

    Eine harmonische Palette beruht auf Farben, die in genauen Winkeln auf dem Farbkreis liegen: gegenüber für starken Kontrast, benachbart für eine ruhige Stimmung, im Dreieck verteilt für ein ausgewogenes Ganzes. Dieser Generator geht von einer Grundfarbe aus, deiner eigenen oder der einer Marke, und berechnet sechs klassische Farbharmonien zum Kopieren als HEX, HSL oder CSS-Variablen.

    Gib die Grundfarbe als HEX, rgb() oder hsl() ein oder wähle sie im Farbwähler. Sie wird in Farbton, Sättigung und Helligkeit (HSL) umgerechnet; eine Transparenz wird ignoriert.

    Bei den Farbton-Harmonien bleiben Sättigung und Helligkeit wie bei der Grundfarbe, nur der Farbton dreht sich: Komplementär ergänzt die Farbe bei 180°, Analog die Nachbarn bei −30° und +30°, Triadisch die Farben bei 120° und 240°, Geteilt komplementär die bei 150° und 210°, Tetradisch (Quadrat) die bei 90°, 180° und 270°. Monochrom behält Farbton und Sättigung und bildet fünf Helligkeitsstufen von −30 bis +30 Punkten, begrenzt auf 5 bis 95 %.

    Jedes Farbfeld zeigt seinen HEX-Code und HSL-Wert, mit schwarzer oder weißer Schrift je nach Leuchtdichte, damit es lesbar bleibt. Ein Klick kopiert den HEX-Code; der Block CSS-Variablen enthält die ganze Palette als --color-1, --color-2 usw.

    So verwenden Sie dieses Tool

    1. Grundfarbe wählen

      Tippe einen Code wie #3366FF ein oder nutze den Farbwähler.

    2. Harmonie auswählen

      Komplementär, analog, triadisch, geteilt komplementär, tetradisch oder monochrom: Die Palette aktualisiert sich sofort.

    3. Farben kopieren

      Klicke auf ein Farbfeld, um seinen HEX-Code zu kopieren, oder kopiere den Block mit den CSS-Variablen.

    Berechnung der Harmonien

    Die Grundfarbe wird in HSL umgerechnet; die Harmonien verschieben den Farbton um einen festen Winkel oder die Helligkeit.

    Drehung des Farbtons

    H_k = (H + δ_k) mod 360

    δ beträgt 180° (komplementär), ±30° (analog), 120° und 240° (triadisch), 150° und 210° (geteilt komplementär), 90°, 180° und 270° (tetradisch).

    Monochrome Helligkeiten

    L_k = min(95, max(5, L + λ_k))

    λ beträgt −30, −15, 0, +15 und +30 Prozentpunkte.

    H, L
    Farbton (in Grad) und Helligkeit (in %) der Grundfarbe
    δ_k
    Farbtonverschiebung der k-ten Farbe
    λ_k
    Helligkeitsverschiebung der k-ten monochromen Farbe

    Anwendungsfälle

    Markenfarbe erweitern

    Finde einen komplementären Akzent oder benachbarte Farbtöne rund um das Blau eines Logos.

    Abstufungen für Oberflächen

    Erzeuge fünf Helligkeitsstufen eines Farbtons für Hintergründe, Rahmen und Hover-Zustände.

    Diagramm einfärben

    Erhalte drei oder vier gut unterscheidbare Farben für die Reihen eines Diagramms oder einer Karte.

    Beispiele

    Komplementäre und triadische Harmonie eines Blaus

    225 + 180 = 405, also 45°: ein Goldgelb. Triadisch ergeben 225 + 120 = 345° (Himbeerrosa) und 225 + 240 = 465, also 105° (Grün). Sättigung und Helligkeit bleiben bei 100 % und 60 %.

    Eingabe

    Grundfarbe #3366FF (hsl(225, 100%, 60%)), Harmonie Komplementär, danach Triadisch

    Ergebnis

    Komplementär: #3366FF und #FFCC33; triadisch: #3366FF, #FF3366 und #66FF33

    Monochrome Palette desselben Blaus

    Die Helligkeit von 60 % wird zu 30, 45, 60, 75 und 90 %: zwei dunkle Töne für Text oder Schaltflächen, zwei helle für Hintergründe.

    Eingabe

    Grundfarbe #3366FF, Harmonie Monochrom

    Ergebnis

    #002699, #0039E6, #3366FF, #809FFF, #CCD9FF

    Tipps und bewährte Vorgehensweisen

    • Eine stark gesättigte Komplementärpalette flimmert: Nutze die zweite Farbe für Akzente (Schaltflächen, Links) statt für große Flächen.
    • Starte mit einer weniger gesättigten Farbe für eine ruhigere Palette: Alle Farbton-Harmonien übernehmen ihre Sättigung.
    • Prüfe den Textkontrast auf jeder Farbe, bevor du sie für Inhalte nutzt, und teste die Palette mit dem Farbenblindheit-Simulator.
    • Die Harmonien werden auf dem HSL-Farbkreis berechnet: Zwei Farben mit gleicher HSL-Helligkeit können fürs Auge heller oder dunkler wirken (Gelb wirkt heller als Blau).

    Quellen und Referenzen

    Häufig gestellte Fragen

    Wie viele Farben enthält jede Palette?

    Zwei bei komplementär, drei bei analog, triadisch und geteilt komplementär, vier bei tetradisch und fünf bei monochrom. Die Grundfarbe ist immer enthalten.

    Welche Harmonie soll ich wählen?

    Komplementär für starken Kontrast, analog für eine einheitliche Stimmung, triadisch oder tetradisch für mehrere klar getrennte Farben, monochrom für eine zurückhaltende Oberfläche.

    Warum haben alle Farben dieselbe Sättigung?

    Die Farbton-Harmonien drehen nur den Farbton; Sättigung und Helligkeit stammen von der Grundfarbe, damit das Ganze stimmig bleibt.

    Sind die kopierten Codes exakt?

    Ja. Jede Farbe wird in HSL berechnet und mit auf ganze Zahlen gerundeten Kanälen in HEX umgewandelt, in einem Format, das jeder Browser versteht.

    Wie nutze ich die CSS-Variablen?

    Füge den :root-Block in dein Stylesheet ein und verwende dann var(--color-1), var(--color-2) usw. in deinen Regeln.

    Wird meine Farbe gespeichert oder gesendet?

    Nein. Die Palette wird in deinem Browser berechnet, und nach dem Schließen der Seite bleibt nichts gespeichert.

    Verwandte Werkzeuge

    Mit diesen Werkzeugen weitermachen

    Werkzeuge, die diesem ähnlich sind oder es ergänzen.

    Ähnliche Werkzeuge

    Farbkonverter

    Rechne eine Farbe zwischen HEX, RGB und HSL um, mit allen gleichwertigen Werten.

    Bilder & GrafikenDieses Werkzeug verwenden

    Farben aus Bild extrahieren

    Extrahiere die dominanten Farben eines Bildes als Palette, ohne es auf einen Server hochzuladen.

    Bilder & GrafikenDieses Werkzeug verwenden

    Farbenblindheit-Simulator

    Zeige, wie ein Bild bei verschiedenen Formen von Farbsehschwäche wirken kann.

    Bilder & GrafikenDieses Werkzeug verwenden

    Auch interessant

    LeitfadenBewährte MethodenAnfänger

    Wie erstellt man eine Farbpalette aus einem Bild?

    Lerne, dominante Farben aus einem Bild auszuwählen, sie zu einer brauchbaren Webpalette zu ordnen und Kontrast, Rollen und Lesbarkeit getrennt zu prüfen.

    31. August 20265 min