انتقل إلى منتقي الألوان

شرح النطاق اللوني: sRGB وDisplay P3 والألوان خارج النطاق

النطاق اللوني (gamut) هو مجموعة الألوان التي تستطيع شاشة أو فضاء لوني عرضها. بُني الويب على sRGB، لكن معظم الهواتف وكثيرًا من الحواسيب المحمولة تعرض اليوم Display P3، وفيه ألوان حمراء وخضراء وبرتقالية أكثر حيوية بشكل ملحوظ.

وقت القراءة: 2 د

ما هو النطاق اللوني

كل شاشة تمزج الضوء الأحمر والأخضر والأزرق. وأنقى أحمر وأخضر وأزرق تستطيع إنتاجها تحدد رؤوس مثلث، وكل لون داخل هذا المثلث يقع ضمن نطاقها. أما الألوان خارجه فلا يمكن عرضها على تلك الشاشة ببساطة.

sRGB وDisplay P3 وRec. 2020

sRGB هو الفضاء الافتراضي للويب ولمعظم الشاشات التي بيعت قبل 2016. وتصف HEX وrgb() وhsl() كلها ألوانًا في sRGB.

يغطي Display P3 ألوانًا أكثر من sRGB بنحو الربع، معظمها درجات حيوية من الأخضر والأحمر والبرتقالي. وتستخدمه أجهزة iPhone وiPad وMac وكثير من هواتف Android والحواسيب المحمولة الفاخرة. ويُكتب في CSS بالصيغة color(display-p3 r g b) أو كقيمة OKLCH بكروما عالية.

أما Rec. 2020 فأوسع من ذلك، ويُستخدم لفيديو HDR. وقليل جدًا من الشاشات يغطيه بالكامل.

مثال: #ff5733
الصيغةالقيمة
HEX
Display P3
OKLCH
Rec. 2020

ماذا يحدث للألوان خارج النطاق

إذا كان لون CSS خارج نطاق الشاشة، فعلى المتصفح أن يعرض شيئًا آخر. القص البسيط (clipping) يقطع كل قناة عند حدها، وقد يغيّر الصبغة. لذا توصي CSS Color 4 بدلًا من ذلك بتعيين النطاق (gamut mapping) في 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 على Windows؟

نعم، إذا كانت الشاشة تغطي P3 وكان المتصفح يعرف ملف تعريف الشاشة. وعلى شاشة sRGB يعيد المتصفح اللون إلى sRGB، فلا يتعطل شيء.

هل HEX محصور في sRGB؟

نعم. تصف HEX وrgb() وhsl() وhwb() دائمًا ألوانًا في sRGB. استخدم oklch() أو color(display-p3 ...) لألوان النطاق الواسع.

جرّبه في PickShade

أدلة ذات صلة