كيف يقرأ المنتقي اللون
يُخزَّن كل بكسل في الصورة الرقمية ثلاثة أرقام للأحمر والأخضر والأزرق، كل منها من 0 إلى 255. ويقرأ المنتقي هذه الأرقام مباشرة من الصورة بعد فك ترميزها، فكود HEX الذي تنسخه هو القيمة المخزنة فعلًا، لا تقديرًا من لقطة لشاشتك. لكن الصور الفوتوغرافية فيها تشويش، وضغط JPEG يترك مربعات صغيرة بدرجات مختلفة قليلًا، فقد يبتعد بكسل واحد بضع درجات عن اللون الذي تراه. لذلك اختر للصور «عدد البكسلات للمتوسط» 3 × 3 أو 5 × 5، فيعطيك المنتقي متوسط 9 أو 25 بكسلًا، وهو أقرب إلى ما تدركه العين. وتُحسب البكسلات شبه الشفافة بقدر عتامتها، وتُتجاهل الشفافة تمامًا. وتُقرأ الألوان في فضاء sRGB، وهو فضاء الألوان القياسي للويب؛ فالصورة المحفوظة بملف تعريف ألوان أوسع، مثل Display P3 في الجوالات الحديثة أو Adobe RGB، تُحوَّل إلى sRGB أولًا، وقد يُظهر برنامج تصميم يعمل بذلك الملف الأوسع أرقامًا مختلفة قليلًا.
HEX وRGB وHSL وCMYK: أيها تنسخ؟
كود HEX (#1F7A4D) هو قيمة RGB نفسها مكتوبة بالنظام الست عشري، وهو ما تطلبه أغلب منصات بناء المواقع وبرامج التصميم وأدلة الهوية البصرية. أما RGB (rgb(31, 122, 77)) وHSL (hsl(150, 59%, 30%)) فكلاهما صالح في CSS. وتصف صيغة HSL درجة اللون بالدرجات ثم التشبع والإضاءة بالنسبة المئوية، فيسهل بها صنع درجة أفتح أو أغمق من اللون نفسه بتغيير الرقم الأخير وحده. وصيغة CMYK هي طريقة المطابع في مزج أحبار السماوي والأرجواني والأصفر والأسود، والقيمة المعروضة هنا تتبع التحويل المدرسي البسيط دون ملف تعريف للطابعة، فاعتبرها نقطة بداية واطلب من المطبعة القيمة التي تناسب آلتها وورقها. وبعض ألوان الشاشة الساطعة جدًا، مثل الأخضر الصافي في RGB، لا يمكن طباعتها بدقة أصلًا.
اللوحة التلقائية: كيف تُستخرج الألوان السائدة
بمجرد فتح الصورة تجمع الأداة بكسلاتها في عدد الألوان الذي تختاره، من 3 إلى 12، وترتبها من الأكثر انتشارًا إلى الأقل مع النسبة التي يغطيها كل لون من الصورة. وتستخدم لذلك طريقة التجميع k-means المكتوبة لهذه الصفحة: تُقارن البكسلات في فضاء الألوان CIELAB، المصمم بحيث تبدو المسافات المتساوية فيه مختلفة بالقدر نفسه تقريبًا للعين البشرية، فيجتمع لونان أخضران متشابهان في مجموعة واحدة، بينما يحصل شعار أحمر صغير على مجموعته الخاصة. وكل لون في اللوحة هو متوسط البكسلات الحقيقية في مجموعته، لا درجة مخترعة. وتُستبعد المناطق الشفافة، مثل خلفية شعار PNG، حتى لا تضيف لونًا أبيض أو أسود غير موجود. والصورة نفسها تعطي اللوحة نفسها دائمًا، ويستغرق ذلك في الصورة العادية جزءًا من الثانية.
فحص التباين بمعادلة WCAG 2.2
اختر لونًا للنص ولونًا للخلفية، من اللوحة أو من الألوان التي حفظتها أو بكتابة كود HEX، فتحسب الأداة نسبة التباين بينهما بالمعادلة التي نشرها اتحاد W3C في إرشادات WCAG 2.2. يُحوَّل كل لون أولًا إلى سطوعه النسبي: تُحوَّل قيم الأحمر والأخضر والأزرق إلى ضوء خطي، ثم تُوزن بالأرقام 0.2126 و0.7152 و0.0722، لأن العين أكثر حساسية للأخضر منها للأزرق بكثير. والنسبة هي السطوع الأفتح مضافًا إليه 0.05 مقسومًا على السطوع الأغمق مضافًا إليه 0.05، فتنتج قيمة من 1:1 (لا تباين) إلى 21:1 (أسود على أبيض). ويطلب المستوى AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير، الذي تعرّفه WCAG بأنه 18 نقطة على الأقل أو 14 نقطة بخط عريض. ويطلب المستوى AAA نسبة 7:1 و4.5:1. وتحتاج الأيقونات وحدود حقول الإدخال وخطوط الرسوم البيانية إلى 3:1 وفق قاعدة تباين العناصر غير النصية. وتُقطع النسبة المعروضة عند منزلتين عشريتين ولا تُقرَّب إلى الأعلى أبدًا، فتظهر 4.499 بقيمة 4.49 وتُعدّ غير ناجحة، كما تقصد WCAG.
التصدير والالتقاط من الشاشة والملفات المعطوبة والحدود
يمكنك نسخ اللوحة، أو الألوان التي حفظتها فقط، متغيراتِ CSS مخصصة (--color-1: #1F7A4D;)، أو حفظها ملف CSS، أو ملف JSON فيه HEX وRGB وHSL وCMYK ونسبة كل لون، أو بطاقة ألوان PNG مطبوع تحت كل لون كوده، لترسلها إلى عميل أو تضعها في لوحة إلهام. ويستطيع كروم وإيدج على الكمبيوتر أيضًا التقاط لون من أي مكان على شاشتك خارج هذه الصفحة، عبر قطّارة الألوان المدمجة في المتصفح؛ أما سفاري وفايرفوكس ومتصفحات الجوال فلا توفرها، ولا يظهر الزر إلا حيث يعمل. وتفتح الأداة ملفات JPG وPNG وWebP وGIF وBMP وAVIF وصور آيفون HEIC، وتعرض الملفات المتحركة إطارها الأول. وتظهر رسالة واضحة للملف الفارغ أو الملف الذي ليس صورة أو الملف التالف بدل شاشة فارغة. أما الصور التي تتجاوز 24 ميغابكسل، مثل ملفات الكاميرا بأبعاد 8000 × 6000 بكسل، فتُصغَّر للالتقاط حتى يبقى الجوال سريع الاستجابة؛ وتحتفظ مساحة اللون المسطحة بقيمتها الدقيقة، ولا تمتزج إلا التفاصيل الأصغر من بكسل في النسخة المصغرة.