Farbcode-Picker
Jedes Format, eine Farbe

Eine Farbe, sechs Schreibweisen

Eine Farbe hat keine einzige Schreibweise. Dasselbe Blau ist #1B5FD1 in einem Stylesheet, rgb(27, 95, 209) in einem Canvas-Aufruf und hsl(217, 77%, 46%) in einem Design-Token.

Alle bezeichnen dieselben Pixel. Deshalb ändert die Umrechnung von hex in rgb nichts an der Farbe, nur daran, wer sie lesen kann.

Das Lästige ist, dass jedes Format zu einer anderen Aufgabe passt. Daher schickt Sie eine Seite, die eines zeigt und den Rest verbirgt, auf die Suche nach einer anderen Seite.

Dieser Farbcode-Picker zeigt alle gleichzeitig und schreibt jedes Feld neu, sobald Sie irgendeines davon bearbeiten.

Der Einsatzzweck jeder Farbnotation

Zuerst einmal ist Hex kurz und lässt sich sauber einfügen. Es ist das Format, das Ihnen ein Designer gibt, und das, was die meisten Stylesheets enthalten.

RGB nennt die drei Kanäle klar. Also passt es zu allem, was mit einer Farbe rechnet: einem Canvas, einem Verlauf, einem Shader.

HSL trennt den Farbton von der Helligkeit. Danach greifen Sie, wenn Sie dieselbe Farbe eine Stufe dunkler wollen, denn dafür ändern Sie nur eine Zahl.

Deckkraft gehört zu rgba und hsla statt zu hex, allerdings trägt auch ein achtstelliger Hex-Wert sie. Diese Seite schreibt die Form, die Sie brauchen.

Hex von Hand in RGB umrechnen

Eine Hex-Farbe besteht aus drei Paaren, und jedes Paar ist ein Kanal zur Basis sechzehn. Also ist #1B der Rotkanal.

Jedes Paar wird zu einer Zahl von 0 bis 255. Die Buchstaben a bis f zählen einfach nach der 9 weiter, also bedeutet 1B einmal sechzehn plus elf, und das ergibt 27.

Ein dreistelliger Hex-Wert verdoppelt jede Ziffer. Daher bedeutet #abc #aabbcc, eine Kurzform, die man kennen sollte, wenn man das Stylesheet eines anderen liest.

In die andere Richtung, von rgb in hex, wird jeder Kanal wieder zu zwei Hex-Ziffern. Die MDN-Referenz zu Farbwerten listet jede Syntax, die ein Browser akzeptiert.

Warum der Kontrastwert hier steht

Die Frage nach "welche Farbe ist das" lautet fast immer "kann ich Text darauf setzen". Deshalb steht die Antwort neben der Farbe und nicht auf einer anderen Seite.

Die beiden Werte vergleichen Ihre Farbe mit Weiß und mit Schwarz. Ein Verhältnis von 4.5:1 besteht AA für Fließtext, während 3:1 nur für großen Text reicht.

Diese Schwellen stammen aus WCAG, und jeder Prüfer berechnet sie gleich. Dieser folgt der Formel genau, statt sie zu runden.

Eine Farbe, die als Text durchfällt, kann trotzdem als Hintergrund, Rahmen oder Diagrammfläche funktionieren. Der Hinweis unter den Werten sagt, welcher Fall vorliegt.

HSL ohne Mathematik lesen

Zuerst ist der Farbton ein Winkel auf einem Farbkreis. Null ist Rot, 120 Grün, 240 Blau, und die Zahlen dazwischen mischen sie.

Dann ist die Sättigung die Menge an Farbe. Bei 0% wird jeder Farbton grau, und bei 100% ist er so kräftig, wie der Bildschirm es zulässt.

Bei der Helligkeit steht 0% für Schwarz und 100% für Weiß. Ihre Farbe liegt bei 50%, und deshalb landet eine Markenfarbe meist in der Nähe.

Ein dunklerer Button hat also denselben Farbton und dieselbe Sättigung bei geringerer Helligkeit. Das ist eine einzige Zahl, und die Familie wirkt weiterhin verwandt.

Wann zwei Farben sich nicht begegnen sollten

Manche Paare lesen sich schlecht, selbst wenn der Kontrastwert besteht. Rot auf Grün ist das übliche Beispiel, denn das Verhältnis ignoriert Farbenblindheit.

Etwa jeder zwölfte Mann sieht Rot und Grün anders. Daher verliert ein Diagramm, das seine Linien nur über den Farbton trennt, diese Linien.

Fügen Sie stattdessen ein zweites Signal hinzu. Eine Beschriftung, ein Strichmuster oder eine Form trägt die Bedeutung, wenn die Farbe es nicht tut.

Testen Sie außerdem in Graustufen. Liest sich das Bild ohne Farbe noch, liest es sich für alle.

Ein weiteres Paar erwischt Leute: ein mittleres Grau auf einer mittleren Farbe. Beide liegen nahe der Skalenmitte, also sinkt das Verhältnis unter drei, und die Wörter verschwimmen mit der Fläche dahinter.

Wo jeder Code landet

CSS akzeptiert alle drei Formen, also nehmen Sie die, die sich in der Datei am besten liest. Die meisten Teams schreiben hex für feste Farben und hsl innerhalb einer Berechnung.

Dagegen neigen Designtools also zu hex. Das steckt in einer Übergabedatei, und das fügt ein Entwickler zuerst ein.

Mobil ist es anders. Swift will jeden Kanal von 0 bis 1, und Android will einen achtstelligen Hex-Wert mit der Deckkraft vorn.

Diese Seite schreibt all diese Formen, sodass eine Farbe aus einer Designdatei in eine App wandert, ohne dass jemand rechnet.

Die Leiter mischt, statt zu raten

Jede Stufe mischt Ihre Farbe um einen festen Betrag in Richtung Weiß oder Schwarz. Dadurch bleibt der Farbton stabil, während sich die Helligkeit bewegt, und genau das sollte eine Tonreihe tun.