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

گاموت رنگ به زبان ساده: sRGB، Display P3 و رنگ‌های بیرون از گاموت

گاموت مجموعه رنگ‌هایی است که یک صفحه‌نمایش یا یک فضای رنگی می‌تواند نشان دهد. وب بر پایه sRGB ساخته شده، اما امروز بیشتر گوشی‌ها و بسیاری از لپ‌تاپ‌ها Display P3 را نشان می‌دهند که قرمزها، سبزها و نارنجی‌های آن به‌وضوح زنده‌ترند.

2 دقیقه مطالعه

گاموت چیست

هر صفحه‌نمایش نور قرمز، سبز و آبی را با هم ترکیب می‌کند. خالص‌ترین قرمز، سبز و آبی که می‌تواند بسازد، سه رأس یک مثلث را تعیین می‌کنند و هر رنگی که داخل این مثلث باشد، در گاموت آن قرار دارد. رنگ‌های بیرون از آن اصلاً روی آن صفحه‌نمایش نشان داده نمی‌شوند.

sRGB، Display P3 و Rec. 2020

sRGB پیش‌فرض وب و بیشتر مانیتورهایی است که پیش از 2016 فروخته شده‌اند. HEX، rgb() و hsl() همگی رنگ‌های sRGB را توصیف می‌کنند.

Display P3 حدود یک‌چهارم رنگ بیشتر از sRGB را پوشش می‌دهد، بیشتر سبزها، قرمزها و نارنجی‌های زنده. آیفون، آیپد، مک و بسیاری از گوشی‌های Android و لپ‌تاپ‌های رده‌بالا از آن استفاده می‌کنند. در CSS آن را به‌صورت color(display-p3 r g b) یا با یک مقدار OKLCH با کرومای بالا می‌نویسند.

Rec. 2020 از این هم بزرگ‌تر است و برای ویدیوی HDR به کار می‌رود. صفحه‌نمایش‌های خیلی کمی آن را کامل پوشش می‌دهند.

نمونه: #ff5733
فرمتمقدار
HEX
Display P3
OKLCH
Rec. 2020

چه بر سر رنگ‌های بیرون از گاموت می‌آید

اگر یک رنگ CSS بیرون از گاموت صفحه‌نمایش باشد، مرورگر ناچار است چیز دیگری نشان دهد. بریدن ساده (clipping) هر کانال را تا حد مجاز کوتاه می‌کند و ممکن است فام را تغییر دهد. CSS Color 4 به‌جای آن نگاشت گاموت در OKLCH را توصیه می‌کند: روشنایی و فام حفظ شوند و کروما آن‌قدر پایین بیاید تا رنگ جا شود.

PickShade هر رنگی را که بیرون از sRGB بیفتد علامت می‌زند و جایگزین نگاشت‌شده را نشان می‌دهد، تا دقیقاً بدانید کاربرانی که صفحه‌نمایش قدیمی‌تر دارند چه می‌بینند.

استفاده بی‌خطر از رنگ‌های P3 در CSS

اول یک مقدار جایگزین sRGB بنویسید و بعد مقدار گاموت گسترده را، یا مقدار زنده را داخل یک مدیا کوئری color-gamut بگذارید.

CSS

.button {
    background: #ff5733;
    background: oklch(68% 0.24 33.7);
}

@media (color-gamut: p3) {
    .hero {
        color: color(display-p3 1 0.3 0.15);
    }
}

پرسش و پاسخ

از کجا بفهمم یک رنگ داخل sRGB است؟

آن را در PickShade بچسبانید. هر رنگی که بیرون از sRGB باشد، هشدار گاموت می‌گیرد و نزدیک‌ترین رنگی که جا می‌شود هم کنارش نشان داده می‌شود.

آیا رنگ‌های P3 در ویندوز کار می‌کنند؟

بله، اگر مانیتور P3 را پوشش دهد و مرورگر پروفایل نمایشگر را بشناسد. روی صفحه‌نمایش sRGB، مرورگر رنگ را به داخل sRGB می‌برد، پس چیزی خراب نمی‌شود.

آیا HEX به sRGB محدود است؟

بله. HEX، rgb()، hsl() و hwb() همیشه رنگ‌های sRGB را توصیف می‌کنند. برای رنگ‌های گاموت گسترده از oklch() یا color(display-p3 ...) استفاده کنید.

در PickShade امتحان کنید

راهنماهای مرتبط