Studio für Farbumwandlung
Tippe einen Hex-Code, ein CSS-Schlüsselwort oder eine komplette oklch()-Funktion ein und bekomme sofort jede andere Schreibweise zurück. Danach baust du eine Abstufung, prüfst den Kontrast, simulierst die Wirkung bei Farbenblindheit und nimmst die Palette mit.
Hex mit 3, 4, 6 oder 8 Ziffern sowie rgb() und hsl() werden auch ohne Hilfe des Browsers verstanden.
Das CMYK hier ist die reine rechnerische Umwandlung, keine ICC-Separation. Ein druckfertiges CMYK hängt von Papier, Farbe und Ausgabeprofil ab und lässt sich aus einem sRGB-Wert allein nicht ableiten.
Große Überschrift mit 24 Pixeln
Zwischenüberschrift mit 16 Pixeln, halbfett
Fließtext mit 13 Pixeln. Diese Größe entscheidet, ob ein Farbpaar wirklich brauchbar ist.
Umgekehrt, mit dem Hintergrund als Textfarbe: Lc -60.3
Unter ΔE 0,05 sind zwei Felder für diese Person dieselbe Farbe, eine Palette, die auf ihrer Unterscheidung beruht, fällt also auseinander. Die Simulation folgt Viénot, Brettel und Mollon (1999) und wird im linearen Licht angewendet.
Der Abstand ist ΔE in OKLab; bei etwa 0,02 beginnen die meisten Menschen, zwei Felder als verschiedene Farben zu sehen. Klicke auf eine Zeile, um genau zu dieser Farbe zu springen.
So funktioniert es
Farbe hereinholen
Tippe eine beliebige CSS-Schreibweise, nutze die Bildschirm-Pipette, füge eine ganze Palette ein oder öffne ein Bild und klicke den gewünschten Pixel an.
Form geben
Regler für Helligkeit, Chroma und Farbton, die sich bei Gelb genauso verhalten wie bei Blau, dazu Abstufungen, Harmonien und Mischen.
Nachprüfen
WCAG 2.1 und APCA vor jedem beliebigen Hintergrund, plus eine Simulation für Farbenblindheit, die meldet, wenn zwei Felder zu einem verschmelzen.
Mitnehmen
Kopiere eine einzelne Schreibweise, exportiere CSS, Tailwind, SCSS, JSON, SVG oder einen Musterbogen, oder reiche die Palette an das nächste Werkzeug weiter.
Jede CSS-Farbsyntax
Hex mit 3, 4, 6 oder 8 Ziffern, Schlüsselwörter, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() und display-p3. Gelesen wird mit dem Parser des Browsers, es bleibt also nichts außen vor.
Abstufungen im gleichen Takt
Elf Stufen in OKLCH erzeugt, sodass jede Stufe den gleichen sichtbaren Abstand zur vorherigen hält – statt der ungleichen Sprünge einer HSL-Abstufung.
WCAG 2.1 und APCA
Das klassische Verhältnis plus der vorzeichenbehaftete Lc-Wert aus dem WCAG-3-Entwurf, gemessen vor dem Hintergrund deiner Wahl, nicht nur vor Weiß und Schwarz.
Prüfung auf Farbenblindheit
Protanopie, Deuteranopie und Tritanopie im linearen Licht simuliert, mit dem kleinsten Abstand zwischen zwei Feldern, damit du siehst, wann eine Palette zusammenbricht.
Pipette und Bilder
Nimm eine Farbe von jeder Stelle des Bildschirms auf, wo der Browser es erlaubt, oder öffne ein Bild, zoome auf den Pixel unter dem Zeiger und übernimm seinen exakten Wert.
Harmonien und Mischen
Komplementäre, analoge, triadische, geteilte, tetradische und monochrome Sätze, in OKLCH gedreht, dazu perzeptuelles Mischen entlang des kurzen Farbtonbogens.
Überallhin exportieren
CSS-Custom-Properties, ein @theme-Block für Tailwind, SCSS-Variablen, JSON, ein Musterbogen als SVG oder PNG und eine GIMP-Palettendatei.
Nichts verlässt den Tab
Kein Hochladen, kein API-Aufruf, kein Konto. Jede Umrechnung, jede Kontrastzahl und jede Palette berechnet dein eigener Browser.
Sofortige lokale Verarbeitung
Jede Umrechnung ist Arithmetik über drei Zahlen, es gibt also nichts abzuwarten und nichts zu verschicken. Das Lesen deiner Eingabe übernimmt die CSS-Engine des Browsers, weshalb Schlüsselwörter, color-mix() und Schreibweisen mit großem Farbumfang verstanden statt abgelehnt werden. Die perzeptuelle Arbeit – OKLCH-Abstufungen, Gamut-Mapping, ΔE-Abstände, Simulation von Farbenblindheit – sind ein paar hundert Gleitkommaoperationen, und selbst eine Palette aus einem großen Foto zu ziehen ist ein k-Means-Durchlauf über eine verkleinerte Kopie, der weit unter einer Sekunde braucht.
Das Mühsame an der Arbeit mit Farbe ist selten die Umrechnung selbst: Es ist eine Skala, die gleichmäßig fortschreitet, der Nachweis, dass ein Farbpaar lesbar ist, und das Ergebnis in der Form, die dein Code erwartet. Dieses Werkzeug verankert eine elfstufige Abstufung an der Farbe, die du schon hast, sagt dir, welche Stufen zurück in den sRGB-Raum geholt wurden und wie weit, benennt das nächstgelegene CSS-Schlüsselwort und Tailwind-Token mit gemessenem Abstand und exportiert die ganze Palette als Custom Properties, Tailwind-Theme-Block, SCSS, JSON oder Musterbogen.
Dieses Werkzeug hat keine Serverseite. Farben, die du tippst, Paletten, die du einfügst, und Bilder, die du öffnest, bleiben im Tab: Ein Bild wird in ein Canvas dekodiert, das dein Gerät nie verlässt, und mit dem Schließen des Tabs ist alles weg. Unterwegs ist nur, was du selbst in die Adresszeile setzt – die Palette wird dort kodiert, damit du einen Link teilen kannst, und sonst wird nichts über deine Sitzung festgehalten.
Häufige Fragen
QWelche Farbformate kann ich einfügen?+
Hex mit 3, 4, 6 oder 8 Ziffern, die 148 CSS-Schlüsselwörter, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch(), color-mix() und color(display-p3 …). Die Eingabe läuft durch den CSS-Parser des Browsers, es funktioniert also alles, was dein Browser in einem Stylesheet akzeptiert. Ohne diesen Parser liest das Werkzeug weiterhin Hex, rgb() und hsl().
QWarum bevorzugt das Werkzeug OKLCH gegenüber HSL?+
In HSL können zwei Farben mit demselben Helligkeitswert völlig unterschiedlich hell wirken – ein Gelb bei 50% liest sich viel heller als ein Blau bei 50%. OKLCH ist so gebaut, dass seine Helligkeit dem entspricht, was das Auge meldet, und deshalb drehen und interpolieren die Abstufungen, Harmonien und das Mischen hier in diesem Raum.
QWas bedeutet die ΔE-Zahl?+
Sie ist der Abstand zweier Farben in OKLab. Um 0,02 herum beginnen die meisten Menschen, zwei Felder als wirklich verschiedene Farben zu sehen, das ist also ein brauchbarer Maßstab: Er zeigt, wie weit eine Stufe abgedriftet ist, als sie zurück in sRGB gedrückt wurde, wie nah das nächste Tailwind-Token wirklich ist und ob zwei Palettenfarben eine Simulation der Farbenblindheit überstehen.
QErfüllt die Kontrastprüfung die WCAG?+
Das WCAG-2.1-Verhältnis wird genau so berechnet, wie die Spezifikation es definiert, vor dem Hintergrund deiner Wahl, und die Kennzeichnung unterscheidet Fließtext von der lockereren Schwelle für großen Text, statt ein einzelnes Bestanden-Zeichen zu zeigen. Daneben steht APCA, das für WCAG 3 vorgeschlagene perzeptuelle Maß – in der Praxis nützlich, aber weiterhin ein Entwurf und kein Konformitätskriterium.
QIst die CMYK-Ausgabe druckfertig?+
Nein, und die keines Browser-Werkzeugs ist es. Du bekommst die übliche rechnerische Umwandlung, die für einen groben Eindruck oder für Software reicht, die genau diese vier Zahlen erwartet. Eine echte Separation hängt von Papier, Farben und einem ICC-Ausgabeprofil ab und gehört daher in dein Layout- oder Bildprogramm.
QWird etwas hochgeladen, das ich einfüge?+
Nein. Es gibt keinen Serverteil, keine Auswertung deiner Farben und zu keinem Zeitpunkt der Umrechnung eine Netzwerkanfrage. Bilder werden lokal in ein Canvas dekodiert und beim Schließen verworfen. Die Palette wird in die Seiten-URL geschrieben, damit du sie teilen oder als Lesezeichen speichern kannst – das ist der einzige Ort, an dem deine Farben liegen, und er bleibt auf deinem Gerät, solange du den Link nicht selbst verschickst.