Online-Farb-Konverter
Webdesign wechselt ständig zwischen Farbnotationen: ein Mockup liefert HEX, CSS will HSL zum Anpassen der Helligkeit, oder Code braucht RGB-Werte. Dieser Farb-Konverter wandelt HEX, RGB und HSL in Echtzeit mit Live-Vorschau um — ändere einen, die anderen beiden aktualisieren sich sofort.
So funktioniert es
- Gib eine Farbe in ein beliebiges Feld ein (HEX, RGB oder HSL).
- Die anderen beiden Formate und die Vorschau aktualisieren sich sofort.
- Kopiere das benötigte Format in dein CSS oder Design-Tool.
Typische Anwendungsfälle
- Das HEX eines Mockups in das gewünschte HSL für CSS umwandeln.
- Mit HSL helle/dunkle Varianten eines Farbtons feinjustieren.
- RGB-Werte für die Nutzung im Code erhalten.
Für Helligkeit HSL nehmen – und den Alpha-Wert nicht vergessen
Zwischen CSS und Design-Tools brauchst du dieselbe Farbe ständig in HEX, RGB und HSL – das Mockup liefert einen HEX-Wert, dein CSS will aber rgba, oder du brauchst HSL, um den Farbton nachzujustieren. Zwei praktische Tipps: Um eine Farbe heller oder dunkler zu machen, ist HSL am intuitivsten. Lass Farbton und Sättigung unverändert und dreh nur am L (Helligkeit) – so bekommst du saubere Abstufungen aus einer Grundfarbe, statt an HEX-Ziffern zu raten. Und vergiss die Transparenz nicht: Ein 8-stelliger HEX-Wert hängt hinten zwei Alpha-Zeichen an, während rgba einen separaten Wert von 0 bis 1 ergänzt. Beide Formate drücken das unterschiedlich aus – pass auf, dass er beim Umrechnen nicht verlorengeht.
Warum tut der Farbton-Regler bei einem Grau nichts?
Die Ausgabe dieser Seite antwortet direkt. Weiß #ffffff ist 0, 0%, 100%, Schwarz ist 0, 0%, 0% und Mittelgrau #808080 ist 0, 0%, 50% — alle drei melden Farbton 0, aber diese 0 ist nicht „Rot": Sie ist undefiniert und wird als Null gemeldet, denn die Sättigung ist 0%. Vergleiche reines Rot mit 0, 100%, 50%: gleiche Zahl, völlig andere Bedeutung. Solange die Sättigung null bleibt, färbt kein Farbton.