Was ist Farbwähler?
Mit dem Farbwähler wählen Sie jede Farbe visuell über eine interaktive Farbeingabe und sehen sofort ihren Wert in allen wichtigen Farbformaten: HEX (Web-Standard), RGB (Bildschirmanzeige), HSL (designfreundlich) und CMYK (Druck). Ein Tonwertstreifen zeigt automatisch erzeugte hellere und dunklere Varianten Ihrer gewählten Farbe, und das Barrierefreiheits-Panel zeigt die Kontrastverhältnisse gegenüber weißem und schwarzem Hintergrund.
Die Umwandlung zwischen Farbformaten ist in Design und Entwicklung eine ständige Aufgabe. Designer arbeiten für Bildschirme in HEX und HSL; Druckdesigner benötigen CMYK; CSS-Entwickler verwenden RGB für Deckkraft-Operationen; Backend-Systeme speichern Farben unter Umständen als Ganzzahlen oder HSL-Zeichenketten. Unser Werkzeug macht separate Rechner überflüssig, indem es alle Formate gleichzeitig bereitstellt.
Die Barrierefreiheitsdaten – das Kontrastverhältnis gegenüber Weiß und Schwarz – liefern unmittelbare Informationen zur WCAG-Konformität bereits bei der Farbauswahl. Die Barrierefreiheit beim Auswählen der Farben zu prüfen, verhindert, dass Verstöße erst spät in der Entwicklung entdeckt werden, wenn sie teurer zu beheben sind.
Anwendungsfälle
Hier sind die häufigsten Arten, wie Farbwähler täglich genutzt wird.
Formatumwandlung von Markenfarben
Eine Markenrichtlinie gibt eine CMYK-Primärfarbe für den Druck vor. Sie benötigen den HEX-Code für die Website und RGB für digitale Werbung. Geben Sie die Farbe visuell ein und erhalten Sie alle Formate gleichzeitig für eine einheitliche Darstellung über alle Medien.
Tonwerterzeugung für Designsysteme
Ein Designsystem benötigt eine Tonabstufung: Varianten für Hintergrund, Rahmen, gedämpften Text, Fließtext und Überschriften der Primärfarbe. Der Tonwertstreifen zeigt hellere und dunklere Varianten über den gesamten Helligkeitsbereich. Klicken Sie auf einen beliebigen Ton, um seinen Hex-Code für CSS-Variablen oder Design-Token zu kopieren.
Vorabprüfung der Barrierefreiheit
Während Sie Text- und UI-Element-Farben auswählen, zeigt die Kontrastverhältnis-Anzeige sofort, ob die Farbe das erforderliche WCAG-AA-Verhältnis von 4,5:1 gegenüber Ihrem Hintergrund erreicht. Die Prüfung während der Auswahl ist schneller als die nachträgliche Prüfung mit einem separaten Werkzeug.
CSS-Entwicklung
Bei der Umsetzung eines Designs kopieren Sie HEX für Standard-CSS-Farbeigenschaften, RGB für rgba() mit Deckkraft und HSL für programmatische Anpassungen. Alle drei werden gleichzeitig bereitgestellt – ohne manuelle Umwandlung.
Verwaltung von Farb-Token für Designsysteme
Designsysteme definieren eine Token-Palette: --color-primary-500, --color-primary-600, --color-neutral-100 und so weiter. Der Farbwähler erzeugt den Tonwertstreifen für jede Basisfarbe und liefert die vollständige Tonabstufung, die nötig ist, um helle, Standard-, dunkle und Hover-Varianten zu definieren. Kopieren Sie den HEX-Wert jedes Tons direkt in Ihre Design-Token-Datei oder das Stil-Panel von Figma. So bleibt die Token-Palette mathematisch konsistent: Die Töne werden aus demselben Basis-Farbton mit vorhersehbaren Helligkeitsschritten erzeugt.
Vorabprüfung der Barrierefreiheit beim Auswählen der Farben
Die Kontrastverhältnis-Anzeige zeigt sofort, ob eine gewählte Farbe das erforderliche WCAG-AA-Verhältnis von 4,5:1 gegenüber weißem oder schwarzem Hintergrund erreicht. Die Prüfung während der Farbauswahl – bevor man sich auf eine Designrichtung festlegt – ist weitaus schneller und günstiger, als Barrierefreiheitsmängel nach der Designübergabe oder während der Entwicklung zu entdecken. Besonders bei Textfarben verhindert das Auswählen einer Vordergrundfarbe bei gleichzeitig in Echtzeit aktualisiertem Kontrastverhältnis, dass Barrierefreiheitsverstöße von Anfang an ins Design einfließen.
Beispiele
Umwandlung von Primärblau
Wandeln Sie ein Primärblau in alle Formatwerte für Web und Druck um.
#0070F3 HEX: #0070F3 | RGB: rgb(0, 112, 243) | HSL: hsl(211, 100%, 48%) | CMYK: cmyk(100%, 54%, 0%, 5%) Tonbereich für eine Markenfarbe erzeugen
Sehen Sie die vollständige Tonabstufung eines Markengrüns zur Definition von Designsystem-Token.
#16A34A (Grün) Töne: 50 → #f0fdf4 | 100 → #dcfce7 | ... | 600 → #16a34a | ... | 900 → #14532d HSL-Farbe in CSS für programmatische Themes
Kopieren Sie den HSL-Wert, um eine CSS-Custom-Property zu erstellen, die eine einfache Tonberechnung ermöglicht.
#7C3AED (Violett) HSL: hsl(263, 70%, 58%) — gesetzt als --color-primary-h: 263; --color-primary-s: 70%; --color-primary-l: 58%; Farbwähler im Vergleich zu Figma-Farbwähler
Unser eigenständiger Farbwähler im Vergleich zum integrierten Farbwerkzeug von Figma für Entwickler und Designer.
| Merkmal | Toolorah | Figma-Farbwähler |
|---|---|---|
| Anzeige von HEX, RGB, HSL | Alle gleichzeitig | Ein Format nach dem anderen |
| CMYK-Umwandlung | Ja | Nein |
| Erzeugung von Tonabstufungen | Ja – automatischer Streifen | Manuell mit Stilen |
| WCAG-Kontrastverhältnis | Ja – gegen Weiß und Schwarz | Erfordert separates Plugin |
| Bildschirm-Pipette | Über den Farbwähler des Systems | Ja – integriert |
| Funktioniert ohne Figma-Konto | Ja | Konto erforderlich |
| CSS-fertige Werte kopieren | Ja – für CSS formatiert | Ja |
Tipps zur Verwendung von Farbwähler
- HSL ist am nützlichsten für programmatische Farbanpassungen: Ändern Sie L für hellere/dunklere Töne, S für gedämpfte/kräftige Farben, H für verwandte Farbtöne.
- RGB-Bildschirmfarben können kräftiger wirken als ihr CMYK-Druckäquivalent – der CMYK-Farbraum ist kleiner als sRGB.
- Der Farbwähler des Browsers aktiviert beim Klick den Farbwähler des Betriebssystems – unter macOS gehört dazu eine Pipette, um jede Bildschirmfarbe aufzunehmen.
- HEX-Farben mit wiederholten Paaren lassen sich in CSS verkürzen: #AABBCC → #ABC.
- Ein Kontrast von 4,5:1 ist für normalen Text erforderlich (WCAG AA). Großer Text (ab 18 pt) erfordert nur 3:1.
Häufig gestellte Fragen
Was ist der Unterschied zwischen RGB und HSL?
RGB definiert Farben als Intensitäten der Lichtkanäle Rot, Grün und Blau – entsprechend der Art, wie Bildschirme Farbe physikalisch erzeugen, aber nicht der Art, wie Menschen Farbbeziehungen intuitiv wahrnehmen. HSL (Farbton, Sättigung, Helligkeit) entspricht eher der menschlichen Farbintuition: Der Farbton dreht sich um den Farbkreis (0°=Rot, 120°=Grün, 240°=Blau), die Sättigung steuert die Farbintensität von Grau bis zur Vollfarbe, und die Helligkeit steuert die Helligkeit von Schwarz bis Weiß. Eine hellere oder dunklere Variante einer Farbe in HSL zu erstellen bedeutet, L anzupassen; in RGB müssen alle drei Kanäle neu berechnet werden.
Wie wandle ich HEX in RGB um?
Eine HEX-Farbe besteht aus drei Paaren hexadezimaler Ziffern für Rot, Grün und Blau: #RRGGBB. Wandeln Sie jedes Paar von Hex in Dezimal um. #0070F3 → R: 00 = 0, G: 70 = 112, B: F3 = 243 → rgb(0, 112, 243). Zur Rückwandlung: Drücken Sie jede Dezimalzahl als zwei Hex-Ziffern aus (0-255 entspricht 00-FF). Die meisten Entwickler verwenden dafür ein Werkzeug statt von Hand zu rechnen. Unser Farbwähler zeigt alle Umwandlungen gleichzeitig.
Warum sind CMYK-Werte Annäherungen an Bildschirmfarben?
RGB ist additiv (Licht): Rot + Grün + Blau in voller Stärke = Weiß. CMYK ist subtraktiv (Tinte): Cyan + Magenta + Gelb + Schwarz in voller Stärke = nahezu Schwarz. Diese Modelle haben unterschiedliche Farbräume – den Bereich der Farben, die sie darstellen können. Viele kräftige RGB-Bildschirmfarben liegen außerhalb des CMYK-Farbraums und können im Druck nicht exakt wiedergegeben werden. Aus RGB umgewandelte CMYK-Werte sind die nächstmögliche Druckannäherung. Arbeiten Sie für markenkritische Farben mit einem Druckproduktionsspezialisten zusammen, um sicherzustellen, dass die CMYK-Werte auf Ihrem spezifischen Papier und Ihrer Druckmaschine akzeptabel wiedergegeben werden.
Was sind benannte CSS-Farben?
CSS unterstützt 147 benannte Farben, von „aliceblue“ bis „yellowgreen“, die in der CSS-Color-Spezifikation definiert sind. Sie sind HEX-Werten zugeordnet: „cornflowerblue“ ist #6495ED, „tomato“ ist #FF6347. Benannte Farben sind praktisch für die Lesbarkeit in CSS und werden von allen Browsern unterstützt. Unser Farbwähler zeigt den HEX-Wert – Sie können in CSS den HEX-Wert oder die entsprechende benannte Farbe verwenden, falls es für Ihre gewählte Farbe eine gibt.
Wie nehme ich eine Farbe von meinem Bildschirm auf?
Ein Klick auf die Farbeingabe in unserem Werkzeug aktiviert den nativen Farbwähler Ihres Betriebssystems. Unter macOS Ventura und neuer gehört dazu eine Lupen-Pipette, mit der Sie jeden Pixel Ihres Bildschirms aufnehmen können. Unter Windows 11 enthält der Farbwähler einiger Apps eine Pipette. Für eine browserbasierte Pipette unter Chrome und Edge kann die EyeDropper-Web-API (window.EyeDropper) verwendet werden. Für plattformübergreifende Farbaufnahme sind die App Digital Color Meter unter macOS und der Color Picker von Windows PowerToys zuverlässige eigenständige Werkzeuge.
Was ist ein Farbraum und warum ist er für das Design wichtig?
Ein Farbraum ist der Bereich der Farben, den ein Gerät anzeigen oder ein Medium wiedergeben kann. sRGB ist der Standard-Farbraum der meisten Monitore und des Webs – er deckt etwa 35 % der sichtbaren Farben ab. Display P3 (verwendet auf modernen Apple- und vielen anderen Displays) deckt etwa 50 % der sichtbaren Farben ab und erzeugt kräftigere Grün-, Rot- und Cyantöne. CMYK für den Druck deckt einen anderen Teilbereich ab und lässt viele gesättigte Blau- und Grüntöne vermissen. Das Gestalten in sRGB sorgt dafür, dass Ihre Farben über Geräte hinweg einheitlich aussehen. Gestalten Sie in P3 und ein Nutzer betrachtet es auf einem sRGB-Monitor, wirken die Farben weniger kräftig als beabsichtigt.
Was ist der Unterschied zwischen sRGB und Display P3?
sRGB ist der Standard-Farbraum des Webs, 1996 für Verbrauchermonitore definiert. Display P3 ist ein größerer Farbraum, ursprünglich für das digitale Kino entwickelt, heute verwendet auf Apple-Displays, Samsung-OLED-Bildschirmen und modernen Smartphones. P3 hat etwa 25 % mehr Farbvolumen als sRGB, mit deutlich breiteren Grün- und Rottönen. CSS Color Level 4 unterstützt P3-Farben mit der Syntax color(display-p3 r g b). Für Webdesign bleibt sRGB die sichere Standardwahl. Verwenden Sie P3-Farben nur für Erlebnisse, bei denen Sie wissen, dass Ihr Publikum P3-fähige Displays hat, und bei denen Sie Fallbacks für reine sRGB-Bildschirme getestet haben.