Farbwähler (Color Picker) online

Farbwähler und Palettengenerator in einem

Mit diesem Farbwähler (Color Picker) finden Sie einen Farbton und erhalten seinen Farbcode in allen gängigen Schreibweisen: HEX, RGB, HSL und CMYK. Dazu kommen der nächste CSS-Farbname, neun Abstufungen, die Farbharmonien, der Kontrast zu Weiß und Schwarz sowie eine Farbpalette aus fünf passenden Tönen. Alles wird in Ihrem Browser berechnet, es werden keine Daten übertragen.

So wählen Sie eine Farbe

1. Klicken oder ziehen Sie im Quadrat „Sättigung und Helligkeit“ und stellen Sie den Regler „Farbton“ ein. Die Pfeiltasten funktionieren ebenfalls. Dazu kommen der „Farbwähler des Browsers“ und, in Chrome oder Edge am Computer, die Schaltfläche „Pipette“.
2. Oder tippen Sie einen Code in das Feld HEX, RGB oder HSL: Aus rgb(0,128,0) wird #008000, in CSS heißt diese Farbe green. Jede Zeile hat eine Schaltfläche „Kopieren“.
3. Unter „Abstufungen“ und „Farbharmonien“ wählt ein Klick auf ein Farbfeld die Farbe aus und kopiert ihren Code.
4. „Palette erstellen“ (oder die Leertaste) liefert fünf Farben. Setzen Sie bei den Farben, die bleiben sollen, das Häkchen „Sperren“ und erstellen Sie neu. „HEX-Codes kopieren“, „Als CSS-Variablen kopieren“ und „Palette speichern“ erledigen den Rest; höchstens zehn Paletten bleiben auf dem Gerät.

Die aktuelle Farbe steht in der Adresse der Seite hinter dem Zeichen #. Wer diese Adresse öffnet, sieht dieselbe Farbe. Sie wird außerdem für Ihren nächsten Besuch gemerkt.

HEX, RGB oder HSL: Wann nimmt man was?

Alle drei beschreiben dieselben Bildschirmfarben. HEX ist am kürzesten: #ffa500 hat sieben Zeichen und lässt sich bequem in ein Stylesheet oder ein Grafikprogramm einfügen. RGB nennt die Anteile von Rot, Grün und Blau von 0 bis 255: rgb(255, 165, 0). HSL trennt Farbton (ein Winkel von 0 bis 360°), Sättigung und Helligkeit: hsl(39, 100%, 50%). Damit ändert man eine Farbe am leichtesten von Hand: Die letzte Zahl hellt auf, die erste dreht den Farbton. Die Website bietet auch eigene Konverter für jedes Formatpaar, zum Beispiel HEX zu RGB.

Farben finden, die zusammenpassen

Stellen Sie sich alle Farbtöne auf einem Kreis vor: Rot bei 0°, Grün bei 120°, Blau bei 240°. Harmonien sind feste Abstände auf diesem Farbkreis. Ein Beispiel mit dem Blau #1f5fe0, Farbton 220°:

• Komplementärfarbe (220 + 180 = 40°): das Orange #e0a01f.
• Analoge Farben (190° und 250°): #1fc0e0 und #401fe0.
• Triade (340° und 100°): #e01f5f und #5fe01f.

Das Werkzeug zeigt zusätzlich die Tetrade (alle 90°) und die teilkomplementären Farben (±150°). Für die Mengen halten sich Raumgestalter und Grafiker gern an die Faustregel 60-30-10: 60 % Hauptfarbe (Wände, Seitenhintergrund), 30 % Nebenfarbe (Möbel, Kästen), 10 % Akzentfarbe (Kissen, Schaltflächen). Das ist kein Gesetz, aber ein guter Ausgangspunkt gegen ein unruhiges Bild.

Lesbarkeit und Kontrast

Text ist gut lesbar, wenn sich seine Helligkeit deutlich vom Hintergrund abhebt. Die Richtlinien für Barrierefreiheit WCAG messen diesen Abstand als Verhältnis von 1:1 bis 21:1 (Schwarz auf Weiß). Für normalen Text verlangen sie auf Stufe AA mindestens 4,5:1, denn darunter haben Menschen mit nachlassender Sehkraft Mühe, und jeder, der sein Handy in der Sonne liest, ebenfalls. Großem Text (24 px oder 18,66 px fett) genügt 3:1. Stufe AAA fordert 7:1 und 4,5:1.

In Zahlen: Orange #ffa500 auf Weiß kommt nur auf 1,97:1, weiße Schrift auf einer orangefarbenen Schaltfläche ist also schlecht lesbar. Mit Schwarz erreicht dasselbe Orange 10,63:1. Das Grau #767676 auf Weiß liegt mit 4,54:1 knapp über der Grenze.

Denken Sie auch an Farbfehlsichtigkeit: Sie betrifft etwa 8 % der Männer und 0,5 % der Frauen, am häufigsten werden Rot und Grün verwechselt. Vermitteln Sie eine Information deshalb nie allein über die Farbe. Ein fehlerhaftes Formularfeld braucht einen Hinweistext oder ein Symbol, nicht nur einen roten Rahmen.

Bildschirm und Druck

Ein Bildschirm leuchtet und mischt Rot, Grün und Blau (RGB). Eine Druckmaschine trägt die Farben Cyan, Magenta, Gelb und Schwarz (CMYK) auf Papier auf. Viele kräftige Bildschirmfarben gibt es als Druckfarbe nicht, ein leuchtendes Blau wirkt gedruckt matter. Der hier angezeigte CMYK-Code ist eine rechnerische Umwandlung ohne Farbprofil.

Gängige Farben in HEX und RGB

Häufige Fragen

Wie finde ich den Farbcode einer Stelle auf dem Bildschirm?

Mit der Schaltfläche „Pipette“, sofern Ihr Browser sie anzeigt: anklicken, dann auf die gewünschte Stelle klicken. Der Code erscheint sofort in allen vier Schreibweisen.

Was bedeutet „Nächster CSS-Farbname“?

CSS kennt 140 Farben mit englischem Namen, von aliceblue bis yellowgreen. Das Werkzeug sucht die Farbe, deren RGB-Werte Ihrer Farbe am nächsten liegen, und meldet „exakte Übereinstimmung“, wenn die Codes gleich sind.

Wie entstehen die Abstufungen?

Farbton und Sättigung bleiben gleich, die HSL-Helligkeit läuft in Zehnerschritten von 90 % bis 10 %. Für #1f5fe0 reicht das von #d2dff9 bis #06132d.

Wie behalte ich eine Farbe der Palette?

Setzen Sie das Häkchen „Sperren“ unter der Farbe. Beim nächsten Erstellen bleibt sie an ihrem Platz, die neuen Farben richten sich nach ihrem Farbton. Gespeicherte Paletten liegen in Ihrem Browser, nur auf diesem Gerät.