So konvertieren Sie Farben zwischen HEX, RGB und HSL

HEX, RGB und HSL sind die drei gängigen Farbformate des Web. HEX ist kompakt und ideal für CSS, RGB erlaubt Alpha-Transparenz, HSL ist für Designer intuitiver, weil Farbton, Sättigung und Helligkeit unabhängig steuerbar sind.

Der NeatForge Farbkonverter wandelt zwischen HEX, RGB und HSL um und liefert CSS-fertige Werte, die sich direkt einfügen lassen.

Die drei Farbformate erklärt

• HEX: sechsstelliger Hexadezimalcode wie #2563EB, jeweils zwei Stellen für Rot, Grün, Blau. Kurzform #fff wird zu #FFFFFF erweitert.
• RGB: drei Zahlen 0–255 wie rgb(37, 99, 235). Erweiterbar um Alpha: rgba(37, 99, 235, 0.5).
• HSL: Farbton (0–360°), Sättigung und Helligkeit (jeweils %) wie hsl(217, 83%, 53%). Erweiterbar um Alpha: hsla(217, 83%, 53%, 0.5).

Alle drei beschreiben dieselbe Farbe unterschiedlich — sie sind ineinander umrechenbar.

Wann verwendet man welches Format?

• HEX für CSS: kompakt, gut lesbar, der Standard in Stylesheets und Design-Tools wie Figma.
• RGB für Alpha: wenn Sie Transparenz brauchen, ist rgba() historisch der Weg. Moderne CSS-Funktionen erlauben auch rgb(37 99 235 / 0.5).
• HSL für Design: Farbpaletten aufbauen, indem Sie einen Basisfarbton wählen und Helligkeit/Sättigung variieren — viel einfacher als in RGB.

Unterschied zwischen RGB und HSL

RGB beschreibt eine Farbe durch ihre Rot-, Grün- und Blau-Anteile. HSL beschreibt sie durch:

• Farbton (Hue): Winkel auf dem Farbkreis (0° = Rot, 120° = Grün, 240° = Blau).
• Sättigung (Saturation): Intensität der Farbe (0 % = Grau, 100 % = voll).
• Helligkeit (Lightness): wie hell die Farbe ist (0 % = Schwarz, 50 % = normal, 100 % = Weiß).

In HSL ändern Sie die Helligkeit, ohne die anderen Werte neu berechnen zu müssen — für Designer ein wesentlicher Vorteil.

So konvertieren Sie Farben

1. Öffnen Sie den Farbkonverter.
2. Geben Sie einen HEX-Wert ein, passen Sie RGB-/HSL-Zahlenfelder an oder klicken Sie ein Preset an.
3. Das Farbfeld zeigt live die aktuelle Farbe.
4. Klicken Sie auf „Kopieren“ neben HEX, RGB oder HSL für einen CSS-fertigen Wert.

Sie erhalten beispielsweise #2563EB, rgb(37, 99, 235) oder hsl(217, 83%, 53%) — bereit zum direkten Einfügen in CSS.

CSS-Tipps: color-mix und moderne Funktionen

Moderne CSS-Funktionen machen HSL besonders wertvoll:

color-mix(in hsl, hsl(217 83% 53%) 80%, white);

Mit color-mix() können Sie Farben mischen, ohne JavaScript. hsl() eignet sich besser als rgb() für solche Mischungen, weil HSL-Werte näher an der menschlichen Wahrnehmung liegen. Nutzen Sie HSL auch für Theme-Anpassungen: ein Basisfarbton, mehrere Helligkeitsstufen — so entsteht eine konsistente Palette.

Häufige Fragen

Was ist der Unterschied zwischen RGB und RGBA? RGB definiert eine deckende Farbe. RGBA fügt einen Alpha-Kanal (0 bis 1) für Transparenz hinzu — rgba(37, 99, 235, 0.5) ist halbtransparent.

Unterstützt das Tool die 3-stellige HEX-Kurzform? Ja. Die Eingabe von #fff wird automatisch zu #FFFFFF erweitert. Die Ausgabe verwendet immer die 6-stellige Form für maximale Kompatibilität.

Welches Format ist für Barrierefreiheit besser? Das Format ist egal — der Kontrast hängt von der Farbe, nicht von der Schreibweise ab. Kombinieren Sie den Konverter mit einem Kontrast-Prüfer, um die WCAG-Anforderungen zu erfüllen.

→ Kostenlosen Farbkonverter öffnen