OKLCH-basierte Brand-Paletten. Wähle eine Basis, erhalte alle klassischen Harmonien plus eine 50–950 Tonwertskala. Sperren, neu würfeln, als CSS / Tailwind v4 / SCSS / JSON exportieren.
OKLCH-basierte Brand-Paletten. Wähle eine Basis, erhalte alle klassischen Harmonien plus eine 50–950 Tonwertskala. Sperren, neu würfeln, als CSS / Tailwind v4 / SCSS / JSON exportieren.
Unser Color Picker & Converter ist für eine Farbe nach der anderen — auswählen / konvertieren / kopieren. Dieses Tool ist für Paletten: Gib eine Basisfarbe ein und erhalte ein komplettes brand-fähiges System (Harmonien + Tonwertskala) in einem Zug. Es ist der Unterschied zwischen dem Kauf eines einzelnen Hemdes und einer ganzen Garderobe.
HSL verteilt die Farbtöne ungleichmäßig (Gelb bei 60° wirkt viel heller als Blau bei 240°, selbst bei demselben Helligkeitswert). Eine triadische Palette in HSL hat ein Feld, das deutlich heller oder matter wirkt als die anderen. OKLCH ist wahrnehmungsmäßig gleichmäßig — drei Felder mit derselben OKLCH-Helligkeit sehen gleich hell aus. Deshalb wechseln alle modernen Designsysteme (Apple HI, Tailwind v4, IBM Carbon) für Harmonien und Skalen zu OKLCH.
Deine Markenfarben verlassen dein Gerät nie. Öffne DevTools → Network, und du siehst null ausgehende Anfragen während jeder Operation.
Tipp: Drücke die Leertaste, um nicht gesperrte Felder neu zu würfeln.
OKLCH-Harmonien, Tonwertskalen, Sperren-und-Neuwürfeln, Design-Token-Exporte — und ein paar kleine Details, die das Tool tatsächlich Spaß machen lassen.
Komplementär, analog, triadisch, tetradisch, Split-Komplementär, monochromatisch — alle in OKLCH berechnet, sodass eine triadische Palette aus drei satten, hellen Farben gleichmäßig hell bleibt. Keine HSL-Trübheit.
Gib deine Markenfarbe ein und erhalte eine Tailwind-förmige 50, 100, 200, … 900, 950 Tonwertskala, erzeugt durch Verlauf der Helligkeit entlang einer OKLCH-Kurve. Die Chroma wird an den Extremen komprimiert, damit die Farben im sRGB-Gamut bleiben.
Hefte ein beliebiges Feld an (Schloss-Symbol) und drücke Neu würfeln (oder einfach die Leertaste), um den Rest innerhalb der gewählten Harmonie zu variieren. Schnell iterieren, behalten was du liebst.
CSS Custom Properties (--brand-500), Tailwind v4 @theme-Block, SCSS Map und JSON Design Tokens, bereit für Style Dictionary / Figma Tokens. Plus ein 1200×200 PNG-Streifen mit Farbfeldern.
Jedes Feld zeigt sein WCAG-Kontrastverhältnis gegenüber dem besseren Wert von Schwarz oder Weiß, mit einem AA / AAA / fail-Badge. Erkenne Barrierefreiheitsprobleme, bevor sie ausgeliefert werden.
Jedes Byte bleibt auf deinem Gerät. OKLCH-Mathematik, Harmoniegenerierung, Skalenableitung, PNG-Export — alles läuft als JavaScript lokal. Öffne DevTools → Network und überprüfe null ausgehende Anfragen.
Vier Schritte von einer Basisfarbe zu einer kompletten, design-token-fertigen Palette.
Klicke auf das Farbfeld, füge einen HEX-Wert ein oder drücke Zufällige Basis als Inspiration. Das Tool zentriert die gesamte Palette auf diese Farbe — sowohl die Harmoniefelder als auch die 11-stufige Tonwertskala.
Standard ist Analog — drei Farben innerhalb von 30° der Basis, perfekt für ruhige Brand-Paletten. Komplementär für kontrastreiche Akzente. Triadisch / Tetradisch für redaktionelle / verspielte Marken. Monochromatisch für Tonsysteme mit einem Farbton. Alle in OKLCH berechnet, damit sie gleichmäßig hell bleiben.
Klicke auf das Schloss-Symbol jedes Feldes, das du behalten möchtest, und drücke dann Leertaste (oder Neu würfeln), um den Rest innerhalb der Harmonie zu variieren. Schnell iterieren. Bearbeite jedes Feld direkt, indem du auf sein HEX-Feld klickst, falls du einen exakten Wert treffen willst.
Kopiere die CSS-Ausgabe (Custom Properties), Tailwind v4 (@theme-Block), SCSS Map oder JSON Design Tokens. Oder drücke PNG herunterladen für einen 1200×200 Farbfeldstreifen, der direkt in ein Design-Briefing eingefügt werden kann.
Vier häufige Szenarien, in denen ein datenschutzorientiertes OKLCH-Paletten-Tool das händische Tunen von Hex-Codes in Figma schlägt.
Du hast eine Markenfarbe und brauchst ein System darum. Gib den HEX-Wert ein, wähle Analog, würfle neu, bis zwei Begleitfarben harmonieren, sperre alle drei. Wechsle in die Tonwertskalen-Ansicht, kopiere den Tailwind-@theme-Block, füge ihn in die app.css des neuen Projekts ein. Gesamtzeit: 5 Minuten.
Das Standard-Tailwind indigo ist nicht deine Marke. Deine Marke ist #5B3FCD. Gib es ein und erhalte eine 11-stufige Tonwertskala, die Tailwinds Aufteilung perfekt spiegelt. Kopiere den @theme-Block — jedes bg-brand-500 / text-brand-700 funktioniert einfach.
Jedes Feld zeigt sein WCAG-Kontrastverhältnis + AA/AAA-Badge. Prüfe stichprobenartig, dass brand-500 AA gegen Weiß erreicht und dass brand-100 als Hintergrundton mit brand-900-Text lesbar bleibt. Behebe problematische Felder, indem du sie einzeln neu würfelst.
Agenturen / Multi-Brand-Unternehmen pflegen N parallele Designsysteme, jedes mit derselben Form, aber einem anderen Markenfarbton. Verwende denselben Harmonie-+-Tonwertskalen-Workflow für jede Marke, exportiere jede als JSON-Tokens, importiere sie in Style Dictionary. Konsistente Form, eigenständige Identität.
Deine Markenfarben verlassen dein Gerät nie. Öffne DevTools → Network, und du siehst null ausgehende Anfragen während jeder Operation.
canvas; das Bild der Farbfelder wird vollständig im Browser-Speicher erzeugt und als Blob heruntergeladen — nichts wird über das Netzwerk übertragen.
Handverlesene Lektüre über OKLCH-Paletten, Brand-Farbsysteme und Design Tokens.
Why OKLCH replaces HSL for design systems: perceptual lightness, predictable chroma, wide-gamut support.
From sRGB linearization to relative luminance — every step of the contrast formula, with worked examples.
Unser Color Picker & Converter ist für eine Farbe nach der anderen — auswählen / konvertieren / kopieren. Dieses Tool ist für Paletten: Gib eine Basisfarbe ein und erhalte ein komplettes brand-fähiges System (Harmonien + Tonwertskala) in einem Zug. Es ist der Unterschied zwischen dem Kauf eines einzelnen Hemdes und einer ganzen Garderobe.
HSL verteilt die Farbtöne ungleichmäßig (Gelb bei 60° wirkt viel heller als Blau bei 240°, selbst bei demselben Helligkeitswert). Eine triadische Palette in HSL hat ein Feld, das deutlich heller oder matter wirkt als die anderen. OKLCH ist wahrnehmungsmäßig gleichmäßig — drei Felder mit derselben OKLCH-Helligkeit sehen gleich hell aus. Deshalb wechseln alle modernen Designsysteme (Apple HI, Tailwind v4, IBM Carbon) für Harmonien und Skalen zu OKLCH.
Es ist die Tailwind-artige Markenfarben-Skala: indigo-50 (am hellsten), indigo-100, indigo-200, … indigo-900, indigo-950 (am dunkelsten). Gib deine Markenfarbe ein und das Tool erzeugt automatisch alle 11 Stufen, indem es die OKLCH-Helligkeit entlang einer festen Kurve durchläuft. Das Ergebnis ist ein Drop-in-Ersatz für jeden Tailwind-Paletten-Token in deinem Markenfarbton.
Klicke auf das Schloss-Symbol oben links eines beliebigen Feldes — es bleibt fixiert. Drücke dann Neu würfeln oder die Leertaste, um jedes nicht gesperrte Feld innerhalb der gewählten Harmonie zu variieren. So findest du eine großartige Palette: Markenfarbe fixieren, an die du dich bereits gebunden hast, und Variationen darum herum erkunden.
Nein. OKLCH-Mathematik, Harmoniegenerierung, Tonwertskalen-Ableitung, Kontrastverhältnis-Berechnung, PNG-Export, jede Kopie in die Zwischenablage — alles läuft als JavaScript auf deinem Gerät. Öffne DevTools → Network und du siehst null ausgehende Anfragen. Füge deine Markenfarben, internen Design Tokens, NDA-geschützten Paletten ein — nichts verlässt deinen Laptop.