← العودة إلى الأدلة

كيفية استخراج أكواد الألوان (HEX/RGB) من الصور بسهولة

اسحب الألوان الجذابة من أي صورة تعجبك وحولها لأكواد برمجية دقيقة لاستخدامها في تصميماتك.


النقاط الأساسية
• التخمين البصري للألوان يؤدي لتصاميم غير متناسقة تفتقر للاحترافية (Color Theory, 2026).
• أداة القطارة القطنية تستخرج كود HEX البرمجي الدقيق للبكسل الذي تختاره.
• هذه الأداة ضرورية لمصممي الويب ومطوري الواجهات لتوحيد هوية التطبيقات.

سرقة الألوان كالمحترفين

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

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

خطوات استخراج أكواد الألوان

انسخ إلهامك إلى لوحة تصميمك بثوانٍ.

  1. اسحب الصورة الملهمة إلى لوحة الأداة.
  2. حرك أداة القطارة (العدسة المكبرة) فوق المنطقة ذات اللون الذي يعجبك.
  3. انقر فوق البكسل المرغوب ليقوم النظام بنسخ الكود (مثال: #FF5733).
  4. الصق الكود في فوتوشوب أو في ملف CSS الخاص بموقعك لتطبيقه. لجمع عدة صور في ملف واحد للرجوع إليها، جرب أداة الصورة إلى PDF.
أنظمة ترميز الألوان للمصممين نظام HEX (المستخدم في الويب CSS) مثال: #E03131 نظام RGB (المستخدم في الشاشات) مثال: rgb(28, 126, 214) نظام CMYK (للطباعة الورقية) مثال: cmyk(88%, 0%, 100%, 0%)
المصدر: أسس أنظمة التصميم الرقمي، ٢٠٢٦

مقارنة بين أنظمة الألوان

اسم النظامشكل الكودأين يستخدم بكثرة؟
HEX (هيكس)#FF0000تصميم مواقع الويب وتطبيقات الجوال (CSS)
RGB (الألوان المضيئة)rgb(255, 0, 0)برامج تعديل الفيديو وتصميم الجرافيك للشاشات
CMYK (الحبر)cmyk(0,100,100,0)مراكز الطباعة والمطابع التجارية فقط

الأسئلة الشائعة

أخذت اللون من صورة ولكن عند طباعته ظهر باهتاً جداً؟

أكواد HEX و RGB مصممة حصرياً للشاشات المضيئة. الطابعات تستخدم حبر CMYK وهو نظام محدود الألوان لا يستطيع طباعة الألوان الفسفورية الزاهية التي تراها على شاشة هاتفك.

اللون المستخرج لا يشبه اللون الذي أراه، ما الخلل؟

الصور الرقمية تحتوي على ملايين البكسلات، وقد تكون ضغطت بالقطارة على بكسل ظل داكن بدلاً من البكسل المضيء. استخدم خاصية التقريب (Zoom) لاختيار المربع اللوني الدقيق الذي تريده.

لوحة الألوان →