HSLA in HSB / HSV umrechnen
HSLA-Wert einfügen und sofort HSB / HSV erhalten. Andere Formate funktionieren auch.
Erkannt als HSL
Dieselbe Farbe ohne Transparenz, als deckendes HSB / HSV
Farbe anpassen
Alle anderen Formate
Deckkraft-Tabelle: HEX-Alpha und HSLA
Bei 8-stelligem HEX legen die letzten zwei Ziffern die Deckkraft fest: FF ist voll deckend, 80 etwa 50 %, 00 völlig transparent. Die Tabelle zeigt die Beispielfarbe in 5-%-Schritten.
| Deckkraft | HEX-Alpha | HEX | HSLA |
|---|---|---|---|
| 100% | ff | #ff5733 | hsla(10.59, 100%, 60%, 1) |
| 95% | f2 | #ff5733f2 | hsla(10.59, 100%, 60%, 0.95) |
| 90% | e6 | #ff5733e6 | hsla(10.59, 100%, 60%, 0.9) |
| 85% | d9 | #ff5733d9 | hsla(10.59, 100%, 60%, 0.85) |
| 80% | cc | #ff5733cc | hsla(10.59, 100%, 60%, 0.8) |
| 75% | bf | #ff5733bf | hsla(10.59, 100%, 60%, 0.75) |
| 70% | b3 | #ff5733b3 | hsla(10.59, 100%, 60%, 0.7) |
| 65% | a6 | #ff5733a6 | hsla(10.59, 100%, 60%, 0.65) |
| 60% | 99 | #ff573399 | hsla(10.59, 100%, 60%, 0.6) |
| 55% | 8c | #ff57338c | hsla(10.59, 100%, 60%, 0.55) |
| 50% | 80 | #ff573380 | hsla(10.59, 100%, 60%, 0.5) |
| 45% | 73 | #ff573373 | hsla(10.59, 100%, 60%, 0.45) |
| 40% | 66 | #ff573366 | hsla(10.59, 100%, 60%, 0.4) |
| 35% | 59 | #ff573359 | hsla(10.59, 100%, 60%, 0.35) |
| 30% | 4d | #ff57334d | hsla(10.59, 100%, 60%, 0.3) |
| 25% | 40 | #ff573340 | hsla(10.59, 100%, 60%, 0.25) |
| 20% | 33 | #ff573333 | hsla(10.59, 100%, 60%, 0.2) |
| 15% | 26 | #ff573326 | hsla(10.59, 100%, 60%, 0.15) |
| 10% | 1a | #ff57331a | hsla(10.59, 100%, 60%, 0.1) |
| 5% | 0d | #ff57330d | hsla(10.59, 100%, 60%, 0.05) |
| 0% | 00 | #ff573300 | hsla(10.59, 100%, 60%, 0) |
Beispiele: HSLA in HSB / HSV
Über HSLA und HSB / HSV
HSLA ist HSL mit Alphakanal für die Deckkraft, geschrieben als hsla(11, 100%, 60%, 0.5). Alpha reicht von 0 (völlig transparent) bis 1 (voll deckend), modernes CSS akzeptiert es auch in hsl().
HSV, auch HSB genannt, nutzt Farbton, Sättigung und Hellwert. Photoshop, Figma und die meisten Farbwähler verwenden es für das quadratische Auswahlfeld.
So funktioniert die Umrechnung
Wir lesen den HSLA-Wert, rechnen ihn mit den Matrizen aus der Spezifikation CSS Color 4 in CIE XYZ um und von dort in HSB / HSV. Werte außerhalb des Zielfarbraums passt der Algorithmus aus CSS Color 4 an: Helligkeit und Farbton bleiben, das Chroma sinkt.
Fragen und Antworten
Wie rechne ich HSLA in HSB / HSV um?
Füge einen HSLA-Wert in das Feld oben ein oder tippe ihn ein. PickShade rechnet schon beim Tippen mit den Formeln aus CSS Color 4 um, und ein Klick kopiert den HSB / HSV-Wert.
Ist die Umrechnung von HSLA in HSB / HSV exakt?
Die Rechnung ist exakt. Gerundet wird nur für die Anzeige, mit so vielen Stellen, dass die Rückrechnung dieselbe Farbe ergibt. Passt die Farbe nicht in den Zielfarbraum, warnt PickShade und zeigt die nächste Farbe, die passt.
Bekomme ich gleichzeitig andere Formate?
Ja. Alle anderen Formate, darunter OKLCH, Display P3, Tailwind, SwiftUI, Flutter und Android, stehen unter dem Ergebnis und lassen sich mit einem Klick kopieren.
Ist dieser Konverter kostenlos?
Ja. Er ist kostenlos, braucht keine Anmeldung und läuft komplett in deinem Browser.