کلر پکر OKLCH میں کام کرتا ہے، جو جدید CSS کی ادراکی کلر اسپیس ہے۔ ایریا میں افقی سمت میں شوخی سرمئی سے لے کر اس حد تک جاتی ہے جو اسکرین اس روشنی پر دکھا سکتی ہے، اس لیے ہر نقطہ ایک قابلِ استعمال رنگ ہے، اور hue گھومنے پر تھمب اپنی جگہ رہتا ہے۔

فیلڈ CSS کا کوئی بھی رنگ لیتی ہے، ناموں سمیت، اور فارمیٹ بٹن ویلیو کو hex، rgb()، hsl()، oklch() یا color(display-p3) میں لکھتا ہے۔ کسی فارمیٹ کے gamut سے باہر کا رنگ CSS کے طریقے سے اس کے اندر لایا جاتا ہے، اس کی روشنی اور hue برقرار رکھتے ہوئے۔

چننے کے لیے swatches شامل کریں، اور رنگ کو کسی بیک گراؤنڈ کے مقابلے میں جانچنے کے لیے contrastWith، اسی طرح جیسے WCAG 2 کنٹراسٹ ناپتا ہے۔ جہاں براؤزر میں آئی ڈراپر ہو، وہاں ایک بٹن اسکرین سے رنگ اٹھاتا ہے۔

برانڈ کا رنگ

نام والے رنگ کے نمونے، اور رنگ پر سفید متن کا کنٹراسٹ: ہلکا رنگ چنیں تو AA فیل ہو جاتا ہے۔

Contrast 6.28:1 AA passes AAA fails
Get started

#4f46e5

وسیع gamut

gamut="p3" ایریا کو Display P3 رنگوں سے بھرتا ہے، اور ایک ٹوٹی ہوئی لکیر دکھاتی ہے کہ sRGB کہاں ختم ہوتا ہے۔ ویلیو oklch() میں ہی رہتی ہے۔

پاپ اوور میں

رنگ دکھانے والا ایک بٹن پکر کو پاپ اوور میں کھولتا ہے۔