رفتن به انتخابگر رنگ

تبدیل Display P3 به HSLA

یک مقدار Display P3 وارد کنید و فوراً HSLA بگیرید. فرمت‌های دیگر هم کار می‌کنند.

خوانده‌شده به‌صورت CSS color()

مقدار HSLAhsla(10.59, 100%, 60%, 1)
HSLA به Display P3

تنظیم رنگ

۱۱°
۱۰۰٪

۶۸٪
۰٫۲۱۰
۳۴°

همهٔ فرمت‌های دیگر

جدول کدری: آلفا در HEX و HSLA

در HEX هشت‌رقمی، دو رقم آخر کدری را تعیین می‌کنند: FF کاملاً مات، 80 حدود ۵۰٪ و 00 کاملاً شفاف است. جدول رنگ نمونه را با گام‌های ۵٪ نشان می‌دهد.

کدریآلفا در HEXHEXHSLA
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)

نمونه‌های تبدیل Display P3 به HSLA

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

دربارهٔ Display P3 و HSLA

Display P3 گاموت رنگی گستردهٔ نمایشگرهای جدید Apple و بسیاری از گوشی‌هاست. حدود 25% رنگ بیشتر از sRGB را پوشش می‌دهد و به‌صورت color(display-p3 r g b) نوشته می‌شود.

HSLA همان HSL به‌همراه کانال آلفا برای کدری است و به شکل hsla(11, 100%, 60%, 0.5) نوشته می‌شود. آلفا از 0 (کاملاً شفاف) تا 1 (کاملاً مات) است و CSS مدرن آن را داخل hsl() هم می‌پذیرد.

تبدیل چطور انجام می‌شود

مقدار Display P3 را می‌خوانیم، با ماتریس‌های مشخصات CSS Color 4 به CIE XYZ و سپس به HSLA تبدیلش می‌کنیم. مقادیر بیرون از گاموت مقصد با الگوریتم CSS Color 4 نگاشت می‌شوند که روشنایی و فام را نگه می‌دارد و کروما را کم می‌کند.

پرسش و پاسخ

چطور Display P3 را به HSLA تبدیل کنم؟

یک مقدار Display P3 را در کادر بالا جای‌گذاری یا تایپ کنید. PickShade هم‌زمان با تایپ، آن را با فرمول‌های CSS Color 4 تبدیل می‌کند و با یک کلیک مقدار HSLA کپی می‌شود.

آیا تبدیل Display P3 به HSLA دقیق است؟

محاسبات دقیق است و نتیجه فقط برای نمایش گرد می‌شود، با رقم‌های کافی برای برگشت به همان رنگ. اگر رنگ در گاموت مقصد جا نشود، PickShade هشدار می‌دهد و نزدیک‌ترین رنگی را که جا می‌شود نشان می‌دهد.

آیا می‌توانم هم‌زمان فرمت‌های دیگر را هم بگیرم؟

بله. همهٔ فرمت‌های دیگر، از جمله OKLCH، Display P3، Tailwind، SwiftUI، Flutter و Android، زیر نتیجه آمده‌اند و با یک کلیک کپی می‌شوند.

این مبدل رایگان است؟

بله. رایگان است، ثبت‌نام نمی‌خواهد و کاملاً در مرورگر شما اجرا می‌شود.