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

Jecelyn Yeen

Sofia Emelianova

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

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

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

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

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

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

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

   

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

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

عناصر "منتقي الألوان"

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

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

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

    • لوحة تصميم Material:
    • لوحة مخصّصة لإضافة اللون الحالي إلى هذه اللوحة يدويًا، انقر على .
    • متغيرات 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. استخدِم اللون المقترَح الذي يتوافق مع الإرشادات:

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

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

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

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

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

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

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