تحديد الرمز الدقيق للون حاجة دائمة في التصميم: استنساخ لون شعار مرجعي، أو استخراج لوحة ألوان من صورة ملهمة، أو الحفاظ على الاتساق بين قطع هوية بصرية واحدة. وتختلف الطريقة الأكفأ باختلاف السياق: أبين يديك الملف نفسه، أم اللون في صورة على الإنترنت، أم في موقع، أم في لقطة التقطتها بهاتفك.
فهم صيغ رموز الألوان
قبل الانتقال إلى الطرق، يحسن فهم الصيغ الأكثر استعمالًا في تمثيل الألوان رقميًا:
| الصيغة | مثال | أين تُستعمل |
|---|---|---|
| HEX | #3ecf8e | CSS وHTML وتصميم الويب ومعظم أدوات التصميم |
| RGB | rgb(62, 207, 142) | CSS وتحرير الصور والطباعة الرقمية |
| HSL | hsl(152, 57%, 53%) | CSS ومعالجة الألوان في التصميم وضبط درجات اللون |
| CMYK | C:70 M:0 Y:31 K:19 | الطباعة الورقية (المنشورات والبطاقات ومواد التغليف) |
يمثّل HEX وRGB المعلومة نفسها بصيغتين مختلفتين، والتحويل بينهما ممكن دائمًا. أما HSL فيصف اللون بدلالة درجته وتشبّعه وإضاءته، وهو أقرب إلى البداهة عند الضبط اليدوي. وCMYK مخصّص للطباعة وحدها.
الطريقة 1: أداة استخراج الألوان على الإنترنت (الأسرع)
لتحديد الألوان الغالبة في صورة كاملة — أو تحديد بكسل بعينه بدقة — تبقى أداة استخراج الألوان على الإنترنت أقصر الحلول. يكفي رفع الصورة، فتحدّد الأداة تلقائيًا أكثر الألوان حضورًا، برموز HEX جاهزة للنسخ.
تحلّل أداة استخراج الألوان من ImageTools أي صورة وتعيد الألوان الغالبة فيها برموز HEX الخاصة بكل منها. ويجري كل شيء داخل المتصفح مباشرة — فالصورة لا تغادر جهازك.
- افتح أداة استخراج الألوان.
- ارفع الصورة أو اسحب الملف إلى المساحة المخصصة.
- تحدّد الأداة تلقائيًا أكثر الألوان حضورًا في الصورة.
- انقر أي لون لنسخ رمز HEX الخاص به.
🎨 نصيحة إضافية: بعد استخراج الألوان الغالبة من صورة، استعمل مولّد لوحة الألوان لبناء تناغمات متتامة أو متجاورة أو أحادية اللون انطلاقًا من أي لون منها — وتوسيع لوحة مشروعك.
استخرج ألوان أي صورة الآن
ارفع صورة واحصل على رموز HEX للألوان الغالبة في ثوانٍ. مجانًا وبلا تسجيل، وتجري المعالجة داخل متصفحك.
استخرج ألوان الصورةالطريقة 2: قطّارة المتصفح (أدوات مطوّري Chrome)
إذا كان اللون الذي تريد تحديده داخل موقع — في خلفية صفحة أو زر أو شعار — ففي Chrome أداة مدمجة لذلك.
- افتح الموقع في Google Chrome.
- اضغط F12 (أو انقر بالزر الأيمن واختر «فحص»).
- في لوحة DevTools، انقر أيقونة المؤشّر في الزاوية العليا (أو اضغط Ctrl+Shift+C).
- مرّر المؤشّر فوق أي عنصر في الصفحة، فتعرض DevTools خصائص CSS، ومنها الألوان بصيغة HEX أو RGB.
- ولفتح مُنتقي الألوان المرئي، انقر المربّع الملوّن المجاور لأي قيمة لون في لوحة CSS.
وفي DevTools كذلك مُنتقي ألوان مدمج: فبالنقر على مربّع اللون في لوحة أنماط CSS يُفتح مُنتقٍ يتيح التنقّل في الطيف ورؤية القيم بصيغ HEX وRGB وHSL وHSLA في وقت واحد.
الطريقة 3: القطّارة داخل Canva
إن كنت تعمل في Canva وأردت التقاط لون من صورة موجودة في مشروعك:
- حدّد العنصر الذي تريد تغيير لون تعبئته (نصًا أو شكلًا أو خلفية).
- انقر لون العنصر في اللوحة الجانبية لفتح مُنتقي الألوان.
- داخل المُنتقي، انقر أيقونة القطّارة (eyedropper).
- انقر أي نقطة من الصورة على مساحة العمل لالتقاط اللون الدقيق لتلك البكسل.
- ويظهر رمز HEX في حقل النص داخل المُنتقي.
الطريقة 4: القطّارة في Photoshop وIllustrator
Photoshop
بعد فتح الصورة، اختر أداة القطّارة (اختصارها المفتاح I). ثم انقر أي نقطة من الصورة، فيظهر اللون الملتقط في مربّع اللون داخل لوحة الأدوات. ولرؤية رمز HEX، انقر المربّع نقرًا مزدوجًا ليُفتح مُنتقي الألوان، فتجد قيمة HEX في الحقل السفلي.
Illustrator
بعد فتح الملف، حدّد كائنًا ثم انقر لون التعبئة أو الحدّ في لوحة الأدوات. وفي مُنتقي الألوان الذي يُفتح تجد رمز HEX في الحقل السفلي. وبدلًا من ذلك، استعمل أداة القطّارة (اختصارها I) لالتقاط اللون من أي نقطة على مساحة العمل.
الطريقة 5: إضافة للمتصفح — ColorZilla
تضيف إضافة ColorZilla (المتاحة لـ Chrome وFirefox) قطّارة دائمة إلى متصفحك. وبعد تثبيتها يمكنك:
- التقاط لون أي بكسل في أي موقع بنقرة واحدة.
- رؤية الرمز بصيغ HEX وRGB وHSL في الحال.
- نسخ القيمة بنقرة واحدة.
- الرجوع إلى سجلّ بآخر الألوان الملتقطة.
وهي أعملى حل لمن يلتقط ألوان المواقع كثيرًا، من دون فتح DevTools في كل مرة.
الطريقة 6: تطبيق لالتقاط الألوان على الهاتف
لتحديد ألوان الأشياء المادية — لون جدار أو منتج أو عبوة — أو ألوان الصور على الهاتف، ثمة تطبيقات مخصصة:
- Color Grab (لأندرويد) — وجّه الكاميرا إلى أي سطح فيلتقط رمز HEX في الحال.
- Palette Cam (لنظامي iOS وأندرويد) — يستخرج لوحة الألوان كاملة من صور تلتقطها فورًا أو من معرض الصور.
- Canva (لنظامي iOS وأندرويد) — قطّارة Canva على الهاتف تعمل مع الصور المستوردة.
كيف تستعمل رموز الألوان بعد استخراجها
بعد تحديد رمز HEX للون، تأتي أشيع الاستعمالات:
في CSS وتطوير الويب
استعمله في الشيفرة مباشرة: color: #3ecf8e; أو background-color: #3ecf8e;. وللحصول على درجات أفتح أو أغمق، استعمل HSL — فضبط الإضاءة فيه أقرب إلى البداهة من العبث بقيم HEX يدويًا.
في Canva أو Figma أو Adobe
الصق رمز HEX في حقل اللون لأي عنصر. فكل أدوات التصميم الكبرى تقبل HEX مباشرة.
لبناء لوحة ألوان كاملة
بعد تحديد اللون الأساس، يولّد مولّد لوحة الألوان تلقائيًا تركيبات متناغمة — متتامة ومتجاورة وثلاثية وأحادية اللون — مع كل الرموز بصيغ HEX وRGB وHSL جاهزة للاستعمال في مشروعك.
للطباعة
حوّل HEX إلى CMYK قبل إرسال الملف إلى المطبعة. فألوان الشاشة (RGB/HEX) وألوان الطباعة (CMYK) لها نطاقات مختلفة — وما يبدو متطابقًا على الشاشة قد يظهر مختلفًا اختلافًا ملحوظًا بعد الطباعة. وأدوات مثل Adobe Illustrator وAffinity Designer تجري هذا التحويل تلقائيًا عند التصدير للطباعة.
لماذا قد لا يكون اللون المستخرَج هو ما أردته بالضبط
تفصيل مهم: قلّما يكون اللون في الصور الفوتوغرافية موحّدًا تمامًا داخل مساحة واحدة. فما يبدو أزرق خالصًا في صورة قد يخفي عشرات التدرّجات الدقيقة من بكسل إلى بكسل، سببها الإضاءة وضغط JPG وتشويش الكاميرا. والقطّارة تلتقط اللون الدقيق لبكسل بعينه — وقد يختلف قليلًا عن «الأزرق العام» الذي تحاول تحديده.
وفي المساحات الفوتوغرافية، الأفضل استعمال أداة تحسب اللون الغالب في منطقة كاملة — كما تفعل أداة أداة استخراج الألوان — بدل التقاط بكسل واحد. فالنتيجة لون أكثر تمثيلًا وأنفع في التصميم.
الأسئلة الشائعة
#3ecf8e وRGB 62, 207, 142 هما اللون نفسه. ولتصميم الويب وCSS استعمل HEX، فهو الأشيع والأقصر. أما التطبيقات التي تطلب القنوات الثلاث منفصلة — بعض منصات الطباعة وتطبيقات التحرير — فاستعمل RGB. وأي أداة تحوّل بينهما في ثوانٍ.