Naar de kleurkiezer

HSLA naar Display P3 converter

Plak een HSLA-waarde en krijg direct Display P3. Andere formaten werken ook.

Gelezen als HSL

Display P3-waardecolor(display-p3 0.92578 0.38909 0.25797 / 0.8)
Display P3 naar HSLA

Dezelfde kleur zonder transparantie, als dekkende Display P3

Kleur aanpassen

11°
80%

68%
0,210
34°

Alle andere formaten

Dekkingstabel: HEX-alfa en HSLA

Bij 8-cijferige HEX bepalen de laatste twee cijfers de dekking: FF is volledig dekkend, 80 is ongeveer 50%, 00 is volledig transparant. De tabel toont de voorbeeldkleur in stappen van 5%.

DekkingHEX-alfaHEXHSLA
100%ff#ff5733hsla(10.59, 100%, 60%, 1)
95%f2#ff5733f2hsla(10.59, 100%, 60%, 0.95)
90%e6#ff5733e6hsla(10.59, 100%, 60%, 0.9)
85%d9#ff5733d9hsla(10.59, 100%, 60%, 0.85)
80%cc#ff5733cchsla(10.59, 100%, 60%, 0.8)
75%bf#ff5733bfhsla(10.59, 100%, 60%, 0.75)
70%b3#ff5733b3hsla(10.59, 100%, 60%, 0.7)
65%a6#ff5733a6hsla(10.59, 100%, 60%, 0.65)
60%99#ff573399hsla(10.59, 100%, 60%, 0.6)
55%8c#ff57338chsla(10.59, 100%, 60%, 0.55)
50%80#ff573380hsla(10.59, 100%, 60%, 0.5)
45%73#ff573373hsla(10.59, 100%, 60%, 0.45)
40%66#ff573366hsla(10.59, 100%, 60%, 0.4)
35%59#ff573359hsla(10.59, 100%, 60%, 0.35)
30%4d#ff57334dhsla(10.59, 100%, 60%, 0.3)
25%40#ff573340hsla(10.59, 100%, 60%, 0.25)
20%33#ff573333hsla(10.59, 100%, 60%, 0.2)
15%26#ff573326hsla(10.59, 100%, 60%, 0.15)
10%1a#ff57331ahsla(10.59, 100%, 60%, 0.1)
5%0d#ff57330dhsla(10.59, 100%, 60%, 0.05)
0%00#ff573300hsla(10.59, 100%, 60%, 0)

Voorbeelden: HSLA naar Display P3

KleurHSLADisplay P3
hsla(0, 100%, 50%, 1)color(display-p3 0.91749 0.20029 0.13856)
hsla(120, 100%, 50%, 1)color(display-p3 0.4584 0.98526 0.29829)
hsla(240, 100%, 50%, 1)color(display-p3 0 0 0.95959)
hsla(0, 0%, 100%, 1)color(display-p3 1 1 1)
hsla(0, 0%, 0%, 1)color(display-p3 0 0 0)
hsla(0, 0%, 50.2%, 1)color(display-p3 0.50196 0.50196 0.50196)
hsla(10.59, 100%, 60%, 1)color(display-p3 0.92577 0.38907 0.25797)
hsla(217.22, 91.22%, 59.8%, 1)color(display-p3 0.30473 0.50347 0.93383)
hsla(160.12, 84.08%, 39.41%, 1)color(display-p3 0.33254 0.71471 0.52213)
hsla(37.69, 92.13%, 50.2%, 1)color(display-p3 0.91216 0.63495 0.23045)
hsla(258.31, 89.53%, 66.27%, 1)color(display-p3 0.51827 0.3688 0.93154)
hsla(330.37, 81.19%, 60.39%, 1)color(display-p3 0.85506 0.33272 0.5918)

Over HSLA en Display P3

HSLA is HSL met een alfakanaal voor de dekking, geschreven als hsla(11, 100%, 60%, 0.5). Alfa loopt van 0 (volledig transparant) tot 1 (volledig dekkend), en moderne CSS accepteert het ook binnen hsl().

Display P3 is de brede gamut van moderne Apple-schermen en veel telefoons. Het bereikt zo’n 25% meer kleuren dan sRGB en wordt geschreven als color(display-p3 r g b).

Zo werkt de omzetting

We lezen de HSLA-waarde, zetten die met de matrices uit de specificatie CSS Color 4 om naar CIE XYZ en daarna naar Display P3. Waarden buiten de doelgamut worden aangepast met het algoritme van CSS Color 4: lichtheid en kleurtoon blijven, de chroma daalt.

Vragen en antwoorden

Hoe zet ik HSLA om naar Display P3?

Plak of typ een HSLA-waarde in het veld hierboven. PickShade zet hem al tijdens het typen om met de formules van CSS Color 4, en met één klik kopieer je de Display P3-waarde.

Is de omzetting van HSLA naar Display P3 exact?

De berekening is exact en het resultaat wordt alleen voor de weergave afgerond, met genoeg cijfers om terug te rekenen naar dezelfde kleur. Past de kleur niet in de doelgamut, dan waarschuwt PickShade je en toont de dichtstbijzijnde kleur die wel past.

Kan ik tegelijk andere formaten krijgen?

Ja. Alle andere formaten, waaronder OKLCH, Display P3, Tailwind, SwiftUI, Flutter en Android, staan onder het resultaat en kopieer je met één klik.

Is deze converter gratis?

Ja. Hij is gratis, vraagt geen account en draait volledig in je browser.