يوفر Color Picker واجهة مستخدم تصويرية لتغيير بيانات التعريف color
و*-color
ويتيح لك إنشاء وتحويل وتصحيح الأخطاء في الألوان غير العالية الدقة والألوان عالية الدقة بنقرة واحدة.
للحصول على نظرة تفصيلية على مساحات الألوان الجديدة، يمكنك الاطّلاع على دليل ألوان CSS بدقة عالية.
فتح منتقي الألوان وتغيير الألوان
يمكنك استخدام منتقي الألوان لتغيير قيم الألوان بنقرة واحدة:
- اختَر عنصرًا في لوحة العناصر.
في لوحة الأنماط، ابحث عن تعريف
color
أو*-color
الذي تريد تغييره.على يمين كل قيمة
color
أو*-color
، يتوفّر رمز مربّع صغير يحتوي على معاينة لذلك اللون.
لفحص القيمة المحسوبة، استخدِم اللوحة Computed.
- انقر على مربع المعاينة بجانب اللون لفتح علبة الألوان.
- لتغيير اللون، استخدم أيًا من عناصر واجهة المستخدم في Color Picker.
عناصر علبة الألوان
وفي ما يلي وصف لكل عنصر من عناصر واجهة المستخدم في Color Picker:
- الظلال:
- القنطرة: راجع عينة لون في أي مكان باستخدام القطارة.
- النسخ إلى الحافظة انسخ قيمة العرض إلى الحافظة.
- قيمة العرض: وسيطات مساحة اللون المختارة
- نسبة التباين: يتوفّر هذا الخيار لقيمتَين (
color
) فقط. الفرق بينcolor
وbackground-color
. - لوحة الألوان: انقر على مربّع لتغيير اللون إلى لون المربّع.
- حدود السلسلة. لا يتوفر هذا السطر إلا لفراغات الألوان الجديدة ودالة
color()
. ويمكنها إنتاج ألوان بالدقة العالية وألوان غير عالية الدقة. ويتيح لك هذا الخط التمييز بين الدقة العالية والدقة غير العالية. - دائرة الألوان اسحب هذه الدائرة عبر الظلال لتغيير قيمة العرض.
- شريط تمرير التدرج:
- شريط تمرير معدل الشفافية:
- أداة تبديل قيمة العرض: اختر مساحة اللون من القائمة المنسدلة. راجِع تحويل الألوان.
- توسيع نسبة التباين: لفتح القسم المقابل الذي يتيح لك إصلاح التباين.
أداة تبديل لوحة الألوان انقر عليه للتبديل بين:
- لوحة تصميم Material.
- لوحة مخصّصة. لإضافة اللون الحالي يدويًا إلى هذه اللوحة، انقر على .
- متغيرات CSS. يسرد جميع متغيّرات CSS المخصّصة (المُضافة بـ
--
) على صفحتك. - لوحة ألوان الصفحة. لإنشاء لوحة الألوان هذه، تبحث أدوات مطوّري البرامج عن جميع الألوان في أوراق الأنماط.
اختيار مساحة اللون
لاختيار مساحة اللون:
انقر على Shift مع النقر على رمز المعاينة بجانب قيمة اللون. ستظهر قائمة منسدلة.
اختر إحدى مساحات الألوان التالية:
أو إحدى المساحات الجديدة:
أو مساحة يتم تحديدها بواسطة الدالة
color(<color_space> X X X)
.
تحويل الألوان
عند التبديل بين مساحات الألوان باستخدام أداة تبديل قيمة العرض، تحوِّل "أدوات مطوّري البرامج" القيم تلقائيًا.
مرِّر مؤشّر الماوس فوق الرمز للاطّلاع على القيمة الأصلية.
ويعرِض الفيديو التالي الإحالات الناجحة قيد التنفيذ.
إصلاح التباين
لحلّ مشكلة متعلقة بالتباين في بيان color
:
- افتح منتقي الألوان إلى جانب القيمة
color
. - وسِّع قسم نسبة التباين .
استخدِم اللون المقترَح الذي يتوافق مع الإرشادات:
- انقر على الرمز بجانب الإرشادات.
- في معاينة الظلال في الجزء العلوي، اسحب دائرة الألوان أسفل الخط المقابل.
للحصول على قائمة بجميع مشاكل التباين في آن واحد، يُرجى اتّباع دليل جعل موقعك الإلكتروني أكثر قابلية للقراءة.
تذوَّق اللون في أي مكان باستخدام القطارة
يمكن لـ العينة أخذ عينات من الألوان من الصفحة ومن أي مكان على الشاشة.
لاختيار لون من أي مكان على الشاشة:
- افتح علبة الألوان ونفِّذ أحد الإجراءات التالية:
- انقر على الزرّ .
- اضغط على المفتاح C لتفعيل أداة Eyedropper. لإلغاء تفعيلها، اضغط على Escape.
- بعد تفعيل القطارة، مرِّر مؤشر الماوس فوق اللون المستهدف وانقر على عيّنة.
في هذا المثال، تعرض أداة اختيار الألوان قيمة اللون الحالية وهي rgb(224 255 255 / 15%)
. يتغير هذا اللون إلى اللون الوردي بعد النقر خارج Chrome.