كيف تفعل

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

ارفع صورة، اختر أي نقطة، وانسخ كود اللون بصيغ HEX أو RGB أو HSL لاستخدامه في المواقع والتصميم.

واجهة منتقي ألوان في المتصفح مع معاينة صورة ومؤشر اختيار ولوحة ألوان قابلة لإعادة الاستخدام

منتقي ألوان من صورة: ما فائدته؟

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

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

كيف تستخرج كود HEX من صورة؟

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

اتبع هذه الخطوات:

  1. افتح منتقي الألوان.
  2. ارفع الصورة.
  3. اضغط على النقطة التي تريد أخذ اللون منها.
  4. انسخ كود HEX لاستخدامه في المواقع أو CSS.
  5. انسخ RGB أو HSL إذا كانت أداة التصميم تحتاج هذه الصيغة.
  6. احفظ اللون في اللوحة إذا أردت مقارنته لاحقًا.

إذا كانت المنطقة المطلوبة صغيرة، قص الصورة أولًا باستخدام قص الصورة. الصورة الأقرب للمنطقة المطلوبة تجعل اختيار اللون أكثر دقة.

الفرق بين HEX و RGB و HSL

صيغة HEX هي الأكثر استخدامًا في المواقع وCSS، مثل ألوان الأزرار والخلفيات والحدود. قيمة مثل #2563EB قصيرة وسهلة النسخ في أغلب أدوات الويب.

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

صيغة HSL مفيدة عندما تريد تعديل اللون مع الحفاظ على نفس الدرجة العامة. يمكنك جعل اللون أفتح أو أغمق أو أقل تشبعًا بدون تغيير هويته الأساسية.

استخدامات منتقي الألوان من الصور

يمكن استخدام الأداة في مواقف كثيرة:

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

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

قارن أكثر من نقطة قبل الاعتماد على اللون

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

في الرسومات المسطحة والشعارات قد تكفي ضغطة واحدة، لكن التكبير يساعد إذا كانت هناك حواف ناعمة أو نص صغير.

جهز الصورة قبل اختيار اللون

كلما كانت الصورة أوضح، كان كود اللون أدق. قبل استخدام الأداة:

  • تجنب الصور ذات الفلاتر أو الظلال القوية.
  • استخدم PNG أو WebP للرسومات الحادة إن أمكن.
  • قص الأجزاء غير المهمة إذا كانت الصورة مليئة بالألوان.
  • كبّر الصورة قبل الضغط على الأيقونات أو النصوص الصغيرة.
  • جرّب اللون على خلفية فاتحة وداكنة.

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

افحص التباين قبل النشر

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

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

طريقة العمل المقترحة

  1. اختر أوضح صورة متاحة.
  2. قص المنطقة المطلوبة إذا كانت صغيرة.
  3. افتح منتقي الألوان.
  4. اضغط على النقطة المطلوبة.
  5. قارن نقاطًا قريبة إذا كانت الصورة واقعية.
  6. انسخ HEX أو RGB أو HSL حسب حاجتك.
  7. أنشئ لوحة ألوان إذا كان اللون سيُستخدم في تصميم كامل.
  8. افحص قابلية القراءة قبل النشر.

للاستخدام السريع، افتح منتقي الألوان، ارفع الصورة، واختر أي نقطة للحصول على كود HEX أو RGB أو HSL فورًا.

روابط مرتبطة

افتح الأداة أو القسم الحقيقي المرتبط بهذا المقال.

العودة إلى المدونة