Konverter Display P3 til HSLA
Lim inn en Display P3-verdi og få HSLA med en gang. Andre formater virker også.
Opasitetstabell: HEX-alfa og HSLA
I 8-sifret HEX bestemmer de to siste sifrene opasiteten: FF er helt dekkende, 80 er rundt 50 %, og 00 er helt gjennomsiktig. Tabellen viser eksempelfargen i trinn på 5 %.
| Opasitet | 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) |
Eksempler: Display P3 til HSLA
Om Display P3 og HSLA
Display P3 er det brede fargeomfanget i moderne Apple-skjermer og mange mobiler. Det rommer omtrent 25 % flere farger enn sRGB og skrives som color(display-p3 r g b).
HSLA er HSL med en alfakanal for opasitet, skrevet som hsla(11, 100%, 60%, 0.5). Alfa går fra 0 (helt gjennomsiktig) til 1 (helt dekkende), og moderne CSS godtar det også i hsl().
Slik fungerer konverteringen
Vi leser Display P3-verdien, regner den om til CIE XYZ med matrisene fra spesifikasjonen CSS Color 4 og deretter til HSLA. Verdier utenfor målformatets fargeomfang tilpasses med algoritmen i CSS Color 4, som beholder lyshet og fargetone og reduserer kroma.
Spørsmål og svar
Hvordan konverterer jeg Display P3 til HSLA?
Lim inn eller skriv en Display P3-verdi i feltet ovenfor. PickShade konverterer den med formlene i CSS Color 4 mens du skriver, og med ett klikk kopierer du HSLA-verdien.
Er konverteringen fra Display P3 til HSLA nøyaktig?
Beregningen er nøyaktig, og resultatet rundes bare av for visning, med nok sifre til å regne tilbake til samme farge. Hvis fargen ikke får plass i målformatets fargeomfang, varsler PickShade deg og viser nærmeste farge som får plass.
Kan jeg få andre formater samtidig?
Ja. Alle andre formater, blant annet OKLCH, Display P3, Tailwind, SwiftUI, Flutter og Android, står under resultatet og kopieres med ett klikk.
Er denne konvertereren gratis?
Ja. Den er gratis, krever ingen registrering og kjører helt i nettleseren din.