Farbwähler

Was ist ein Farbwähler?

Ein Farbwähler ist ein Online-Tool, mit dem Sie Farben für Webdesign, Grafikarbeiten und UI/UX-Entwicklung visuell auswählen und in Formate wie HEX, RGB und HSL umwandeln können. Über das Farbrad und den Regler für Sättigung und Helligkeit finden Sie die gewünschte Farbe schnell, und dank der Opazitätssteuerung (Alpha) lassen sich auch RGBA- und HSLA-Farbwerte erzeugen.

Das Tool läuft direkt im Browser, ohne zusätzliche Installation. Browser mit EyeDropper-API-Unterstützung wie Chrome und Edge können Farben direkt aus jedem Bereich des Bildschirms aufnehmen, sodass Sie Töne aus Designvorlagen oder Bildern schnell übernehmen können.

Wann Sie dieses Tool verwenden sollten

• Webentwicklung – Exakte Farbwerte schnell finden und kopieren, um sie direkt in CSS-Stylesheets zu übernehmen
• UI/UX-Design – Harmonische Farbpaletten für Buttons, Hintergründe und Texte in Apps oder Websites zusammenstellen
• Grafikdesign – Farben für Poster, Banner und Social-Media-Grafiken auswählen und kombinieren
• Markenidentität – Markenfarben für Ihr Unternehmen oder Projekt festlegen und in mehreren Formaten dokumentieren
• Barrierefreiheit prüfen – Farbwerte kontrollieren, um den Kontrast zwischen Text und Hintergrund besser einschätzen zu können
• Farben aus Referenzen extrahieren – Farben direkt von Websites oder Bildern aufnehmen, die Ihnen gefallen
• Präsentationen erstellen – Farbwerte finden, um Folien und Unterlagen mit einem einheitlichen Farbthema zu gestalten

Wichtige Funktionen

• Farbwahl über das Farbrad – Wählen Sie den gewünschten Farbton intuitiv auf einem 360-Grad-Farbrad. Farben lassen sich per Maus oder Touch flüssig durchsuchen.
• 2D-Regler für Sättigung und Helligkeit – Passen Sie Sättigung und Helligkeit gleichzeitig auf Basis des gewählten Farbtons an. So wählen Sie frei zwischen hellen Pastelltönen und tiefen dunklen Farben.
• Alpha-Regler für Deckkraft – Regeln Sie die Deckkraft von 0 % bis 100 %, um halbtransparente Farben in RGBA- und HSLA-Formaten zu erzeugen. Praktisch für Overlays und Verläufe.
• Unterstützung mehrerer Farbformate – HEX, RGB und HSL werden in Echtzeit umgerechnet und angezeigt. Bei reduzierter Deckkraft wird automatisch auf RGBA und HSLA umgestellt.
• Bildschirmfarben mit EyeDropper aufnehmen – Klicken Sie in Chrome oder Edge auf eine beliebige Stelle des Bildschirms, um Farben direkt zu übernehmen. Auch Farben aus Bildern in anderen Tabs oder vom Desktop lassen sich erfassen.
• Automatische Farbharmonien – Zur ausgewählten Farbe werden automatisch komplementäre, analoge, triadische und monochrome Paletten erzeugt. So finden Sie auf Basis der Farbtheorie schnell stimmige Kombinationen.
• CSS-Code mit einem Klick kopieren – Kopieren Sie die gewählte Farbe als CSS-Code im Format color: #D4AF37;. HEX, RGB und HSL stehen zur Auswahl.
• Farbhistorie speichern – Die letzten 20 ausgewählten Farben werden automatisch gespeichert. Der Verlauf bleibt auch nach dem Schließen des Browsers erhalten, sodass Sie frühere Farben erneut verwenden können.

So verwenden Sie das Tool

1. Farbton auswählen – Klicken oder ziehen Sie auf dem Farbrad, um den grundlegenden Farbbereich auszuwählen, etwa Rot, Orange, Gelb, Grün, Blau oder Violett.
2. Sättigung und Helligkeit anpassen – Im quadratischen Bereich darunter regeln Sie die Sättigung nach links und rechts sowie die Helligkeit nach oben und unten. Oben rechts liegt die kräftigste und hellste Farbe.
3. Deckkraft festlegen – Wenn Sie einen halbtransparenten Effekt benötigen, passen Sie den Alpha-Regler an. 100 % ist deckend, 0 % vollständig transparent.
4. Farbwerte prüfen und kopieren – Kontrollieren Sie HEX-, RGB- und HSL-Werte im rechten Bereich und kopieren Sie das gewünschte Format über die jeweilige Schaltfläche in die Zwischenablage.
5. CSS-Code verwenden – Wählen Sie im CSS-Bereich unten das gewünschte Format (HEX/RGB/HSL) und kopieren Sie über „CSS kopieren“ direkt ein einsatzbereites Snippet für Ihr Stylesheet.

