Farbwähler online: Farben auswählen, umwandeln und prüfen
Dieser Farbwähler hilft dir, eine Farbe auf verschiedene Arten auszuwählen – über das native Farbauswahlfeld, durch direktes Eingeben eines HEX-Codes, per Eyedropper direkt vom Bildschirm, oder durch Klicken auf ein hochgeladenes Bild. Egal ob du Webdesigner, Entwickler, Grafiker oder einfach nur neugierig bist, welchen Farbcode ein bestimmter Ton hat – dieses Tool liefert sofort alle gängigen Farbformate gleichzeitig.
HEX, RGB, HSL, HSB und CMYK – was ist der Unterschied?
HEX ist das in der Webentwicklung am häufigsten verwendete Format, ein sechsstelliger Code wie #1D3557, der Rot-, Grün- und Blauanteil in Hexadezimalschreibweise kodiert. RGB beschreibt die gleiche Farbe als drei Zahlen zwischen 0 und 255 für Rot, Grün und Blau. HSL (Farbton, Sättigung, Helligkeit) ist oft intuitiver für Menschen, weil man den Farbton als Winkel auf einem Farbkreis versteht und Sättigung sowie Helligkeit getrennt anpassen kann. HSB/HSV ist HSL sehr ähnlich, wird aber vor allem in Bildbearbeitungsprogrammen wie Photoshop verwendet. CMYK (Cyan, Magenta, Gelb, Schwarz) ist das Farbmodell für den Druck und wird benötigt, wenn eine Farbe nicht nur auf einem Bildschirm, sondern gedruckt dargestellt werden soll.
Was bedeutet der Kontrast-Check?
Die Web Content Accessibility Guidelines (WCAG) legen fest, wie stark sich Textfarbe und Hintergrundfarbe unterscheiden müssen, damit ein Text auch für Menschen mit Sehschwäche gut lesbar ist. Ein Kontrastverhältnis von mindestens 4,5:1 gilt für normalen Fließtext als Mindeststandard (WCAG AA), 7:1 für die höhere Stufe AAA. Für große Überschriften reichen niedrigere Werte von 3:1 (AA) beziehungsweise 4,5:1 (AAA). Dieser Farbwähler berechnet automatisch das Kontrastverhältnis deiner gewählten Farbe gegen Weiß und gegen Schwarz und zeigt an, welche WCAG-Stufe erreicht wird.
Warum ist Farbkontrast für Webseiten wichtig?
Ausreichender Farbkontrast ist nicht nur eine Frage der Barrierefreiheit, sondern beeinflusst auch die allgemeine Lesbarkeit und Nutzererfahrung einer Webseite. In Deutschland verpflichtet das Barrierefreiheitsstärkungsgesetz (BFSG) ab 2025 viele digitale Angebote dazu, Mindeststandards für Barrierefreiheit einzuhalten, wozu auch ausreichender Farbkontrast zählt. Selbst wenn keine rechtliche Pflicht besteht, sorgt ein guter Kontrast dafür, dass mehr Besucher deine Inhalte tatsächlich lesen können, was sich direkt auf Verweildauer und Absprungrate auswirkt.
Farbe direkt vom Bildschirm auswählen (Eyedropper)
Moderne Browser wie Chrome und Edge unterstützen die sogenannte EyeDropper-API, mit der du eine Farbe direkt von einer beliebigen Stelle deines Bildschirms auswählen kannst – nicht nur innerhalb dieser Webseite, sondern auch aus anderen geöffneten Programmen oder Bildern. Klicke dazu auf "Vom Bildschirm auswählen" und anschließend auf die gewünschte Stelle. Falls dein Browser diese Funktion nicht unterstützt (zum Beispiel Safari oder Firefox in älteren Versionen), kannst du stattdessen ein Bild hochladen und direkt hineinklicken, um die Farbe an dieser Stelle zu ermitteln.
Farbtöne (Shades) verstehen und nutzen
Die Shades-Leiste zeigt automatisch hellere und dunklere Varianten deiner gewählten Farbe. Das ist besonders nützlich beim Erstellen eines Farbschemas für eine Webseite oder App, da du für Hover-Zustände, Schatten, Ränder oder Hintergrundabstufungen häufig eine dunklere oder hellere Version derselben Grundfarbe brauchst, statt eine völlig neue Farbe auszuwählen. Klicke einfach auf einen der Farbtöne, um ihn als neue aktive Farbe zu übernehmen.
Anwendungsbereiche eines Farbwählers
Ein Farbwähler wird typischerweise beim Webdesign und der Entwicklung von Nutzeroberflächen eingesetzt, um Markenfarben zu bestimmen oder ein bestehendes Farbschema zu erweitern. Auch bei der Gestaltung von Präsentationen, Logos, Social-Media-Grafiken oder Druckerzeugnissen ist es hilfreich, eine Farbe exakt zu bestimmen und in das benötigte Format zu übertragen – etwa CMYK für den Druck oder HEX für eine Webseite.
Datenschutz
Alle Berechnungen finden lokal in deinem Browser statt. Ein hochgeladenes Bild wird nicht an einen Server übertragen, und die Liste der zuletzt verwendeten Farben wird nur lokal in deinem Browser gespeichert.