Farb-Tools
Diese Farb-Tools wandeln, vergleichen und erzeugen Farben in Ihrem Browser – mit den echten Formeln der Farbmetrik statt mit Näherungen: der realen Transferfunktion von sRGB, der relativen Luminanz nach WCAG 2.x, OKLab für alles Perzeptuelle und den Machado-Matrizen für Farbfehlsichtigkeit. Nichts wird irgendwohin gesendet, und jede angezeigte Zahl lässt sich von Hand nachprüfen.
Auswählen
Prüfen
Umwandeln
Farbcode umrechnen
Zwischen HEX, RGB, HSL, HSV, OKLCH und CMYK, in beide Richtungen
Tool öffnenHEX in RGB umwandeln
Hexfarbe in rgb()-Werte umrechnen, Alpha aus 8-stelligem Hex
Tool öffnenRGB in HEX umwandeln
rgb()- und rgba()-Werte in eine Hexfarbe, mit 3, 6 oder 8 Stellen
Tool öffnenHEX in HSL umwandeln
Hexfarbe in Farbton, Sättigung und Helligkeit, CSS-fertig
Tool öffnenHSL in HEX umwandeln
Farbton, Sättigung und Helligkeit in eine Hexfarbe umrechnen
Tool öffnenRGB in HSL umwandeln
rgb()-Werte in Farbton, Sättigung und Helligkeit umrechnen
Tool öffnen
Erzeugen
CSS-Gradient erstellen
Linearer oder radialer Gradient, CSS zum Kopieren, ohne graue Mitte
Tool öffnenMesh-Gradient-Generator
Mehrfarbiger Flussverlauf aus vier Farbflecken, als CSS, Tailwind oder PNG
Tool öffnenGlassmorphism-Generator
Milchglas mit Weichzeichner, Tönung und Glanzkante; CSS oder Tailwind
Tool öffnenCSS-Schatten-Generator
Gestapelte Schatten und Leuchten, als CSS oder Tailwind-Klasse
Tool öffnen
Wann sollten Sie ein browserbasiertes farbe-Tool verwenden?
Farb-Tools haben eine ungewöhnliche Fehlerart. Ein kaputtes PDF-Tool erzeugt ein kaputtes PDF, und Sie merken es sofort. Ein Farb-Tool, das still falsch rechnet, erzeugt eine plausible Zahl; Sie fügen sie in ein Stylesheet ein, und nichts weist Sie darauf hin – weder Browser noch Build noch Review –, bis jemand mit eingeschränktem Sehvermögen Ihren Button nicht lesen kann oder das Markenblau der gedruckten Broschüre einen Hauch daneben ist.
Die Fehler sind konkret, und sie wiederholen sich. Einen Kanal mit der Potenz 2.2 zu erheben, statt die echte stückweise definierte Transferfunktion von sRGB zu verwenden – das verschiebt jedes Kontrastverhältnis leicht und kippt die Grenzfälle um. Den Modulo in der Farbtonformel weglassen, sodass ein Sechstel des Farbraums einen negativen Winkel meldet. Einen halbtransparenten Vordergrund auf gar nichts komponieren und ein Kontrastverhältnis für eine Farbe melden, die nie auf dem Bildschirm erscheint. Eine Palette erzeugen, indem man die HSL-Helligkeit schrittweise durchläuft. Jedes davon erzeugt eine Ausgabe, die vollkommen vernünftig aussieht.
Deshalb ist die Rechnerei hier nach den Spezifikationen geschrieben und nicht nach den Näherungen, die überall kursieren. Kontrast ist die relative Luminanz nach WCAG 2.x mit der stückweisen Funktion, berechnet, nachdem Alpha gegen den tatsächlichen Hintergrund komponiert wurde. Alles Perzeptuelle – Skalen, Mischung, Verläufe, die nächstliegende Farbe, die noch besteht – läuft in OKLab, der Überarbeitung des Lab-Konzepts von 2020, die endlich die Drift im Blauton behoben hat, unter der ältere Farbräume litten. Die Farbenblindheits-Simulation verwendet die Matrizen von Machado, Oliveira und Fernandes, angewandt auf lineares RGB, nicht auf die gammakodierten Werte – das ist der Unterschied zwischen einer Simulation und einem Farbschleier.
Die Tools raten auch nicht. Ein fünfstelliger Hex-Wert ist ein Tippfehler, keine Farbe, und wird abgelehnt, statt zu etwas Plausiblem aufgefüllt zu werden; ein Konverter, der bei fehlerhafter Eingabe stillschweigend Schwarz zurückgibt, liefert Ihnen ein Farbfeld, an dem Sie keinen Grund zu zweifeln haben. Wo eine Umwandlung wirklich nicht exakt sein kann – CMYK ohne Druckprofil, eine OKLCH-Koordinate außerhalb des sRGB-Gamut –, sagt die Seite das, statt die Zahl mit derselben Zuversicht zu drucken wie die exakten.
Kein Teil davon braucht einen Server. Farbkonvertierung ist ein paar Dutzend Zeilen Arithmetik über drei Zahlen; eine Bildsimulation ist eine Schleife über eine Canvas, die Ihr Browser bereits hat. Die Content-Security-Policy der Website setzt connect-src 'self', sodass eine Markenpalette oder ein unveröffentlichter Screenshot, die Sie in den Simulator ziehen, den Tab nicht verlassen können, selbst wenn etwas hier versuchte, sie zu senden.
Wo Sie anfangen: Farbwähler für eine Farbe und ihre ganze Rampe, Kontrast-Checker, wenn ein Paar AA bestehen muss, Farbkonverter für den Wechsel zwischen Formaten, Farbcodes, um den Hex-Wert einer benannten Farbe nachzuschlagen, und der Farbsehtest, um zu sehen, wie Ihre Benutzeroberfläche auf den rund einen Mann von zwölf wirkt, der Rot und Grün nicht so sieht wie Sie.
Häufig gestellte Fragen
Welches Farbformat sollten Sie in CSS wirklich verwenden?
Hex für einen Wert, den Sie einmal eintippen und nie wieder anfassen – er ist kompakt, überall verständlich und verlustfrei. HSL, wenn ein Mensch ihn von Hand bearbeiten wird, denn „ein bisschen dunkler“ und „weniger gesättigt“ sind dort Änderungen an einer einzigen Zahl. OKLCH, wenn ein Programm die Farbe berechnet: eine erzeugte Skala, ein Verlauf, ein interpolierter Hover-Zustand. OKLCH ist das einzige der drei, dessen Helligkeitszahl dem entspricht, was das Auge meldet – gleichmäßig verteilte Zahlen sehen also auch gleichmäßig verteilt aus.
Warum bekommen zwei Tools für denselben Hex-Wert unterschiedliche HSL-Werte?
Fast immer Rundung statt Meinungsverschiedenheit. HSL in der üblichen Schreibweise – ein ganzzahliger Farbton und ein Zehntel Prozent – hält weniger verschiedene Werte als die 16.7 Millionen, die ein Hex-Wert ausdrücken kann; mehrere Hex-Werte fallen also auf dasselbe HSL zusammen, und die Rückumwandlung landet auf dem Wert, den die Formel eben liefert. Wo sich Tools wirklich unterscheiden, ist die Meldung eines Graus: Der Farbton einer Farbe mit Chroma null ist undefiniert, manche geben 0 aus, andere geben aus, was die Rechnerei produziert hat.
Ist das Kontrastverhältnis hier dasselbe, das Lighthouse verwendet?
Ja. Es ist die WCAG-2.x-Formel: Jeden Kanal mit der stückweisen Transferfunktion von sRGB linearisieren, mit 0.2126, 0.7152 und 0.0722 gewichten, zu beiden Luminanzen 0.05 addieren und den größeren Wert durch den kleineren teilen. Der häufigste Fehler in selbstgebauten Implementierungen ist, die Kanäle stattdessen mit der Potenz 2.2 zu erheben – nah dran, aber es verschiebt das Verhältnis genug, um ein Grenzpaar von Bestehen auf Scheitern zu kippen. Die daneben angezeigte APCA-Zahl ist ein völlig anderes Modell und dient der Information – kein Standard, auf dessen Konformität Sie sich berufen könnten.
Kann ich für den Druck CMYK-Werten aus einem Web-Tool trauen?
Als Ausgangspunkt ja, als Spezifikation nein. CMYK ist geräteabhängig: Dieselbe sRGB-Farbe ergibt auf gestrichenem Papier andere Farbanteile als auf unbehandeltem, und auf einer anderen Druckmaschine mit anderen Farben wieder andere. Genau das kodiert ein ICC-Profil, und keine Webseite hat eines für Ihren Drucker. Schicken Sie der Druckerei die sRGB- oder Pantone-Referenz und lassen Sie sie mit dem Profil für den jeweiligen Auftrag umrechnen.
Wie genau ist ein Online-Farbsehtest?
Es ist ein Hinweis zur Vorsorge, keine Diagnose. Ein klinisches Ergebnis stammt von einem Anomaloskop unter kontrolliertem Licht an einem kalibrierten Display – keine dieser Bedingungen erfüllt Ihr Schreibtisch. Was ein Online-Test ehrlich leisten kann: Ihnen sagen, ob Sie dieselben Figuren erkennen wie jemand mit typischem Farbsehen – und das reicht, um der Sache nachzugehen. Die Tafeln hier werden aus Verwechslungspaaren erzeugt, die per Simulation gefunden wurden, statt aus einem urheberrechtlich geschützten Tafelsatz abgescannt zu sein. Das beseitigt die größte Fehlerquelle der üblichen Online-Version: ein JPEG eines Drucks von 1917, erneut komprimiert, mit der Farbgenauigkeit, die der Scanner zufällig hatte.
Warum sehen die Tints und Shades hier gleichmäßiger aus als die, die ich anderswo bekomme?
Weil sie in OKLCh erzeugt werden und nicht durch schrittweises Durchlaufen der HSL-Helligkeit. HSL gewichtet alle drei Kanäle gleich, während das menschliche Sehen Grün etwa zehnmal stärker gewichtet als Blau – eine darauf aufgebaute Rampe wirkt bei identischen Zahlen hell in den Gelbtönen und dunkel in den Blautönen. Die OKLCh-Helligkeit entlang einer Kurve zu staffeln, den Farbton festzuhalten und das Chroma an beiden Enden auslaufen zu lassen, ergibt Stufen, die so gleichmäßig aussehen, wie sie messen – und jede Station wird zurück in den sRGB-Gamut geklemmt, sodass keine als flach abgeschnittene Farbe gerendert wird.
Was gibt es sonst noch auf ToolsByUs?
- PDF-ToolsPDFs zusammenfügen, teilen, drehen und umwandeln – ohne Upload.
- Bild-ToolsBilder im Browser komprimieren, skalieren und umwandeln.
- Video-ToolsVideos im Browser bearbeiten – ohne Upload, ohne Wasserzeichen.
- Audio-ToolsAudio im Browser schneiden, umwandeln und bearbeiten.
- Creator-ToolsBanner, Avatare, Emotes und Titelbilder für jede Plattform zuschneiden und optimieren.
- JSON-ToolsJSON-Dokumente vergleichen, formatieren, validieren und erkunden.
- Text-ToolsText und Code vergleichen, umwandeln und umformen.
- Kodier-ToolsBase64, URL-Kodierung, Hashes und Token-Analyse.
- GeneratorenKennungen, Platzhaltertexte und Codes.