Farben online auswählen — HEX, RGB und HSL kostenlos
Ob Webdesigner, Entwickler oder kreativer Hobby-Künstler: Die Wahl der richtigen Farbe ist entscheidend für jedes visuelle Projekt. Der WikiPlus Farbauswahl-Tool ermöglicht es, Farben intuitiv auszuwählen und sofort in allen wichtigen Formaten zu erhalten — HEX, RGB und HSL. Kein Photoshop nötig, keine Installation, komplett kostenlos und direkt im Browser. Perfekt für schnelle Farbrecherche, Design-Inspiration und die Arbeit an CSS-Stylesheets.
HEX, RGB und HSL: Die wichtigsten Farbformate erklärt
In der Webentwicklung und im Grafikdesign begegnen uns hauptsächlich drei Farbsysteme. HEX (Hexadezimal): Das kompakteste Format, ein # gefolgt von sechs hexadezimalen Zeichen — z.B. #0011ff für ein kräftiges Blau. Jede zwei Zeichen repräsentieren Rot-, Grün- und Blauanteil von 00 (0) bis FF (255). HEX wird in CSS und HTML am häufigsten verwendet. RGB: Drei Zahlenwerte für Rot, Grün, Blau von 0 bis 255 — rgb(0, 17, 255). Intuitiver für viele Designer, weil die Farbanteile klar sichtbar sind. In CSS auch als rgba() für Transparenz. HSL: Hue (Farbton 0-360°), Saturation (Sättigung 0-100%), Lightness (Helligkeit 0-100%) — hsl(231, 100%, 50%). HSL ist besonders intuitiv für das Anpassen von Farben, weil man Helligkeit und Sättigung unabhängig vom Farbton steuern kann. Der WikiPlus Farbauswahl-Tool zeigt alle drei Formate gleichzeitig an.
Farbauswahl für Webdesign: Worauf es ankommt
Bei der Farbauswahl für Websites spielen mehrere Faktoren eine Rolle, die über persönliche Vorlieben hinausgehen. Kontrastverhältnis: Für gute Lesbarkeit sollte der Kontrast zwischen Text und Hintergrund mindestens 4,5:1 betragen (WCAG AA-Standard). Dunkler Text auf hellem Hintergrund oder heller Text auf dunklem Hintergrund funktioniert am besten. Farbkonsistenz: Eine Website-Farbpalette besteht typischerweise aus 2-4 Primärfarben und ihren Abstufungen. Mit HSL ist es einfach, Abstufungen zu erstellen: man behält Farbton und Sättigung gleich und variiert nur die Helligkeit. Markenkonsistenz: Unternehmensfarben müssen konsistent umgesetzt werden. Der WikiPlus Farbauswahl-Tool hilft dabei, den genauen HEX-Code einer Markenfarbe zu ermitteln und in verschiedenen Projekten konsistent zu verwenden.
Farben aus Bildern aufnehmen: Color-Picking im Browser
Eine häufige Aufgabe für Designer ist die Aufnahme einer Farbe aus einem bestehenden Bild oder Screenshot. Der WikiPlus Farbauswahl-Tool bietet eine intuitive Farbpalette, aber für das Aufnehmen von Farben aus Bildern gibt es ergänzende Möglichkeiten. In Chrome und Firefox ist ein nativer Eyedropper-Tool in den Entwicklertools integriert: Im Styles-Bereich (F12) kann man auf ein Farbfeld klicken und dann den Eyedropper aktivieren. Alternativ kann die EyeDropper API in modernen Chromium-Browsern genutzt werden. Für die schnelle Aufnahme einer Farbe aus einem Screenshot ist auch das Betriebssystem-eigene Farbauswahl-Tool (macOS: Digital Color Meter; Windows: PowerToys Color Picker) nützlich. Der ermittelte HEX-Code lässt sich dann sofort in den WikiPlus Tool eingeben.
Farbkonvertierung: HEX zu RGB zu HSL und zurück
Beim Arbeiten zwischen verschiedenen Design-Tools und Programmierumgebungen ist die Konvertierung zwischen Farbformaten eine häufige Aufgabe. Der WikiPlus Farbauswahl-Tool erledigt diese Konvertierung automatisch: Man wählt eine Farbe im visuellen Picker oder gibt einen HEX-Wert ein, und erhält sofort die Entsprechungen in RGB und HSL. Das ist besonders nützlich, wenn man Farben aus einem Bildbearbeitungsprogramm (das oft RGB-Werte angibt) in CSS (das HEX oder hsl() bevorzugt) übertragen möchte. Auch für die Arbeit mit CSS-Variablen ist die HSL-Darstellung vorteilhaft: --primary-color: hsl(231, 100%, 50%); und Varianten mit veränderten Helligkeitswerten lassen sich systematisch ableiten.
Häufig gestellte Fragen
- Was ist der Unterschied zwischen HEX und RGB?
- Beide Formate beschreiben dieselbe Farbe, nur in unterschiedlicher Schreibweise. HEX (#FF5733) ist kompakter und in CSS-Code üblicher. RGB (rgb(255,87,51)) ist für Menschen oft intuitiver, weil die Farbkanäle als Dezimalzahlen sichtbar sind. Der WikiPlus Tool konvertiert automatisch zwischen beiden.
- Wie füge ich Transparenz (Alpha-Kanal) zu einer Farbe hinzu?
- In CSS verwendet man rgba(r, g, b, a) oder hsla(h, s, l, a) für Farben mit Alpha-Kanal, wobei a zwischen 0 (vollständig transparent) und 1 (vollständig opak) liegt. In HEX kann man 8-stellige Werte wie #FF573380 verwenden, wobei die letzten zwei Stellen den Alpha-Wert darstellen.
- Wie stelle ich sicher, dass meine gewählten Farben barrierefreikonform sind?
- Das Kontrastverhältnis zwischen Text- und Hintergrundfarbe sollte mindestens 4,5:1 (WCAG AA) oder 7:1 (WCAG AAA) betragen. Online-Tools wie der WebAIM Contrast Checker nehmen zwei Farben und berechnen das Kontrastverhältnis automatisch.