منتقي الألوان من الصورة: HEX وRGB وHSL ولوحة ألوان

كل بكسل في صورة رقمية يخزّن لونًا كثلاثة أرقام: الأحمر والأخضر والأزرق. يقرأ منتقي الألوان هذه الأرقام في النقطة التي تختارها ويعرضها بالصيغ التي يستخدمها المصممون والمطورون. هذا يسهّل إعادة استخدام درجة دقيقة من صورة أو شعار أو لقطة شاشة بدلًا من التخمين بالعين.

تنخدع العين بسهولة بالألوان المحيطة وسطوع الشاشة، لذا قد تختلف درجتان تبدوان متطابقتين اختلافًا كبيرًا في الرمز. الانتقاء من الملف نفسه يزيل التخمين.

ثلاث طرق لكتابة اللون

عند الاختيار بين HEX وRGB وHSL، تذكّر أنها تصف اللون نفسه. HEX رمز مضغوط من ستة أحرف يُستخدم في تصميم الويب ومعظم أدوات التصميم. يسرد RGB قيم الأحمر والأخضر والأزرق من 0 إلى 255. ويصف HSL الصبغة والتشبع والإضاءة، وهي أسهل صيغة لجعل لون أفتح أو أغمق في CSS مع الحفاظ على طابعه.

أضف صورة بسحبها إلى المربع أو التصفح أو لصق لقطة شاشة. حرّك المؤشر فوق الصورة: يظهر اللون تحته مباشرة في الأسفل. انقر لانتقائه. يظهر اللون المنتقى بعينة كبيرة ورموز HEX وRGB وHSL، لكل منها زر نسخ.

تُضاف كل عملية انتقاء إلى سجل قصير، لذا يمكنك جمع عدة ألوان من صورة واحدة ونسخها لاحقًا. انقر أي عينة في السجل لعرض رموزها مجددًا.

نسخ الرمز

للحصول على رمز HEX من صورة بسرعة، كبّر متصفحك إذا كانت المنطقة صغيرة، وانقر البكسل الدقيق واضغط "نسخ HEX". يبدأ الرمز بعلامة # ويعمل مباشرة في CSS وFigma وCanva ومعظم الأدوات الأخرى.

بمجرد إضافة صورة، تحلّل الأداة نسخة صغيرة وتجد ألوانها السائدة باستخدام طريقة تجميع. تظهر حتى ثمانية ألوان، مرتبة حسب مقدار تغطيتها للصورة. انقر أيًا منها لرؤية الرموز الكاملة، أو انسخ المجموعة كلها كقائمة قيم HEX أو كخصائص CSS مخصصة جاهزة للصق في ملف أنماط.

مولّد لوحة الألوان من صورة طريقة سريعة لبناء نظام ألوان يبدو متناسقًا أصلًا، لأن الألوان تأتي من مشهد حقيقي: غروب أو غابة أو غرفة مصممة جيدًا.

العمل من الشعارات

لإيجاد ألوان العلامة التجارية من شعار، استخدم الملف الأصلي بدلًا من لقطة شاشة أو نسخة مضغوطة، فقد تغيّر الألوان قليلًا. انتقِ المناطق المسطحة من الشعار لا الحواف، حيث تمتزج الألوان بالخلفية.

تدعم Chrome وEdge ومتصفحات Chromium الأخرى على الحواسيب قطارة الشاشة. اضغط "انتقِ لونًا من أي مكان على الشاشة"، فيصبح المؤشر عدسة مكبرة يمكنك تحريكها فوق أي نافذة، بما في ذلك التطبيقات الأخرى. انقر للانتقاء أو اضغط Escape للإلغاء. إنه منتقي ألوان مفيد للشاشة عندما يكون اللون الذي تحتاجه في فيديو أو تطبيق تصميم أو موقع.

لا يقدّم Firefox وSafari هذه الميزة بعد، لذا يُخفى الزر هناك ويمكنك الانتقاء من صورة مرفوعة بدلًا من ذلك. على الهواتف، استخدم لقطة شاشة: التقطها، ثم الصقها أو اخترها هنا.

الصور مقابل الرسومات المسطحة

تحتوي الصور على تشويش وتدرجات، لذا قد تختلف البكسلات المتجاورة قليلًا. للحصول على لون ممثّل من صورة، غالبًا ما تكون لوحة الألوان أفضل من بكسل واحد لأنها تحسب متوسط البكسلات المتشابهة. للشعارات والرسومات المسطحة، النقرة الواحدة دقيقة.

ملفات تعريف الألوان والشاشات