Farbtheorie und Farbharmonien verstehen

Grundprinzip des Farbrads

Das Farbrad geht auf Isaac Newtons Experiment von 1666 zurück, bei dem er Licht mit einem Prisma aufspaltete. Moderne Farbräder unterscheiden zwischen dem traditionellen RYB-Modell auf Basis von Rot, Gelb und Blau und dem digitalen RGB-Modell mit Rot, Grün und Blau. Dieses Tool basiert auf dem HSL-Farbmodell (Hue, Saturation, Lightness), bei dem der Farbton als Winkel von 0° bis 360° dargestellt wird.

HSL vs. RGB vs. HEX

• HEX (Hexadezimal) – Das am weitesten verbreitete Webformat. Rot, Grün und Blau werden in der Form #RRGGBB als Werte von 00 bis FF (0 bis 255) dargestellt. Beispiel: #D4AF37 ist ein Goldton.
• RGB (Rot, Grün, Blau) – Basiert auf den drei additiven Lichtfarben, wobei jeder Kanal einen Wert zwischen 0 und 255 erhält. In CSS wird das Format als rgb(212, 175, 55) verwendet.
• HSL (Hue, Saturation, Lightness) – Ein Modell, das der menschlichen Farbwahrnehmung sehr nahekommt. Es besteht aus Farbton (0°–360°), Sättigung (0 %–100 %) und Helligkeit (0 %–100 %). Damit lassen sich Helligkeit und Intensität innerhalb eines Farbtons besonders intuitiv anpassen.

Arten von Farbharmonien

• Komplementär – Zwei Farben, die sich auf dem Farbrad gegenüberliegen. Sie erzeugen einen starken Kontrast und eignen sich gut für Akzente. Beispiel: Die Komplementärfarbe zu Blau (240°) ist Gelb (60°).
• Analog – Farben, die auf dem Farbrad nebeneinanderliegen. Sie kommen häufig in der Natur vor und wirken harmonisch und angenehm. Beispiel: Orange, Gelb und Limettengrün.
• Triadisch – Farben, die das Farbrad in drei gleichmäßige Teile teilen. Sie bieten ausgewogenen Kontrast und wirken weicher als Komplementärfarben. Beispiel: Rot, Gelb und Blau.
• Monochrom – Farben, die nur in Sättigung und Helligkeit innerhalb eines Farbtons variieren. Das ergibt einen klaren, eleganten Eindruck und wird oft im Markendesign eingesetzt.

Deckkraft (Alpha) nutzen

Der Alpha-Kanal steuert die Deckkraft einer Farbe. 0 % bedeutet vollständig transparent, 100 % vollständig deckend. Halbtransparente Farben werden im Webdesign häufig für Overlays, Verläufe und Hover-Zustände verwendet. RGBA- und HSLA-Formate werden seit CSS3 unterstützt, und HEX-Codes mit Transparenz (#RRGGBBAA) funktionieren in modernen Browsern ebenfalls.

Informationen zur EyeDropper-API

Die EyeDropper-API ist eine Web-API, mit der sich Farben direkt im Browser vom Bildschirm aufnehmen lassen. Derzeit wird diese Funktion in Chrome 95+ und Edge 95+ unterstützt. Firefox und Safari unterstützen sie bislang nicht.

Mit EyeDropper können Sie Farben nicht nur aus dem aktuellen Tab, sondern auch aus anderen Tabs, Anwendungen und sogar vom Desktop übernehmen. Das ist besonders praktisch, wenn Sie exakte Farbwerte aus Designreferenzen, Wettbewerberseiten oder inspirierenden Fotos schnell erfassen möchten.

Tipps für die Nutzung

• Markenfarben dokumentieren – Wenn Sie die Hauptfarben Ihres Unternehmens oder Projekts ausgewählt haben, notieren Sie alle HEX-, RGB- und HSL-Werte, damit Sie dieselben Farben in Web, Druck und Video konsistent einsetzen können.
• Barrierefreiheit mitdenken – Achten Sie bei Text- und Hintergrundfarben auf genügend Helligkeitsunterschied. Die WCAG-Richtlinien empfehlen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text.
• Farbpaletten aufbauen – Wählen Sie zuerst eine Hauptfarbe und nutzen Sie dann die Farbharmonien, um schnell professionelle Paletten zu entwickeln. Üblich sind eine Hauptfarbe, ein bis zwei Sekundärfarben und eine Akzentfarbe.
• Halbtransparente Effekte einsetzen – Wenn Text über Hintergrundbildern liegt, kann ein halbtransparentes Overlay wie rgba(0, 0, 0, 0.5) die Lesbarkeit deutlich verbessern.

Details

Die Ergebnisse in diesem Farbwähler werden aus Ihren Eingabewerten und ausgewählten Optionen erzeugt.

Für endgültige Entscheidungen sollten Sie offizielle Richtlinien oder eine fachliche Prüfung heranziehen.

Häufig gestellte Fragen