أداة سريعة واحترافية تتيح لك التقاط الألوان من الصور ومعرفة أكوادها البرمجية بدقة عالية.
قبل أن تلوم الأداة، تحقق من هذه العوامل الثلاثة التي تسبب اختلاف الألوان غالبًا:
1. تنسيق الصورة: صيغة JPG تستخدم ضغطًا مفقودًا (lossy compression) يجمع البكسلات المتشابهة في كتل. هذا يعني أن اللون الذي تراه في موقع (120, 85) قد يكون نتيجة متوسط 64 بكسل مجاور، لا اللون الأصلي الذي حددته. الحل: اعمل مع صور PNG عند الاستخراج من ملفات التصميم المصدر.
2. ملف تعريف الألوان (Color Profile): بعض الصور تحمل ملف تعريف ICC خاص (مثل Adobe RGB أو ProPhoto RGB). إذا كان المتصفح يعرض الصورة بملف sRGB دون تحويل صحيح، ستلاحظ اختلافًا ملحوظًا. الأداة تقرأ القيم كما هي في البكسل، لكن ما يظهر على الشاشة قد يختلف.
3. إعدادات سطوع وتباين الشاشة: شاشة مضبوطة بسطوع عالٍ أو بتباين مبالغ فيه تُظهر ألوانًا مختلفة عن القيم الفعلية في الملف. هذا خارج نطاق أي أداة برمجية، لكنه يؤثر بشكل مباشر على حكمك البصري عند اختيار اللون.
عند انتقاء لون من صورة، تحصل غالبًا على ثلاث قيم. لكن متى تستخدم كلًا منها؟
HEX (#FF5733): هي الصيغة الأكثر شيوعًا في تطوير الويب. ستة أحرف سداسية عشرية تمثل قيم الأحمر والأخضر والأزرق. استخدمها مباشرة في CSS و HTML. مثالي عندما تريد نسخ ولصق سريع دون تعديل.
RGB (255, 87, 51): مفهومة أكثر للمطورين الذين يتعاملون مع قيم عددية. преимنتها الأساسية إمكانية إضافة قناة ألفا للشفافية: rgba(255, 87, 51, 0.5). استخدمها عند بناء واجهات تتطلب طبقات متراكبة.
HSL (14, 100%, 60%): أفضل صيغة للتعديل الإبداعي. الدرجة (Hue) تحدد نوع اللون، التشبع (Saturation) يحدد حيويته، والسطوع (Lightness) يحدد فاتوته. إذا أردت إنشاء تدرج لوني من لون واحد، HSL هو الخيار الأمثل — فقط غيّر قيمة السطوع للحصول على نسخ أفتح وأغمق.
انتقاء لون واحد من صورة هو مجرد الخطوة الأولى. المصممون المحترفون لا يتوقفون عند لون واحد — بل يبنون لوحة ألوان متكاملة من الصورة المرجعية.
سير العمل الفعلي يبدو هكذا:
الخطوة الأولى: انتقِ اللون الرئيسي (اللون الأكثر هيمنة أو الذي يجذب الانتباه أولاً). هذا سيكون لون العلامة التجارية أو لون الزر الرئيسي.
الخطوة الثانية: استخدم أداة استخراج لوحة الألوان من الصورة للحصول على جميع الألوان البارزة دفعة واحدة. هذه الأداة تحلل الصورة وتخرج لك 5-10 ألوان مع قيمها الدقيقة، بدلًا من الانتقاء اليدوي النقطة بنقطة.
الخطوة الثالثة: صنّف الألوان: لون أساسي (primary)، لون ثانوي (secondary)، لون خلفية، لون نص، ولون تمييز (accent). كل لون له دور وظيفي في التصميم.
الخطوة الرابعة: تحقق من التباين. اللون المستخرج قد يبدو جميلًا على الصورة، لكن هل يوفر تباينًا كافيًا مع خلفية بيضاء؟ استخدم أداة WCAG Contrast Checker للتحقق. الحد الأدنى المطلوب هو نسبة 4.5:1 للنص العادي.
هذا السير ينقلك من مجرد "التقط لونًا" إلى "בנוي نظام ألوان متكامل".
الانتقاء من صورة مصغرة (Thumbnail): عندما تفتح صورة في بريدك الإلكتروني أو على وسائل التواصل، غالبًا ترى نسخة مصغرة مضغوطة بشدة. الالتقاط من هذه النسخة يعطيك ألوانًا مشوهة. الحل: افتح الصورة بالحجم الأصلي أو اطلب الملف المصدر.
الانتقاء من لقطة شاشة (Screenshot): لقطات الشاشة تحفظ الألوان بملف تعريف شاشتك، وقد تضيف انحرافًا لونيًا خصوصًا على شاشات Retina أو شاشات بملفات تعريف غير sRGB. إذا كنت تنسخ لونًا من موقع إلكتروني، أفضل طريقة هي فتح أدوات المطور (F12) وقراءة قيمة اللون من كود CSS مباشرة.
عدم الانتباه للمناطق المتدرجة: الصور تحتوي مناطق متدرجة (gradient) حيث يتغير اللون بكسلًا بكسل. النقر في منطقة متدرجة قد يعطيك لونًا وسيطًا لا يمثل أيًا من اللونين المقصودين. كبّر الصورة وانتقِ من منطقة مسطحة اللون قدر الإمكان.
الخلط بين لون الخلفية والكائن: في الصور ذات الخلفية المعقدة، قد يلتقط المؤشر لون البكسلات في الخلفية بدلًا من الكائن الرئيسي. دقة النقر مهمة هنا — وتكبير الصورة يقلل هامش الخطأ بشكل كبير.
اللون المستخرج من صورة يمكن أن يكون نقطة انطلاق لتأثيرات بصرية متقدمة. إليك سيناريوهات عملية:
إنشاء ظلال متناسقة: بعد انتقاء اللون الرئيسي لمنتج في صورة، استخدمه لتوليد ظل CSS متناسق. يمكنك استخدام أداة تحويل الصورة إلى CSS Box Shadow لإنشاء تأثيرات عمق مبنية على الألوان الفعلية للصورة، بدلًا من استخدام ظلال رمادية عشوائية.
بناء تدرجات لونية: انتقِ لونين من نفس الصورة (مثل لون السماء ولون الأرض) واستخدمهما كأساس لتدرج CSS. هذا يضمن تناسقًا بصريًا طبيعيًا لأن الألوان جاءت من نفس البيئة البصرية.
تطبيق الألوان على واجهة المستخدم: المصممون الذين يعملون على إعادة تصميم موقع بناءً على صور العميل يبدأون غالبًا بانتقاء الألوان من الصور الرسمية للعلامة التجارية. هذا يضمن أن التصميم الرقمي يتناسب مع الهوية البصرية الموجودة فعليًا.
استخراج سمة لونية لقالب ووردبريس: إذا كنت تطور قالبًا مخصصًا، ابدأ بصور العميل الرسمية، انتقِ 3-4 ألوان رئيسية، ثم حدد قيم CSS المتغيرة (Custom Properties) بناءً عليها. هذا يوفر ساعات من التخمين ويجعل النتيجة أقرب لرؤية العميل.
ليست جميع الصور سهلة الانتقاء. إليك كيف تتعامل مع الحالات الأكثر تحديًا:
الصور ذات الخلفية الشفافة (PNG): البكسلات الشفافة تحتوي على قيمة ألفا (alpha) تقل عن 255. عند الالتقاط، قد تحصل على لون غامض أو مختلف تمامًا عن المتوقع لأن الأداة تقرأ قيمة البكسل الخام. الحل: ضع خلفية بيضاء أو رمادية خلف الصورة مؤقتًا قبل الانتقاء، أو تجاهل قيمة الألفا إذا كنت تستخدم اللون في سياق غير شفاف.
الصور ذات التباين المنخفض: صور الـ low-key (الداكنة) أو الـ high-key (الفاتحة جدًا) تحتوي على نطاق ضيق من الألوان. الانتقاء من هذه الصور يعطي ألوانًا تبدو متشابهة جدًا. الحل: عدّل التباين مؤقتًا في أداة تعديل بسيطة قبل الانتقاء، ثم أعد الصورة لحالتها الأصلية. هذا يساعدك على رؤية الفروق اللونية الفعلية.
الصور المضغوطة بشدة: صور JPG بجودة أقل من 60% تحتوي على artifacts مرئية — خاصة عند الحواف بين مناطق لونية مختلفة. الالتقاط من هذه المناطق يعطي قيمًا مشوهة. الحل الأول: اطلب نسخة أعلى جودة. الحل الثاني: انتقِ من مناطق بعيدة عن الحواف.