Farb-Konverter

Der Farb-Konverter wandelt eine Farbe zwischen den drei gängigen Web-Formaten HEX, RGB und HSL um und zeigt sie live als Farbfläche an. Du wählst eine Farbe über den Farbwähler, direkt daneben erscheinen automatisch der passende RGB- und HSL-Wert – praktisch, wenn du einen Farbcode aus Photoshop, Figma oder einem Screenshot in CSS oder Code weiterverwenden willst.

So funktioniert der Farb-Konverter

Klicke auf das Farbfeld, um den Farbwähler deines Browsers zu öffnen. Schon während du dort eine Farbe auswählst, aktualisiert sich das Ergebnis live: Du siehst den HEX-Code in Großbuchstaben mit einer farbigen Vorschaufläche sowie die passenden RGB- und HSL-Werte darunter.

Jeden der drei Werte kannst du per Klick auf „Kopieren“ einzeln in die Zwischenablage übernehmen – praktisch, um ihn direkt in CSS, ein Design-Tool oder Quellcode einzufügen.

So wird gerechnet

Ein HEX-Code wie #2F6DF6 besteht aus drei Byte-Paaren zwischen 00 und FF (0–255) für Rot, Grün und Blau – daraus ergibt sich direkt der RGB-Wert.

Für HSL werden die Kanäle auf 0–1 normiert. Die Helligkeit (L) ist der Mittelwert aus größtem und kleinstem Kanal, die Sättigung (S) ihre Differenz im Verhältnis zur Helligkeit – bei Grautönen (alle Kanäle gleich) ist S = 0 %. Der Farbton (H) in Grad zeigt, welcher Kanal führt: Reines Rot liegt bei 0°, Grün bei 120°, Blau bei 240°.

Beispiel

Die Standardfarbe des Konverters ist #2F6DF6. Die Byte-Paare 2F, 6D und F6 entsprechen 47, 109 und 246 – also rgb(47, 109, 246).

Normiert auf 0–1 ergibt das R ≈ 0,184, G ≈ 0,427, B ≈ 0,965. Da Blau der größte und Rot der kleinste Kanal ist, folgt eine Helligkeit von (0,965 + 0,184) / 2 ≈ 57 %, eine Sättigung von rund 92 % und ein Farbton von etwa 221°. Das Ergebnis: hsl(221, 92%, 57%) – ein kräftiges, mittelhelles Blau.

Wofür brauche ich das?

Design → Code: Einen HEX-Code aus Figma, Sketch oder Photoshop kannst du sofort als rgb() oder hsl() für CSS übernehmen.
Transparenz ergänzen: Für eine durchsichtige Variante fügst du dem RGB- oder HSL-Wert manuell einen Alpha-Kanal hinzu, etwa rgba(47, 109, 246, 0.5) für 50 % Deckkraft.
Farbtöne variieren: In HSL genügt es, die Helligkeit zu ändern, um eine hellere oder dunklere Version derselben Farbe zu erhalten, ohne den Farbton neu zu bestimmen.
Farben aus Bildern: Um einen mit einer Pipette ermittelten HEX-Wert in ein anderes Format zu übersetzen, etwa für ein Farbschema oder einen Styleguide.

Häufige Fragen

Was bedeuten H, S und L bei einer HSL-Farbe?

H steht für den Farbton in Grad (0 bis 360°), S für die Sättigung und L für die Helligkeit, beide in Prozent. hsl(221, 92%, 57%) ist demnach ein kräftiges Blau mit hoher Sättigung und mittlerer Helligkeit.

Gibt der Konverter auch Transparenz (Alpha) aus?

Nein, das Ergebnis enthält nur HEX, RGB und HSL ohne Alpha-Kanal. Für rgba() oder hsla() ergänzt du den Alpha-Wert zwischen 0 und 1 selbst hinter dem letzten Farbwert.

Werden meine Eingaben gespeichert?

Nein. Die Umrechnung läuft vollständig lokal in deinem Browser, es wird keine Farbe an einen Server übertragen.

Warum steht der HEX-Code in Großbuchstaben?

Der Konverter zeigt den HEX-Code einheitlich in Großbuchstaben, etwa #2F6DF6. Für CSS und die meisten anderen Einsatzzwecke spielt Groß- und Kleinschreibung keine Rolle.

Wie übernehme ich einen der Werte in mein Projekt?

Klicke neben HEX, RGB oder HSL auf „Kopieren“ – der jeweilige Wert landet direkt in deiner Zwischenablage.