Farbwähler

Alle Farben auf dieser Seite liegen im sRGB-Farbraum, dem Standardfarbraum des Webs, seit Browser ihn Ende der 1990er-Jahre übernommen haben. Ein Bildschirm mischt rotes, grünes und blaues Licht, und jeder Kanal hat 256 Stufen (0–255). Das ergibt 16.777.216 mögliche Farben. RGB schreibt diese drei Zahlen direkt; HEX schreibt dieselben drei Zahlen im Hexadezimalsystem, jeweils zweistellig. #FF6600 bedeutet also Rot 255, Grün 102, Blau 0. Die dreistellige Kurzform verdoppelt jede Ziffer: #F60 entspricht #FF6600.

HSL und HSB (auch HSV genannt) beschreiben dieselben Farben auf eine Weise, die sich leichter von Hand anpassen lässt. Der Farbton ist ein Winkel auf dem Farbkreis: 0° Rot, 120° Grün, 240° Blau. Der Unterschied liegt in der letzten Zahl. Bei HSL ist eine Helligkeit von 100 % immer Weiß und 50 % die reinste Form des Farbtons; bei HSB ist eine Helligkeit von 100 % der reine Farbton, und Weiß erfordert eine Sättigung von 0 %. Design-Apps wie Photoshop und Figma verwenden HSB in ihren Farbwählern, während CSS hsl() nativ versteht. Deshalb sind oben beide aufgeführt.

Bildschirme addieren Licht; Drucker subtrahieren es mit cyan, magenta, gelber und schwarzer Tinte. Die beiden Systeme decken unterschiedliche Farbbereiche ab, sogenannte Gamuts. Sehr gesättigte Bildschirmfarben wie ein leuchtendes RGB-Grün, ein elektrisches Blau oder ein neonfarbenes Orange liegen außerhalb dessen, was Prozessfarben wiedergeben können, und wirken im Druck daher matter als auf dem Monitor.

Die CMYK-Werte hier verwenden die einfache mathematische Umrechnung ohne ICC-Profil. Das ist für ein grobes Briefing nützlich, aber nicht für den Druck. Eine Druckerei rechnet mit einem Profil für ihr Papier und ihre Maschine um, etwa FOGRA39 in Europa oder GRACoL in den USA, und dieselbe RGB-Farbe kann je nach Profil andere Farbanteile ergeben. Senden Sie für Druckarbeiten den RGB- oder HEX-Wert zusammen mit dem Profil, das Ihre Druckerei verlangt.

WCAG 2.1 vergleicht die relative Leuchtdichte zweier Farben: die hellere plus 0,05, geteilt durch die dunklere plus 0,05. Das Ergebnis reicht von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text, also 18 Punkt oder 14 Punkt fett; Stufe AAA erhöht das auf 7:1 und 4,5:1. Bedienelemente wie Rahmen von Eingabefeldern und Icons benötigen nach Erfolgskriterium 1.4.11 einen Kontrast von 3:1 zu ihrer Umgebung.

Die Leuchtdichte gewichtet Grün weit stärker als Blau, weil das Auge dafür am empfindlichsten ist. Deshalb fällt gelber Text auf Weiß klar durch, während Dunkelblau auf Weiß leicht besteht, obwohl beide Farben voll gesättigt wirken. Logos und rein dekorativer Text sind von der Regel ausgenommen.

Die Bildpalette liest Ihre Datei mit dem Canvas des Browsers, verkleinert sie auf höchstens 200 Pixel an der langen Seite und gruppiert ähnliche Pixel mit dem Median-Cut-Verfahren, das Paul Heckbert 1982 beschrieben hat: Der Farbbereich wird immer wieder entlang seines breitesten Kanals geteilt, bis sechs Gruppen übrig sind, und der Durchschnitt jeder Gruppe wird zu einem Farbfeld. Transparente Pixel werden ignoriert, sodass ein Logo auf transparentem Hintergrund die Farben des Logos liefert.

Wenn Sie die Farben haben, funktioniert ein flaches Logo oft besser als Vektorgrafik. Der Bild-in-SVG-Konverter zeichnet es in Formen nach, die genau diese Farben behalten. Und wenn Sie einen Kanalkopf gestalten, passt die YouTube-Banner-Größe das Motiv unter Beachtung des sicheren Bereichs auf 2560 × 1440 an.