So nutzen Sie den Hex-Farbwähler
- Klicken Sie auf das große Farbfeld, um den Farbwähler Ihres Systems zu öffnen, oder geben Sie einen Hex-Code wie
#1E90FFbzw. einen Namen wietomatoein. - Kopieren Sie das benötigte Format: HEX, RGB, HSL, HSV oder CMYK. Ein Klick auf ein Farbfeld bei den Abstufungen oder Harmonien kopiert dessen Hex-Code.
- Prüfen Sie in den Kontrastfeldern, ob weißer oder schwarzer Text auf Ihrer Farbe die WCAG-Stufe AA oder AAA erfüllt.
So funktionieren Hex-Farbcodes
Ein Hex-Farbcode wie #FF6347 enthält drei Bytes: Rot (FF = 255), Grün (63 = 99) und Blau (47 = 71). Jeder Kanal reicht von 00 bis FF, das ergibt 256 × 256 × 256 = 16.777.216 mögliche Farben. Gleiche Werte ergeben Grautöne – #000000 ist Schwarz, #808080 ein mittleres Grau und #FFFFFF Weiß –, und höhere Werte machen eine Farbe heller.
Aufhellungen, Abdunklungen und Farbharmonien
Eine Aufhellung (Tint) ist Ihre Farbe gemischt mit Weiß, eine Abdunklung (Shade) ist Ihre Farbe gemischt mit Schwarz. Der Farbwähler zeigt beide in 10-%-Schritten – praktisch für Hover-Zustände, Rahmen und Hintergründe, die zu einer Markenfarbe passen.
Harmonien drehen den Farbton auf dem Farbkreis, während Sättigung und Helligkeit gleich bleiben:
- Komplementär (180°) – die Gegenfarbe, für starken Kontrast und Call-to-Action-Buttons.
- Analog (±30°) – Nachbarn auf dem Farbkreis, für ruhige, stimmige Paletten.
- Triadisch (±120°) – drei gleichmäßig verteilte Farben, für lebendige und dennoch ausgewogene Designs.
Farbkontrast und WCAG
Die Web Content Accessibility Guidelines (WCAG) verlangen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text (Stufe AA) und 7:1 für Stufe AAA. Großer Text – ab 18 pt bzw. 14 pt fett – benötigt für AA ein Verhältnis von 3:1. Es vergleicht die relative Leuchtdichte von Text- und Hintergrundfarbe und reicht von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß).
Häufig gestellte Fragen
Was sind Hex-Farbcodes?
Ein Hex-Farbcode beschreibt eine Farbe mit sechs Hexadezimalziffern: zwei für Rot, zwei für Grün und zwei für Blau, zum Beispiel #FF6347 (tomato). CSS, HTML, Designtools und Bildbearbeitungsprogramme verstehen ihn gleichermaßen.
Wie viele Farben kann ein Hex-Code darstellen?
256 × 256 × 256 = 16.777.216 Farben. Mit einem zusätzlichen Alpha-Paar (#RRGGBBAA) kann jede davon außerdem 256 Transparenzstufen haben.
Welche CSS-Farbnamen werden unterstützt?
Alle 148 benannten Farben des CSS Color Module, von aliceblue bis yellowgreen, einschließlich rebeccapurple. Geben Sie einen Namen in das Hex-Feld ein oder filtern Sie die Liste unter dem Tool und klicken Sie auf eine Farbe, um sie auszuwählen.