OKLCH-Harmonisierer

Dreht den Farbton und schrittweise die Helligkeit im wahrnehmungsuniformen OKLCH-Raum – dieselben Harmonieregeln, aber die Paletten sehen einfach besser aus als in HSL. Jedes abgeleitete Muster kann unabhängig angepasst werden, mit Live-WCAG-Kontrast.

#2b9d8f

Basisvs Weiß 3.3 · vs Schwarz 6.3

L · 63%C · 0.101H · 183°

#957abc

H +120°vs Weiß 3.6 · vs Schwarz 5.8

L · 63%C · 0.101H · 303°

#b47b44

H +240°vs Weiß 3.6 · vs Schwarz 5.9

L · 63%C · 0.101H · 63°

Exportieren

Im Board öffnen

:root {
  --harmony-1: #2b9d8f;
  --harmony-2: #957abc;
  --harmony-3: #b47b44;
}

[
  {
    "hex": "#2b9d8f",
    "oklch": "oklch(63.0% 0.101 183.0)",
    "role": "base"
  },
  {
    "hex": "#957abc",
    "oklch": "oklch(63.0% 0.101 303.0)",
    "role": "harmony-2"
  },
  {
    "hex": "#b47b44",
    "oklch": "oklch(63.0% 0.101 63.0)",
    "role": "harmony-3"
  }
]

OKLCH-Harmonien in drei Schritten generieren

Perzeptuell einheitliche Harmonien mit live Kontrast und Farbraumabgrenzung in jedem Schritt.

01
Basis & Regel
Gib einen HEX-Code ein oder wähle einen zufälligen, dann wähle komplementär, geteilt-komplementär, triadisch, tetradisch, analog oder monochrom.
02
Feinabstimmung
Jedes abgeleitete Farbfeld hat L/C/H-Regler im OKLCH-Farbraum; Werte außerhalb des Farbraums werden auf die nächste anzeigbare Farbe abgebildet.
03
Exportieren
Beobachte den Kontrast zu Weiß/Schwarz live, kopiere CSS-Variablen oder JSON, oder sende das gesamte Set an die Paletten-Tafel.

Häufig gestellte Fragen zum Harmonizer-Arbeitsbereich

Drei häufige Fragen zu OKLCH-Harmonien.

Wie unterscheidet sich OKLCH-Harmonie von radbasierter Harmonie?: In HSL ist „gleiche Helligkeit“ nicht wahrnehmungsgleich – gedrehte Gelbtöne blenden, Blautöne werden matt. OKLCH ist wahrnehmungseinheitlich, sodass die Farbtonrotation Helligkeit und Chroma tatsächlich erhält und natürlich ausgewogene Paletten ergibt.
Was passiert, wenn ein Schieber außerhalb des Bildschirmfarbraums liegt?: Der OKLCH-Raum ist größer als sRGB. Werte außerhalb des Farbraums werden automatisch der nächstliegenden anzeigbaren Farbe zugeordnet, sodass der angezeigte HEX-Code der ist, den Sie verwenden können.
Wie verwende ich das Ergebnis in meinem Projekt?: Kopieren Sie die :root-CSS-Variablen oder JSON aus dem Exportbereich, oder öffnen Sie die Gruppe im Palettenbrett, um sie zu sperren, neu zu würfeln und PNG/ASE und mehr zu exportieren.

Nachdem Sie das Ergebnis erhalten haben

Machen Sie weiter und setzen Sie die Farben ein.

Farbkreis

Ziehen Sie den Kreis, um eine Basis auszuwählen, erhalten Sie live sechs Harmonieschemata, öffnen Sie es im Board oder exportieren Sie als PNG.

OKLCH-Editor

Passen Sie L / C / H im wahrnehmungsgleichmäßigen OKLCH-Raum an mit Live-Vorschau und Ausgabe als oklch() / HEX / RGB.

Semantische UI-Farbpalette

Geben Sie eine Markenfarbe ein, erhalten Sie Primär-/Sekundär-/Erfolgs-/Warn-/Gefahrfarben — exportiert als Tailwind-Konfiguration und CSS-Variablen.

Paletten-Board

Leertaste zum Zufallsgenerieren, Sperren, Ziehen zum Neuordnen, Teilen per URL – alles, was ein Paletten-Board können sollte.

[ { "hex": "#2b9d8f", "oklch": "oklch(63.0% 0.101 183.0)", "role": "base" }, { "hex": "#957abc", "oklch": "oklch(63.0% 0.101 303.0)", "role": "harmony-2" }, { "hex": "#b47b44", "oklch": "oklch(63.0% 0.101 63.0)", "role": "harmony-3" } ]

OKLCH-Harmonien in drei Schritten generieren

Perzeptuell einheitliche Harmonien mit live Kontrast und Farbraumabgrenzung in jedem Schritt.

Basis & Regel

Gib einen HEX-Code ein oder wähle einen zufälligen, dann wähle komplementär, geteilt-komplementär, triadisch, tetradisch, analog oder monochrom.

Feinabstimmung

Jedes abgeleitete Farbfeld hat L/C/H-Regler im OKLCH-Farbraum; Werte außerhalb des Farbraums werden auf die nächste anzeigbare Farbe abgebildet.

Exportieren

Beobachte den Kontrast zu Weiß/Schwarz live, kopiere CSS-Variablen oder JSON, oder sende das gesamte Set an die Paletten-Tafel.

Häufig gestellte Fragen zum Harmonizer-Arbeitsbereich

Drei häufige Fragen zu OKLCH-Harmonien.

Wie unterscheidet sich OKLCH-Harmonie von radbasierter Harmonie?

In HSL ist „gleiche Helligkeit“ nicht wahrnehmungsgleich – gedrehte Gelbtöne blenden, Blautöne werden matt. OKLCH ist wahrnehmungseinheitlich, sodass die Farbtonrotation Helligkeit und Chroma tatsächlich erhält und natürlich ausgewogene Paletten ergibt.

Was passiert, wenn ein Schieber außerhalb des Bildschirmfarbraums liegt?

Der OKLCH-Raum ist größer als sRGB. Werte außerhalb des Farbraums werden automatisch der nächstliegenden anzeigbaren Farbe zugeordnet, sodass der angezeigte HEX-Code der ist, den Sie verwenden können.

Wie verwende ich das Ergebnis in meinem Projekt?

Kopieren Sie die :root-CSS-Variablen oder JSON aus dem Exportbereich, oder öffnen Sie die Gruppe im Palettenbrett, um sie zu sperren, neu zu würfeln und PNG/ASE und mehr zu exportieren.