Farbwähler: HEX, RGB, HSL und CMYK

So nutzen Sie den Farbwähler

Klicken Sie auf das Farbfeld, um die Farbauswahl Ihres Geräts zu öffnen, oder geben Sie einen HEX-Code wie #1E90FF ins Feld daneben ein. Die große Farbfläche aktualisiert sich, und alle Codes darunter ändern sich mit. Tippen Sie neben einem Format auf Kopieren, um es in die Zwischenablage zu legen, bereit für CSS, eine Design-App oder ein Dokument.

Um eine Farbe aus einem Foto oder Logo zu übernehmen, wählen Sie Aus einem Bild aufnehmen, laden die Datei und tippen auf die gewünschte Stelle. Das Bild bleibt auf Ihrem Gerät. In Chrome und Edge am Computer gibt es außerdem Vom Bildschirm aufnehmen, eine Pipette, die jedes Pixel auf dem Bildschirm aufnimmt, auch außerhalb des Browsers.

HEX, RGB, HSL und CMYK erklärt

• HEX ist der sechsstellige Code im Web, etwa #FF5733. Jedes Ziffernpaar steht für den Rot-, Grün- und Blauanteil von 00 bis FF.
• RGB gibt dieselben drei Anteile als Zahlen von 0 bis 255 an. Bildschirme erzeugen jede Farbe, indem sie rotes, grünes und blaues Licht mischen.
• HSL beschreibt eine Farbe über Farbton (Position im Farbkreis, 0 bis 360°), Sättigung (wie kräftig) und Helligkeit. Mit diesem Format machen Sie eine Farbe am leichtesten heller, dunkler oder gedeckter.
• CMYK ist die Mischung aus Cyan, Magenta, Gelb und Schwarz im Druck. Die Werte hier sind eine direkte Umrechnung. Druckereien arbeiten mit Farbprofilen, fordern Sie also einen Proof an, wenn es auf die exakte Farbe ankommt.

Abstufungen und passende Farben

Die Reihe Abstufungen behält Farbton und Sättigung und ändert die Helligkeit von sehr hell bis sehr dunkel. Das ist praktisch für Hover-Zustände, Rahmen und Hintergründe aus derselben Farbfamilie. Die Reihe Passende Farben nutzt die Regeln des Farbkreises: die Komplementärfarbe gegenüber, die beiden geteilt komplementären Farben daneben, zwei analoge Nachbarn und zwei triadische Farben ein Drittel weiter. Tippen Sie auf ein Feld, um es zur Hauptfarbe zu machen.

Kontrast und Lesbarkeit

Die Kontrastfelder zeigen, wie gut Ihre Farbe als Text auf Weiß und auf Schwarz lesbar ist, nach dem WCAG-Kontrastverhältnis. 4,5:1 erfüllt AA für normalen Text, 3:1 erfüllt AA für großen Text wie Überschriften, und 7:1 erfüllt die strengere Stufe AAA. Fällt Ihre Markenfarbe auf Weiß durch, nehmen Sie für Text eine dunklere Abstufung und behalten Sie das Original für Buttons und Akzente.

Farben auf verschiedenen Bildschirmen

Derselbe Code kann auf verschiedenen Bildschirmen leicht unterschiedlich aussehen, weil Helligkeit, Farbraum und Kalibrierung abweichen. Handys mit OLED-Displays und großem Farbraum zeigen Farben oft kräftiger als ein Büromonitor. Wenn Farbtreue wichtig ist, prüfen Sie Ihr Design auf mehr als einem Gerät.