Farbwähler

So verwenden Sie den Farbwähler

1. Klicken Sie auf das Farbfeld unter Farbe auswählen, um den Farbdialog Ihres Browsers zu öffnen, und wählen Sie eine Farbe. Sie können auch einen Wert in das Feld Farbcode tippen oder einfügen: einen HEX-Code wie #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%) oder einen CSS-Namen wie tomato.
2. Die große Vorschau aktualisiert sich sofort; der HEX-Code steht darin in Schwarz oder Weiß – je nachdem, was auf diesem Hintergrund besser lesbar ist.
3. Unter Farbcodes kopieren Sie das gewünschte Format mit dem Button Kopieren daneben: HEX, RGB, HSL, HSV oder CMYK.
4. Klicken Sie auf Zufällige Farbe, wenn Sie Inspiration suchen, oder auf Vom Bildschirm aufnehmen (in Browsern, die das unterstützen, etwa Chrome und Edge), um ein beliebiges Pixel auf Ihrem Bildschirm aufzunehmen – auch in anderen Fenstern.

Alles geschieht in Ihrem Browser: Keine Farbe und kein Bild wird irgendwohin gesendet.

Was die Farbcodes bedeuten

• HEX ist die sechsstellige hexadezimale Schreibweise aus HTML und CSS. Jedes Ziffernpaar steht für einen Kanal (Rot, Grün, Blau) von 00 bis FF; #1E90FF bedeutet also Rot 30, Grün 144, Blau 255.
• RGB gibt dieselben drei Kanäle als Dezimalzahlen von 0 bis 255 an. Das erwarten die meisten Designprogramme und Programmierbibliotheken.
• HSL beschreibt eine Farbe über Farbton (einen Winkel von 0° bis 360° auf dem Farbkreis), Sättigung und Helligkeit. Damit machen Sie eine Farbe heller oder dunkler, indem Sie nur eine Zahl ändern.
• HSV (auch HSB) verwendet Farbton, Sättigung und Hellwert. Auf diesem Modell beruhen die Farbquadrate in Photoshop, Figma und vielen anderen Programmen.
• CMYK drückt die Farbe als Prozentwerte der Druckfarben Cyan, Magenta, Gelb und Schwarz aus.

Zu den CMYK-Werten

Die CMYK-Codes sind eine einfache Umrechnung: K = 1 − max(R, G, B), dann C = (1 − R − K) / (1 − K), entsprechend für M und Y. Das ist die Standardformel aus dem Lehrbuch, sie nutzt aber kein ICC-Profil. Der echte Druck hängt von Maschine, Papier und Farben ab; eine Druckerei rechnet Ihre Farben mit ihrem eigenen Profil um, und das Ergebnis kann abweichen. Nutzen Sie diese Werte als Ausgangspunkt, nicht als Proof für den Druck.

Die Kontrastwerte lesen

Unter dem HEX-Code zeigt die Vorschau Kontrast auf Weiß und Kontrast auf Schwarz, berechnet mit der Formel für die relative Leuchtdichte aus WCAG 2. Für normalen Fließtext braucht es auf Stufe AA ein Verhältnis von mindestens 4,5:1, für großen Text und Bedienelemente 3:1. Erreicht Ihre Farbe auf Weiß nur 3:1, verwenden Sie sie für große Überschriften oder Symbole und nehmen Sie für Text eine dunklere Abstufung.

Tipps

• HEX-Codes funktionieren auch ohne #: 1e90ff geht ebenso wie Kurzformen wie f60.
• Werte mit Transparenz wie rgb(0 0 0 / 50%) werden akzeptiert; der Farbwähler zeigt die deckende Farbe.
• Der Farbdialog des Browsers sieht je nach System anders aus. Wenn Sie einen genauen Wert brauchen, ist die Eingabe im Feld Farbcode immer exakt.