يمكنك فحص الألوان بدقة عالية وغير عالية الدقة وتصحيح الأخطاء فيها باستخدام أداة اختيار الألوان

Jecelyn Yeen

Sofia Emelianova

يقدّم أداة اختيار الألوان واجهة مستخدم لتغيير تعريفات color و*-color، كما يتيح لك إنشاء ألوان غير عالية الدقة وألوان عالية الدقة وتحويلها وتصحيح أخطاءها بنقرة واحدة.

ملاحظة مهمة: يعرض هذا الفيديو إصدار أدوات مطوّري البرامج في Chrome أقدم من 112. في الإصدارات الأحدث، تتيح لوحة الأنماط استخدام 12 مساحة ألوان جديدة و7 نطاقات ألوان جديدة من مواصفات CSS Color Level 4 ووظيفة color-mix() من CSS Color Level 5.

للاطّلاع على نظرة معمّقة على مساحات الألوان الجديدة، راجِع دليل ألوان CSS عالي الدقة.

فتح "أداة اختيار الألوان" وتغيير الألوان

استخدِم أداة اختيار الألوان لتغيير قيم الألوان بنقرة واحدة:

1. اختَر عنصرًا في لوحة العناصر.

2. في لوحة الأنماط، ابحث عن بيان color أو *-color الذي تريد تغييره.

   على يمين كل قيمة color أو *-color، يظهر رمز مربّع صغير يتضمّن معاينة لهذا اللون.

   

   ملاحظة: يعرض هذا المثال دائرتين متقاطعتين بجانب الدالة color-mix(): . يمثّل التقاطع معاينة للّون الناتج.

لفحص القيمة المحسوبة، استخدِم اللوحة محسوبة.

1. انقر على مربّع المعاينة بجانب لون لفتح أداة اختيار الألوان.
2. لتغيير اللون، استخدِم أيًا من عناصر واجهة المستخدم في أداة اختيار الألوان.

عناصر "علبة الألوان"

في ما يلي وصف لكل عنصر من عناصر واجهة المستخدم في أداة اختيار الألوان:

1. الظلال:
2. قطّارة العين اطّلِع على أخذ عيّنة من لون في أي مكان باستخدام أداة اختيار الألوان.
3. النسخ إلى الحافظة انسخ القيمة المعروضة إلى الحافظة.
4. القيمة المعروضة: وسيطات مساحة اللون التي تم اختيارها
5. نسبة التباين: لا تتوفّر إلا لقيم color. هذا هو الفرق بين color وbackground-color.
6. لوحة الألوان: انقر على مربّع لتغيير لونه إلى لون مربّع آخر.
7. حدود نطاق الألوان لا يتوفّر هذا السطر إلا لمساحات الألوان الجديدة ووظيفة color(). ويمكنها إنتاج ألوان بدقة عالية وغير عالية. يتيح لك هذا السطر التمييز بين المحتوى بدقة عالية والمحتوى غير العالي الدقة.
8. دائرة الألوان اسحب هذه الدائرة على مستوى التدرجات لتغيير القيمة المعروضة.
9. شريط تمرير تدرُّج الألوان:
10. شريط تمرير التعتيم
11. مبدّل القيمة المعروضة اختَر مساحة ألوان من القائمة المنسدلة. راجِع مقالة تحويل الألوان.
    ملاحظة: بدلاً من ذلك، لفتح القائمة المنسدلة مباشرةً، اضغط مع الاستمرار على Shift وانقر على رمز معاينة اللون بجانب قيمة اللون.
12. توسيع نسبة التباين: يؤدي النقر على هذا الخيار إلى فتح القسم المقابل الذي يتيح لك إصلاح التباين.

13. مبدِّل لوحة الألوان انقر عليه للتبديل بين:

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

اختيار مساحة ألوان

لاختيار مساحة ألوان:

1. اضغط على Shift مع النقر على رمز المعاينة بجانب قيمة اللون. ستظهر قائمة منسدلة.

   ملاحظة: بدلاً من ذلك، انقر على مبدِّل قيمة العرض في أداة اختيار الألوان.

   

2. اختَر أحد المساحات اللونية التالية:

   • #<hex-color>
   • rgb(X X X / .X).
   • hsl(X X X / X).
   • hwb(X X X / .X).

   أو إحدى المساحات الجديدة:

   • lch(X X X / .X)
   • oklch(X X X / .X)
   • lab(X X X / .X)
   • oklab(X X X / .X)

   أو مساحة محدّدة بواسطة الدالة color(<color_space> X X X)

تحويل الألوان

عند التبديل بين مساحات الألوان باستخدام مبدِّل قيمة العرض، تحوّل أدوات المطوّرين القيم تلقائيًا.

تحذير: عند التحويل من دقة عالية إلى دقة عادية، تقتطع أدوات مطوّري البرامج نطاقات الألوان لتلائم المساحة وتضع علامة على القيم المقتطعة باستخدام رموز التحذير .

مرِّر مؤشّر الماوس فوق الرمز للاطّلاع على القيمة الأصلية.

يعرض الفيديو التالي الإحالات الناجحة أثناء تنفيذها.

إصلاح التباين

ملاحظة مهمة: لا تحسب أداة أداة اختيار الألوان نسب التباين إلا لقيم color بالنسبة إلى قيم background-color ذات الصلة. وبالتالي، لا تحتوي سوى قيم color على أقسام نسبة التباين.

لحلّ مشكلة التباين في بيان color:

1. افتح أداة اختيار الألوان بجانب القيمة color.
2. وسِّع قسم نسبة التباين .

3. استخدِم اللون المقترَح الذي يتوافق مع إرشادات:

   • انقر على بجانب الإرشاد.
   • في معاينة الظلال في أعلى الصفحة، اسحب دائرة الألوان أسفل السطر المقابل.

ملاحظة: تقترح عليك أداة اختيار الألوان تلقائيًا اتّباع إرشادات WebAIM. بدلاً من ذلك، يمكنك ضبطه لاقتراح قيم متوافقة مع APCA: في الإعدادات > التجارب، ضَع علامة في المربّع بجانب تفعيل خوارزمية التباين الحسي المتقدّمة (APCA) الجديدة...

للحصول على قائمة بجميع مشاكل التباين دفعة واحدة، اتّبِع دليل جعل موقعك الإلكتروني أكثر سهولة في القراءة.

الحصول على عيّنة من لون في أي مكان باستخدام أداة اختيار الألوان

يمكن لأداة اختيار الألوان أخذ عيّنات من الألوان من الصفحة ومن أي مكان على الشاشة.

لاختيار لون من أي مكان على الشاشة:

1. افتح أداة اختيار الألوان ونفذ أحد الإجراءات التالية:
   • انقر على الزر .
   • اضغط على C لتفعيل أداة أخذ العينات. لإيقاف الميزة، اضغط على Escape.
2. مع تفعيل أداة اختيار الألوان، مرِّر مؤشر الماوس فوق اللون المستهدَف وانقر لأخذ عيّنة منه.

ملاحظة: لا تأخذ أداة قطّارة الألوان عيّنات من الألوان إلا في مساحة الألوان sRGB. عند أخذ عيّنة خارج هذه المساحة، يقطع قطّارة الألوان اللون إلى أقرب لون. راجِع مقالة تحويل الألوان.

في هذا المثال، تعرِض أداة اختيار الألوان قيمة اللون الحالية rgb(224 255 255 / 15%). يتغيّر هذا اللون إلى اللون الوردي بعد النقر خارج Chrome.