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

Jecelyn Yeen

Sofia Emelianova

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

للحصول على معلومات تفصيلية حول مساحات الألوان الجديدة، يمكنك الاطّلاع على دليل ألوان CSS العالية الدقة.

فتح "علبة الألوان" وتغيير الألوان

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

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

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

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

   

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

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

عناصر "أداة اختيار الألوان"

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

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

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

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

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

تقترح أداة اختيار الألوان تلقائيًا قيمًا متوافقة مع APCA.

بدلاً من ذلك، يمكنك ضبطها على اقتراح قيم متوافقة مع إرشادات WebAIM. في الإعدادات > الإعدادات المفضّلة > العناصر، أزِل العلامة من مربّع الاختيار خوارزمية التباين الإدراكي المتقدّمة (APCA)....

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

اختيار عيّنة لون من أي مكان باستخدام أداة "قطّارة الألوان"

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

لاختيار لون من أي مكان على الشاشة، اتّبِع الخطوات التالية:

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

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