Warum Farbformate wichtig sind
Farbe erscheint auf der Oberfläche einfach: Man sieht sie, man wählt sie aus, man verwendet sie. Bei der professionellen Designarbeit stößt man jedoch ständig auf ein frustrierendes Problem: Die gleiche Farbe wird je nach Verwendungsort unterschiedlich dargestellt, und die Wahl des falschen Formats macht Ihren Arbeitsablauf schwieriger als nötig.
HEX: Der Webstandard
Hexadezimale Farbcodes wie#667eeasind das am häufigsten verwendete Format in der Webentwicklung. Sie kodieren Rot-, Grün- und Blauwerte (0–255) als zweistellige Hexadezimalzahlen, die zu einer sechsstelligen Zeichenfolge verkettet sind. Das Format ist kompakt, leicht kopierbar und wird allgemein in CSS, HTML und Designtools unterstützt.
Wenn alle drei Paare identische Ziffern sind, kann der Code gekürzt werden:#ffffffwird#fff. Diese Abkürzung funktioniert in allen gängigen Browsern und Präprozessoren.
RGB: Transparenz und Programmsteuerung
RGB (und seine Variante RGBA) wird zum bevorzugten Format, wenn Sie Transparenz benötigen oder Farben programmgesteuert berechnen.rgba(102, 126, 234, 0,5)verleiht Ihrer Farbe eine Deckkraft von 50 % – es ist unmöglich, sie direkt in HEX auszudrücken (obwohl HEX eine 8-Zeichen-Form wie unterstützt).#667eea80die nur wenige Entwickler kennen).
HSL: Die Geheimwaffe des Palettenbauers
HSL (Farbton, Sättigung, Helligkeit) ist am meistenfür Menschen lesbarFarbformat. Der Farbton ist ein Winkel (0–360°) im Farbkreis. Die Sättigung gibt an, wie lebendig die Farbe ist. Helligkeit ist wie hell oder dunkel.
Dies macht die Palettenerstellung ganz einfach. So erstellen Sie 10 Farbtöne desselben Farbtons für ein Designsystem:
- Halten Sie H und S gleich
- Stellen Sie L auf: 10, 20, 30, 40, 50, 60, 70, 80, 90, 95
- Sie verfügen nun über eine vollständige 10-stufige Farbskala
Zugänglichkeit: Kontrastverhältnisse
WCAG 2.1 AA-Zugänglichkeitsstandards erfordern ein Kontrastverhältnis zwischen Text und Hintergrund von 4,5:1 für normalgroßen Text und 3:1 für großen Text. Bevor Sie eine Farbkombination in Ihrer Benutzeroberfläche finalisieren, testen Sie das Kontrastverhältnis. Fehlerhafte Kontrastverhältnisse gehören zu den häufigsten Verstößen gegen die Barrierefreiheit im Webdesign.
| Standard | Normalerer Text | Großer Text (18pt+) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Warum sehen Farben im Druck anders aus als auf dem Bildschirm?
Bildschirme verwenden das RGB-Modell (additives Licht). Drucker verwenden CMYK (subtraktive Tinte). Die gleiche HEX-Farbe kann beim Drucken deutlich anders aussehen. Für druckgenaue Farbarbeiten konvertieren Sie sie in einem professionellen Tool wie Adobe Illustrator oder InDesign in CMYK.
Was macht eigentlich die Pipette?
Die Pipette verwendet die EyeDropper-API Ihres Browsers, um Pixelfarben von überall auf Ihrem Bildschirm abzutasten – nicht nur vom Browserfenster. Es liest die genauen RGB-Werte jedes Pixels und wandelt sie sofort in alle drei Formate um.