Palettengenerator
Palette Generator
Baut aus einer Grundfarbe eine harmonische Palette nach Komplementär-, Triaden- und Analogregeln.
Nimmt eine Farbe und dreht ihren Farbton nach einer Harmonieregel, wobei OKLCH-Helligkeit und -Chroma gehalten werden, sodass eine Triade nicht mit einem sichtbar dunkleren Mitglied zurückkommt. Dieselbe Regel wird darunter in HSL gezeichnet, und das ist der schnellste Weg zu sehen, warum das zählt. Vor dem Export prüft es, ob zwei Farbfelder unter einer Farbfehlsichtigkeit ineinanderfallen und ob jedes Text tragen kann.
Basisfarbe
Jede CSS-Schreibweise. Die Harmonie hält Helligkeit und Chroma dieser Farbe in OKLCH fest und dreht nur den Farbton.
Harmonie
Nachbarn, 30° zu jeder Seite. Liest sich als eine Farbfamilie; für die Hierarchie braucht es einen Kontrastunterschied, weil die Farbtöne sie nicht tragen.
OKLCH
#0094c3L 62,3 C 0,188 H 230
#3b82f6L 62,3 C 0,188 H 260
#886ceeL 62,3 C 0,188 H 290
Dieselbe Regel in HSL, zum Vergleich
#3be0f6L 83,3 C 0,132 H 209
#3b82f6L 62,3 C 0,188 H 260
#523bf6L 51,4 C 0,260 H 278
Beide Streifen drehen den Farbton um dieselben Winkel. Die OKLCH-Zeile hält die wahrgenommene Helligkeit konstant — ihre Spreizung beträgt 0,0000, die der HSL-Zeile dagegen 0,3191, denn die „Helligkeit“ von HSL ist nicht wahrnehmungsbezogen: Reines Gelb und reines Blau behaupten beide 50 % und liegen mehr als 65 Punkte L* auseinander. Dieser Unterschied ist kein Darstellungsartefakt; er ist eine Helligkeitsrampe, die niemand bestellt hat, fest eingebaut in jede HSL-Harmonie.
Helligkeitsspreizung
0,0000
Außerhalb von sRGB
1 von 3
1 Farbfeld konnte das Basis-Chroma nicht in sRGB halten und hat 0,064 davon aufgegeben. Die Hex-Werte sind die eingepassten Fassungen; die oklch()-Werte im Export sind das, was ein Display mit großem Farbraum tatsächlich zeigt.
Hält das stand?
Das nächste Paar unter jeder simulierten Sehweise, in ΔE OKLab
- Protanopie0,026— diese beiden fallen zusammen
- Deuteranopie0,021— diese beiden fallen zusammen
- Tritanopie0,012— diese beiden fallen zusammen
- Achromatopsie0,013— diese beiden fallen zusammen
WCAG-Kontrast auf Weiß und auf Schwarz
- auf Weiß 3,49·auf Schwarz 6,02auf einem von beiden texttauglich
- auf Weiß 3,68·auf Schwarz 5,71auf einem von beiden texttauglich
- auf Weiß 3,87·auf Schwarz 5,43auf einem von beiden texttauglich
Ein Paar, das unter einer Simulation zusammenfällt, darf nicht der einzige Unterschied zwischen zwei Dingen sein — geben Sie eine Form, eine Beschriftung oder eine Helligkeitsstufe dazu. Die Kontrastprüfung hat das vollständige APCA-Urteil für ein bestimmtes Paar.
Export
Die CSS- und die Tailwind-Form geben oklch() aus und setzen den Hex-Wert als Kommentar daneben — die Genauigkeit beim Export wegzuwerfen würde den ganzen Grund zunichtemachen, überhaupt in OKLCH zu rechnen, und ein Browser, der oklch() bekommt, zeichnet die Farbe mit großem Farbraum, wo er kann.
Sie wollen statt eines Satzes Farbtöne lieber eine ganze Reihe von 50 bis 950 aus einer davon? Der Generator für Farbabstufungen baut eine, verankert an einer gemessenen Helligkeitskurve.
So funktioniert es
Geben Sie die Farbe ein, die Sie schon haben
Gewöhnlich die Markenfarbe, in jeder CSS-Notation. Alles andere wird aus ihrem Farbton, ihrer Helligkeit und ihrem Chroma abgeleitet, das ist also die eine Entscheidung, die den ganzen Satz formt.
Wählen Sie die Regel, dann passen Sie ihre Spreizung an
Komplementär ist ein gegenüberliegender Farbton; analog sind Nachbarn; triadisch sind drei bei 120°; geteilt-komplementär mildert ein Komplementärpaar. Der Spreizungsregler skaliert diese Versätze – 1 ist der Lehrbuchabstand, und darunter liest sich der Satz als eine Familie. Monochrom und Schattierungen fragen stattdessen nach einer Schrittzahl, weil sie die Helligkeit variieren und nicht den Farbton.
Vergleichen Sie die beiden Streifen
Die Helligkeitsstreuung unter der OKLCH-Reihe ist konstruktionsbedingt nahe null. Die HSL-Reihe dreht um dieselben Winkel, und ihre Streuung ist es nicht, weil HSL-Helligkeit nicht wahrnehmungsbezogen ist – reines Gelb und reines Blau beanspruchen beide 50 %. Wenn die beiden Streifen für diese bestimmte Grundfarbe für Sie gleich aussehen, sind sie es, und beide sind in Ordnung.
Lesen Sie das „Hält das?“-Panel vor dem Export
Es meldet das engste Paar unter jedem simulierten Sehtyp in ΔE OKLab und den WCAG-Kontrast jedes Farbfelds gegen Weiß und Schwarz. Ein als ineinanderfallend markiertes Paar darf nicht das Einzige sein, was zwei Zustände unterscheidet – fügen Sie eine Form, eine Beschriftung oder eine Helligkeitsstufe hinzu.
Exportieren Sie mit dem Präfix, das Ihr Code verwendet
CSS-Variablen, ein Tailwind-`@theme`-Block, SCSS, JSON-Tokens oder ein SVG-Farbfeldbogen. Die CSS-Formen geben `oklch()` aus, mit dem Hex daneben als Kommentar.
Häufige Fragen
Das Hex und das oklch() im Export sind verschiedene Farben. Welches ist richtig?
Beide, für verschiedene Displays. Wenn das Halten des Grund-Chromas ein Farbfeld außerhalb von sRGB setzen würde, ist das Hex die in den Farbraum gemappte Version – Chroma aufgegeben, damit es passt –, und der `oklch()`-Wert ist die Farbe, die tatsächlich berechnet wurde und die ein Wide-Gamut-Bildschirm zeigt. Das Panel sagt, wie viel Chroma jedes beschnittene Farbfeld verloren hat.
Bedeutet eine Harmonieregel, dass die Palette gut aussehen wird?
Nein. Das sind Winkel auf einem Farbkreis, und Geometrie ist nicht Geschmack. Was eine Regel Ihnen gibt, ist ein vertretbarer Ausgangssatz mit einem Grund hinter jedem Farbton, und das ist mehr wert als drei einzeln herausgepickte Farben. Das Urteil über Proportion – welche die große Fläche ist und welche der 5-%-Akzent – steckt hier überhaupt nicht drin.
Kann ich eine Palette einfügen, die ich schon habe, und sie prüfen?
Nicht hier – diese Seite beginnt mit einer Farbe und leitet den Rest ab. Für ein bestimmtes Paar nimmt der Kontrastprüfer beide Farben und gibt das volle Urteil. Für eine Skala aus einem dieser Farbfelder baut die Tönungs- und Schattierungsskala sie.
Was zählt als „diese beiden fallen ineinander“?
Ein ΔE OKLab unter 0,06 nach der Simulation, was ungefähr die Stelle ist, an der zwei Füllungen auf einen Blick nicht mehr trennbar sind. Die Simulation selbst ist der Matrixansatz nach Brettel: ein Modell der häufigen Fehlsichtigkeiten, keine Messung einer bestimmten Person, und sie sagt nichts über die selteneren Typen oder über erworbenen Sehverlust.
Eingabe aus
Farbpalette extrahieren
Palette Extractor
Zieht eine Palette aus N Farben aus einem Bild und exportiert sie als Hex, CSS-Variablen oder ASE-Farbfelder.
Farbenblindheit-Simulator
Colour Blindness Simulator
Rendert ein Bild so, wie es bei Protanopie, Deuteranopie, Tritanopie oder in Graustufen gesehen würde.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Farbabstufungen
Tint & Shade Scale
Erzeugt aus einer Farbe eine Helligkeitsskala von 50 bis 950 mit wahrnehmungsgleichen Schritten, fertig als Design-Tokens.
Kontrast prüfen
Contrast Checker
Bewertet ein Paar aus Vorder- und Hintergrundfarbe nach WCAG 2 und APCA und schlägt die nächste bestehende Farbe vor.
CSS-Token-Extraktor
CSS Token Extractor
Zieht Farben, Abstände, Radien und Schriften aus einem Stylesheet und schlägt einen Satz Custom Properties vor.
Farbpalette extrahieren
Palette Extractor
Zieht eine Palette aus N Farben aus einem Bild und exportiert sie als Hex, CSS-Variablen oder ASE-Farbfelder.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.