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

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

رفع صورة

JPG, PNG, WebP, GIF, SVG — التقط لون أي بكسل

اسحب الصورة إلى هنا أو استخدم زر الرفع.

لوحة الألوان المستخرجة

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

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

بفضل الاعتماد على فحص بكسلات لوحة الرسم (HTML5 Canvas) محلياً، تتم معالجة ملفاتك بالكامل داخل ذاكرة جهازك. لا يوجد أي رفع للسيرفرات الخارجية، مما يضمن أن تصاميمك الخاصة وعروض العملاء تظل سرية بنسبة 100% أثناء فحصك واختيارك للألوان.

فهم تنسيقات الألوان: HEX وRGB وHSL

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

  • كود HEX (الست عشري): الكود العالمي المكون من 6 خانات مسبوقاً برمز الشباك (مثل #2451FF)، والذي يُستخدم على نطاق واسع في ملفات التنسيق CSS وتصميم صفحات الويب وتطوير الواجهات.
  • قيمة RGB (الأحمر، الأخضر، الأزرق): تعبر عن الألوان على مقياس من 0 إلى 255 (مثل 36, 81, 255)، وهي مثالية للشاشات الرقمية وبرامج تحرير الرسوم وتطبيقات واجهات المستخدم UI.
  • قيمة HSL (درجة اللون، التشبع، الإضاءة): تُمثل اللون عبر إحداثيات أسطوانية (مثل 227°, 100%, 57%)، مما يجعلها بديهية للغاية للمصممين عند تعديل درجات الألوان وتدرجاتها وظلالها.

كيفية استخدام أداة اختيار الألوان من الصور

  1. ارفع صورتك إلى مساحة العمل: اضغط على زر رفع صورة أو اسحب وأفلت أي ملف بصيغة JPG أو PNG أو WebP أو GIF أو SVG داخل نافذة المتصفح.
  2. انقر أو المس لاختيار البكسلات: حرّك مؤشر الفأرة فوق معاينة الصورة الحية؛ سيظهر مؤشر التقاطع (Crosshair)، وعند النقر أو اللمس على أي نقطة، تضع الأداة علامة دائرية محاطة بالإطار الأبيض فوق البكسل المستهدف بدقة تامة.
  3. انسخ قيم الألوان المطلوبة: شاهد اللون المختار في المربع البصري الكبير، ثم انقر على زر نسخ بجانب كود HEX أو RGB أو HSL لإرساله مباشرة إلى الحافظة في جهازك.
  4. تصفح سجل الألوان الأخيرة: كل درجة لون فريدة تلتقطها تُحفظ تلقائياً في لوحة الألوان الأخيرة بالشريط الجانبي، ويمكنك النقر على أي لون سابق في أي وقت لإعادة تحديده.
  5. راجع خصائص الملف: افتح قائمة معلومات الملف للاطلاع على اسم الصورة الأصلي، وأبعادها بالبكسل، وحجم الملف، وصيغته التقنية.
  6. دمج لوحة ألوانك مع أدوات التصميم الأخرى

    بمجرد استخراج أكواد الألوان الخاصة بك، يمكنك توظيفها عبر مشاريع الويب والتصميم الخاصة بك باستخدام أدواتنا المجانية الأخرى:

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

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

    هل يتم رفع صور المراجعة الخاصة بي إلى خادم خارجي؟

    لا. تتم عملية استخراج الألوان وفحص البكسلات بالكامل وبصفة محلية داخل متصفحك باستخدام واجهة البرمجة HTML5 Canvas 2D getImageData. صورك الخاصة لا تغادر جهاز الكمبيوتر أو الهاتف الذكي أبداً.

    هل يمكنني اختيار ألوان من صور PNG أو WebP الشفافة؟

    نعم. إذا قمت بالنقر فوق منطقة شفافة في ملف PNG أو WebP، سيظهر خلفها الشطرنج الرمادي للوحة الرسم، وستقوم الأداة بالتقاط قناة الشفافية أو لون الخلفية بدقة.

    كم عدد الألوان الأخيرة التي يمكن للشريط الجانبي تذكرها؟

    تحفظ لوحة الألوان الأخيرة تلقائياً آخر 8 ألوان فريدة قمت باختيارها في صف منظم ومريح، والنقر على أي منها يعيد تحميل قيم HEX وRGB وHSL فوراً.

    لماذا لا يعمل زر النسخ على بعض متصفحات الهواتف القديمة؟

    تستخدم الأداة واجهة الحافظة الحديثة (Clipboard API) مدعومة بآلية احتياطية قوية (عبر عناصر نصية مؤقتة وdocument.execCommand) لضمان نجاح نسخ أكواد الألوان بسلاسة عبر جميع أجهزة المكتب والهواتف المحمولة تقريباً.