HedgieTools

Farbpaletten-Generator

Gehen Sie von Ihrer Hauptfarbe aus und erhalten Sie eine vollständige Farbpalette für Ihre Oberfläche: Sekundär- und Tertiärfarbe, Farben für Erfolg, Warnung und Gefahr sowie Neutraltöne, jeweils mit Abstufungen und Kontrastprüfung.

Ihre Hauptfarbe

Geben Sie einen Wert ein oder wählen Sie eine Farbe: Die restliche Farbpalette wird darauf abgestimmt.

Sekundär- und Tertiärfarbe
Werteformat

Geben Sie einen HEX-Wert ein, etwa #2563EB, oder klicken Sie auf das Quadrat, um die Farbe auszuwählen.

Ihre Farbpalette

Klicken Sie zum Kopieren auf einen Wert oder eine Abstufung (50 bis 950). Mit dem Stift ersetzen Sie eine vorgeschlagene Farbe durch Ihre eigene: Diese bleibt fest, auch wenn Sie die Hauptfarbe ändern.

  • —

    Primär

    Ihre Farbe
  • —

    Sekundär

    komplementär
  • —

    Tertiär

    fast komplementär
  • —

    Info

    blau
  • —

    Erfolg

    grün
  • —

    Warnung

    orange
  • —

    Gefahr

    rot
  • —

    Neutral

    getöntes Grau

Token für helles und dunkles Design

Die Funktionsfarben Ihrer Oberfläche, bereit für helles und dunkles Design. Jede verweist auf eine Abstufung der Farbpalette. Zum Kopieren anklicken.

  • --backgroundSeitenhintergrund
  • --surfaceKarten und Bereiche
  • --surface-mutedSekundäre Bereiche
  • --borderRahmen und Trennlinien
  • --textHaupttext
  • --text-mutedSekundärer Text
  • --primarySchaltflächen und Links
  • --primary-hoverHover-Zustand
  • --on-primaryText auf Primärfarbe
  • --focus-ringFokusrahmen
  • --secondarySekundärer Akzent
  • --tertiaryTertiärer Akzent
  • --infoInformationen
  • --info-softInfo-Hintergrund
  • --successErfolg
  • --success-softErfolgshintergrund
  • --warningWarnung
  • --warning-softWarnhintergrund
  • --dangerGefahr, Fehler
  • --danger-softFehlerhintergrund

Passende Farben

Die klassischen Farbharmonien rund um Ihre Hauptfarbe, für Illustrationen, Diagramme oder Akzente.

  • Komplementär

    die Gegenfarbe

  • Geteilt komplementär

    sanfter als die Gegenfarbe

  • Analog

    die Nachbarfarben

  • Triade

    drei ausgewogene Farben

  • Tetrade

    vier Farben im Quadrat

  • Monochrom

    ein Farbton, mehrere Intensitäten

Vorschau und Kontrast

Die Farbpalette, angewendet auf einige Oberflächenelemente, und wie gut jede Kombination nach den WCAG-Regeln lesbar ist.

Design der Vorschau
SeitentitelSekundärer Text, weniger wichtig, unter dem Titel.
Eine Karte mit einem Link und Schaltflächen.
PrimärSekundärTertiär
Info · Ein Update ist verfügbar.
Erfolg · Ihre Änderungen wurden gespeichert.
Warnung · Ihr Abo läuft bald ab.
Fehler · Die Zahlung ist fehlgeschlagen.
  • Text auf Hintergrund
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Sekundärer Text auf Hintergrund
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Link auf Hintergrund
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Primäre Schaltfläche
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Sekundäre Schaltfläche
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Tertiärer Text auf Hintergrund
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Info-Meldung
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Erfolgsmeldung
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Warnmeldung
    Verhältnis—Normaler Text—Großer Text—AAA—
  • Fehlermeldung
    Verhältnis—Normaler Text—Großer Text—AAA—

Export

Holen Sie sich die Farbpalette im oben gewählten Format (HEX).

Geben Sie eine Hauptfarbe ein, um den Code zu erzeugen.

CSS-Variablen für die Farbpalette (--color-primary-500…). Die Token verweisen auf diese Variablen; aktivieren Sie das dunkle Design mit data-theme="dark" am html-Element.

Über den Farbpaletten-Generator

Wählen Sie die Hauptfarbe Ihrer Marke und erhalten Sie alles, was eine Oberfläche rund um diese Farbe braucht: Begleitfarben, Statusfarben, Neutraltöne, Abstufungen, Token für helles und dunkles Design, Kontrastprüfungen und Code zum Einfügen – alles, ohne Ihren Browser zu verlassen.

Eine vollständige Farbpalette aus einer Farbe

Das Tool leitet aus Ihrer Hauptfarbe eine Sekundär- und eine Tertiärfarbe ab, dazu Statusfarben (Info, Erfolg, Warnung, Gefahr), die zu ihrem Stil passen, und leicht getönte Grautöne für Hintergründe und Text.

Gebrauchsfertige Abstufungen

Jede Farbe gibt es in elf Abstufungen, von der hellsten (50) bis zur dunkelsten (950), für Hintergründe, Rahmen, Hover-Zustände und Text. Passt Ihnen eine vorgeschlagene Farbe nicht, ersetzen Sie sie durch Ihre eigene: Die Abstufungen passen sich an.

Token für helles und dunkles Design

Hintergrund, Fläche, Rahmen, Text, Hover, Fokus und Meldungshintergründe: Jede Funktionsfarbe verweist auf eine Abstufung der Farbpalette, mit einem Wert für das helle und einem für das dunkle Design.

Geprüfter Kontrast

Jede Kombination aus Text und Hintergrund wird nach den WCAG-Regeln bewertet: 4,5:1 für normalen Text, 3:1 für großen Text und 7:1 für die Stufe AAA.

Export als CSS, Tailwind, JSON

Kopieren Sie jeden Wert in HEX, RGB, HSL oder OKLCH, oder laden Sie eine Datei mit CSS-Variablen, ein Tailwind-v4-Theme, eine Tailwind-v3-Konfiguration, JSON oder eine einfache Liste herunter. Alles geschieht in Ihrem Browser: Nichts wird gesendet oder gespeichert.

Ähnliche Tools