Farbkonverter
Farben zwischen HEX, RGB, HSL und OKLCH umrechnen, mit Live-Vorschau
Über dieses Tool
Gib eine Farbe in jeder gängigen Notation ein — #hex, rgb(), hsl() oder eine benannte CSS-Farbe — und erhalte alle Formate auf einmal: HEX, RGB, HSL und OKLCH, neben einer Live-Vorschau. Alpha-Kanäle bleiben über alle Formate erhalten, und die Ausgabe nutzt moderne CSS-Syntax (leerzeichengetrennte Kanäle), die sich sauber in aktuelle Stylesheets einfügen lässt.
OKLCH ist dabei, weil CSS-Farbe genau dorthin steuert: Anders als bei HSL ist seine Helligkeitsachse perzeptuell gleichförmig — zwei Farben mit demselben L sehen tatsächlich gleich hell aus, und eine Farbton-Änderung verschiebt nicht versehentlich die wahrgenommene Helligkeit. Eine bestehende Palette nach OKLCH zu konvertieren ist der erste Schritt zu konsistenten Farbskalen.
Die Umrechnungsmathematik läuft lokal mit den veröffentlichten sRGB↔OKLab-Transformationen, und die Werte sind roundtrip-fest: Das RGB, das du aus einer HSL-Eingabe zurückbekommst, ist exakt das, was der Browser berechnen würde.
Häufige Fragen
- Warum widersprechen sich die Helligkeitswerte von HSL und OKLCH?
- HSL-Helligkeit ist eine geometrische Eigenschaft der RGB-Werte, keine des menschlichen Sehens — hsl(60 100% 50%)-Gelb wirkt weit heller als hsl(240 100% 50%)-Blau, trotz identischem L. Die L-Achse von OKLCH ist auf Wahrnehmung ausgelegt: Gleiches L bedeutet gleiche scheinbare Helligkeit. Dieser Widerspruch ist der ganze Grund, warum es OKLCH gibt.
- Was bedeutet der Alpha-Wert und wo steht er in jedem Format?
- Alpha ist die Deckkraft, von 0 (transparent) bis 1 (deckend). In 8-stelligem Hex ist es das letzte Byte (#RRGGBBAA); in moderner funktionaler Syntax folgt es auf einen Schrägstrich: rgb(76 141 255 / 0.5). Dieser Konverter zieht Alpha automatisch durch jedes Format.
- Lässt sich jede OKLCH-Farbe in sRGB darstellen?
- Nein — OKLCH deckt weite Gamuts ab, und manche Chroma/Helligkeits-Kombinationen haben kein sRGB-Äquivalent. Von sRGB aus zu konvertieren (wie dieses Tool es tut) bleibt immer darstellbar; in die andere Richtung müssen Out-of-Gamut-Farben geclippt oder gemappt werden — deshalb wirkt ein leuchtendes P3-Grün auf einem sRGB-Bildschirm stumpfer.
- Warum leerzeichengetrenntes rgb(76 141 255) statt Kommas?
- CSS Color Module Level 4 hat leerzeichengetrennte Kanäle mit optionalem /alpha standardisiert, und jeder moderne Browser unterstützt sie. Die Komma-Form funktioniert weiterhin, aber die Leerzeichen-Form ist die, die neue Specs (und dieses Tool) verwenden.