Konvertera HSB / HSV till HSLA
Klistra in ett HSB / HSV-värde och få HSLA direkt. Andra format fungerar också.
Opacitetstabell: HEX-alfa och HSLA
I 8-siffrig HEX anger de två sista siffrorna opaciteten: FF är helt täckande, 80 är ungefär 50 % och 00 är helt genomskinlig. Tabellen visar exempelfärgen i steg om 5 %.
| Opacitet | HEX-alfa | 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) |
Exempel: HSB / HSV till HSLA
Om HSB / HSV och HSLA
HSV, även kallat HSB, använder färgton, mättnad och ljusstyrka. Photoshop, Figma och de flesta färgväljare använder det för den fyrkantiga väljaren.
HSLA är HSL med en alfakanal för opacitet, skrivet som hsla(11, 100%, 60%, 0.5). Alfa går från 0 (helt genomskinlig) till 1 (helt täckande), och modern CSS accepterar det även i hsl().
Så fungerar konverteringen
Vi läser HSB / HSV-värdet, räknar om det till CIE XYZ med matriserna från specifikationen CSS Color 4 och sedan till HSLA. Värden utanför målformatets färgomfång anpassas med algoritmen i CSS Color 4, som behåller ljushet och färgton och minskar kroma.
Frågor och svar
Hur konverterar jag HSB / HSV till HSLA?
Klistra in eller skriv ett HSB / HSV-värde i fältet ovan. PickShade konverterar det med formlerna i CSS Color 4 medan du skriver, och ett klick kopierar HSLA-värdet.
Är konverteringen från HSB / HSV till HSLA exakt?
Beräkningen är exakt och resultatet avrundas bara för visning, med tillräckligt många siffror för att räkna tillbaka till samma färg. Om färgen inte ryms i målformatets färgomfång varnar PickShade och visar närmaste färg som ryms.
Kan jag få andra format samtidigt?
Ja. Alla andra format, bland annat OKLCH, Display P3, Tailwind, SwiftUI, Flutter och Android, listas under resultatet och kopieras med ett klick.
Är konverteraren gratis?
Ja. Den är gratis, kräver inget konto och körs helt i din webbläsare.