يعمل منتقي الألوان في OKLCH، وهو الفضاء اللوني الإدراكي في CSS الحديث. وعلى امتداد المساحة أفقيًا، يتدرّج التشبّع (chroma) من الرمادي إلى أقصى ما تستطيع الشاشة عرضه عند ذلك السطوع، فكل نقطة فيها لون يمكنك استخدامه، ويبقى المقبض في مكانه حين تتغيّر درجة اللون (hue).

يقبل الحقل أي لون في CSS، بما في ذلك أسماء الألوان، ويكتب زر الصيغة القيمة بصيغة hex أو rgb() أو hsl() أو oklch() أو color(display-p3). واللون الواقع خارج النطاق اللوني لصيغةٍ ما يُعاد إليه بطريقة CSS، مع الحفاظ على سطوعه ودرجة لونه.

أضف swatches لتختار منها، وcontrastWith لفحص تباين اللون مع خلفية كما يقيسه WCAG 2. وحيث يوفّر المتصفح قطّارة، يلتقط زرٌّ لونًا من الشاشة.

لون العلامة التجارية

عيّنات لونية مسمّاة، وتباين النص الأبيض على اللون: اختر لونًا فاتحًا فيفشل AA.

Contrast 6.28:1 AA passes AAA fails
Get started

#4f46e5

نطاق لوني واسع

يملأ gamut="p3" المساحة بألوان Display P3، ويُبيّن خط متقطع أين ينتهي sRGB. وتبقى القيمة بصيغة oklch().

داخل نافذة منبثقة

زرٌّ يعرض اللون يفتح المنتقي في نافذة منبثقة.