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

جيسلين يين
صوفيا إميليانوفا
صوفيا إميليانوفا
GitHub

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

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

فتح منتقي الألوان وتغيير الألوان

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

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

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

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

    معاينة الألوان.

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

القيمة المحسوبة لـ color-mix().

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

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

وفي ما يلي وصف لكل عنصر من عناصر واجهة المستخدم في 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. اختر إحدى مساحات الألوان التالية:

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

    أو مساحة يتم تحديدها بواسطة الدالة color(<color_space> X X X).

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

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

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

رمز تحذير يشير إلى اقتصاص السلسلة وتلميح بالقيمة الأصلية.

ويعرِض الفيديو التالي الإحالات الناجحة قيد التنفيذ.

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

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

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

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

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

قسم نسبة التباين الموسَّع مع إرشادات WebAIM أو APCA

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

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

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

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

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

استخدام القطارة في أي مكان على الشاشة

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