تأتي الرموز من بيانات الصورة كما يفك متصفحك ترميزها. قد تبدو الصور ذات النطاق اللوني الواسع جدًا مختلفة قليلًا على شاشات مختلفة، لكن الرموز هي ما تحتاجه لإعادة إنتاج اللون في أدوات الويب والتصميم.

الصور المضغوطة

تخلق ملفات JPEG شديدة الضغط عيوبًا متكتلة حول الحواف. انتقِ من منتصف منطقة مسطحة، أو استخدم نسخة أعلى جودة من الصورة عند توفرها.

تبقى صورتك في ذاكرة متصفحك؛ لا يُرفع أو يُسجّل أو يُخزّن أي شيء. ملفات JPG وPNG وWebP وGIF وBMP مدعومة، وتُتجاهل المناطق الشفافة عند بناء لوحة الألوان.

الأداة مجانية وبلا حدود، ولا تضيف علامة مائية ولا تستهلك أرصدة EnhancerPro. إذا أردت تحويل لوحة ألوان منتقاة إلى شعار أو أيقونة، فمولّد الأيقونات المفضلة ومحوّل الصور إلى SVG لدينا خطوتان تاليتان جيدتان.

استخدام الألوان في CSS

الصق رموز HEX مباشرة في خصائص الألوان، أو انسخ لوحة الألوان كمتغيرات CSS واستدعها بـ var(--color-1). تسهّل قيم HSL إنشاء درجات أفتح برفع نسبة الإضاءة.

ابدأ من لون واحد قوي

تبدأ معظم الأنظمة الجيدة بلون رئيسي واحد، غالبًا مأخوذ من شعار أو صورة أساسية. انتقِه هنا، ثم قرر لونًا محايدًا فاتحًا وآخر داكنًا للخلفيات والنصوص. استخدام HSL يسهّل ذلك: احتفظ بالصبغة والتشبع، ثم ارفع الإضاءة لدرجة خلفية أو اخفضها للون تمييز عميق.

ألوان داعمة من لوحة الألوان

عادةً ما تحتوي لوحة الألوان المستخرجة على لون أو لونين زاهيين وعدة ألوان هادئة. تنجح الألوان الهادئة في الخلفيات والحدود والأزرار الثانوية، بينما تناسب الزاهية أزرار الدعوة إلى الإجراء والإبرازات. لأنها تأتي من الصورة نفسها، تميل إلى التناغم بشكل طبيعي.

افحص التباين

يجب أن يكون النص مقروءًا للجميع. النص الداكن على درجة فاتحة، أو النص الأبيض على لون عميق، ينجح عادةً. افحص التركيبات المهمة بأداة فحص التباين قبل النشر، خاصة للأزرار والنصوص الصغيرة. اللون الذي يبدو جريئًا في صورة قد يكون فاتحًا جدًا لنص على صفحة بيضاء.

احتفظ بسجل

احفظ الرموز النهائية في دليل أسلوب أو كمتغيرات CSS. نسخ لوحة الألوان كخصائص CSS مخصصة يعطيك نقطة بداية جاهزة يمكنك إعادة تسميتها، مثل primary وaccent وsurface، لتستخدم كل صفحة في موقعك الدرجات نفسها تمامًا.

ألوان للطباعة

تستخدم ألوان الشاشة RGB، بينما تستخدم الطابعات أحبار CMYK. الرموز هنا مثالية للشاشات؛ وللمواد المطبوعة، اطلب من المطبعة تحويلها أو مطابقتها مع عينة مطبوعة، لأن بعض ألوان الشاشة الساطعة لا يمكن طباعتها بدقة.

مشاركة الألوان مع فريق

كثيرًا ما يصف المصممون والمطورون والعملاء الألوان بطرق مختلفة: رمز hex في ملف تصميم، وقيمة RGB في عرض تقديمي، وقيمة HSL في ملف أنماط. نسخ الثلاثة من عملية الانتقاء نفسها يتجنّب الفروق الصغيرة التي تتسلل عند تحويل القيم يدويًا. الصق الرموز في ملاحظات مشروعك بجانب الصورة المصدر، ليرى أي شخص من أين جاء كل لون ويعيد انتقاءه لاحقًا إذا احتاجت لوحة الألوان إلى تعديل.

لوحات ألوان موسمية ومزاجية

الصور مصدر رائع للمزاج. أوراق الخريف الدافئة تعطي البرتقالي والأحمر العميق، ومشهد الشاطئ يعطي ألوانًا رملية محايدة وفيروزية، والمدينة ليلًا تعطي أزرق عميقًا مع لمسات نيون. جرّب استخراج لوحات ألوان من عدة صور تطابق الشعور الذي تريده، ثم احتفظ بالألوان التي تتكرر. عادةً ما تصبح تلك المجموعة المتكررة نظامًا قويًا ومتماسكًا.