منتقي ألوان الصور

ارفع الصورة أو الصقها هنا وانقر على البكسل الذي تريده — تقرأ الأداة قيمته عبر HTML canvas وتعرض قيم HEX وRGB وHSL فوراً مع نسخ كود HEX تلقائياً إلى حافظتك. تُظهر عدسة التكبير البكسلات الفردية حول مؤشرك حتى تنقر على البكسل الصحيح بالضبط. لا يُرفع شيء إلى خادم في أي وقت؛ كل شيء يعمل في متصفحك عبر واجهة HTML5 Canvas API. هذا يجعله فورياً وخاصاً وقابلاً للاستخدام دون اتصال بعد تحميل الصفحة. للمناطق الصعبة مثل النصوص المضادة للتشريد أو حواف الشعارات، قرّب الصورة أولاً باستخدام تكبير المتصفح المدمج قبل النقر.

استخدم هذه القطارة المجانية المبنية على المتصفح: أسقط الصورة، انقر على بكسل، وانسخ الكود. لا تثبيت، لا تسجيل. على عكس Adobe Photoshop أو Illustrator — اللذين تبدأ أسعارهما من نحو 75 درهماً إماراتياً شهرياً — هذه الأداة مجانية تماماً. وعلى عكس Digital Color Meter على macOS أو Windows PowerToys Color Picker، تستخرج أيضاً لوحة الألوان المهيمنة في الصورة تلقائياً، فتحصل على جميع الألوان الرئيسية دفعة واحدة بدلاً من النقر على كل لون منفرداً. imagecolorpicker.com هو البديل المخصص الأكثر شعبية لكنه يرفع ملفك إلى خادم؛ هذه الأداة لا تفعل ذلك.

كلاهما يُرمّز نفس اللون بطريقتين مختلفتين. يكتب HEX قيم الأحمر والأخضر والأزرق كثلاثة أزواج ست عشرية (#FF5733) وهو المعيار في CSS وتصميم الويب؛ بينما يستخدم RGB ثلاثة أرقام عشرية من 0 إلى 255 — rgb(255, 87, 51) — وهو شائع في محررات الصور والكود. التحويل بينهما لا يُفقد أي بيانات، وتعرض هذه الأداة كليهما لكل بكسل تنقر عليه. استخدم HEX عند كتابة CSS أو فئات Tailwind؛ استخدم RGB عند العمل مع canvas أو WebGL أو كود معالجة الصور الذي يتوقع قنوات رقمية. كلا الصيغتين تصفان نفس نقطة اللون sRGB.

يصف HSL اللون عبر ثلاثة مكونات: Hue (درجة اللون من 0 إلى 360°) وSaturation (التشبع) وLightness (السطوع) — وهو أكثر حدسية لتعديل الألوان. يمكنك تفتيح لون أو تخفيف تشبعه دون تغيير درجة لونه أصلاً. تدعم CSS نظام hsl() مباشرة، لذا يعمل المصممون في HSL عادةً عند بناء لوحة ألوان: زِد السطوع لدرجة فاتحة، وخفّضه لدرجة داكنة. تعرض الأداة HEX وRGB وHSL لكل بكسل حتى تنسخ ما يناسب سير عملك. لـ Figma وSketch وAdobe XD، يعد HEX عادةً الصيغة الأسرع للصق؛ لخصائص Tailwind أو CSS المخصصة، كلاهما يعمل بشكل جيد.

فقط حمّل الصورة — تظهر لوحة الألوان المهيمنة تلقائياً. تجمّع الأداة بكسلات الصورة في مجموعات وتصنفها حسب التكرار، لتُعيد ثمانية ألوان مهيمنة كألوان عيّنة مصحوبة بأكواد HEX. انقر على أي لون لنسخه، أو انسخ لوحة الألوان بأكملها دفعة واحدة. كل من Adobe Color ومولّد لوحة ألوان Canva يفعلان الشيء ذاته لكنهما يتطلبان حساباً؛ Coolors.co يمكنه توليد لوحات من الصور لكنه يرسل الصورة إلى خادمه. هنا يعمل استخراج لوحة الألوان بالكامل في متصفحك — لا رفع، لا حساب، ولا إعلانات تقاطع سير عملك.

تُرسم الصورة على عنصر HTML canvas في متصفحك؛ عند النقر تقرأ الأداة قيم الأحمر والأخضر والأزرق لذلك البكسل عبر واجهة getImageData وتحولها إلى HEX وRGB وHSL. لأن canvas يعمل محلياً، لا يُشرك أي خادم على الإطلاق. تستخدم عدسة التكبير عنصر canvas ثانياً لتكبير منطقة البكسلات حول المؤشر، مما يتيح لك استهداف البكسل الصحيح بدقة حتى في الصور ذات التفاصيل الدقيقة كالنصوص المضادة للتشريد وحواف الشعارات والتدرجات الفوتوغرافية.

على هذه الأداة، نعم — الصورة تُحمَّل فقط في ذاكرة متصفحك ولا تُرسل إلى أي مكان. يمكنك التحقق من ذلك عبر تبويب Network في أدوات المطوّر في متصفحك: لا تُرسل أي طلبات بعد تحميل الصفحة. هذا مهم للتصاميم غير المنشورة وشعارات العملاء والصور الخاصة. كثير من أدوات الانتقاء القائمة على الرفع — بما في ذلك imagecolorpicker.com وبعض ميزات Canva — ترسل ملفك إلى خادم وتخزنه مؤقتاً. تعالج هذه الأداة كل شيء محلياً، فتبقى ملفاتك على جهازك وتختفي عند إغلاق التبويب.

نعم — يستخدم زر 'الانتقاء من الشاشة' واجهة EyeDropper API (مدعومة في Chrome وEdge) لأخذ عينة من أي بكسل في أي مكان على شاشتك، بما في ذلك النوافذ الأخرى والتطبيقات وتبويبات المتصفح. يصل اللون المنتقى إلى نفس لوحة HEX/RGB/HSL وسجل الألوان الخاص بانتقاءات الصور. بالنسبة للمتصفحات التي لا تدعم هذه الواجهة (Safari، Firefox)، تغطي عملية اللصق الفجوة: التقط الشاشة بـ PrtScn أو Cmd+Shift+4، ثم الصق مباشرةً في هذه الصفحة بـ Ctrl+V — دون الحاجة لحفظ الملف أولاً. يشمل هذا لقطات الفيديو وملفات PDF المفتوحة في المتصفح وأي صفحة ويب مباشرة.

احفظ الشعار أو التقط صورة منه وأسقطه هنا، ثم انقر على لون العلامة التجارية وانسخ HEX. أو تخطَّ لقطة الشاشة تماماً: استخدم زر قطارة الشاشة لأخذ عينة من الموقع المباشر أثناء فتحه في تبويب آخر. هذا أسرع من استخدام أدوات المطوّر في المتصفح لفحص الأنماط المحسوبة، خاصةً عندما يكون اللون مضمّناً في ملف SVG أو أصل صورة بدلاً من خاصية CSS. يحتفظ سجل الانتقاء بآخر 16 لوناً، فتستطيع جمع لوحة ألوان متكاملة للعلامة التجارية من مصادر متعددة قبل الانتقال إلى أداة التصميم.

معظم لوحات الألوان القابلة للاستخدام تحتوي على 3 إلى 6 ألوان: لون مهيمن وثانوي أو اثنان وألوان مكملة. يُعيد المستخرج ثمانية ألوان مهيمنة لتختار منها المجموعة الفرعية الأنسب — انسخ الألوان منفردةً أو خذ المجموعة كاملة للوحة المزاج. في الواقع العملي، أربعة ألوان نقطة بداية متينة: لون أساسي وثانوي ومحايد ومكمل. تستخدم أنظمة التصميم في شركات مثل Stripe وLinear لوحات ألوان مدمجة مع تنويعات كثيرة في السطوع والتشبع لنفس درجات الألوان، بدلاً من ألوان متميزة كثيرة.

HEX لعمل CSS والويب (الأكثر شيوعاً في قواعد الكود وأدوات التصميم)، وRGB/RGBA للشاشات وكود canvas، وHSL لبناء لوحة الألوان والتعديل المنهجي، وCMYK لمخرجات الطباعة. كل من Figma وSketch وAdobe XD تدعم HEX وRGB وHSL. تعرض هذه الأداة HEX وRGB وHSL لكل بكسل تنقر عليه حتى تنسخ ما يناسب سير عملك دون أي تحويل يدوي. إذا كنت تحتاج CMYK لأعمال الطباعة أيضاً، الصق HEX في محوّل مجاني أونلاين — واجهة Canvas API لا تُخرج CMYK مباشرةً.

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

نعم — التقط الإطار أو الصفحة والصقها في الأداة بـ Ctrl+V (دون الحاجة لحفظ ملف)، أو استخدم قطارة الشاشة للأخذ عينة مباشرةً أثناء تشغيل PDF أو الفيديو. لملفات PDF المفتوحة في المتصفح، تعد قطارة الشاشة عادةً الأسرع: افتح PDF في Chrome، انقر 'الانتقاء من الشاشة'، ثم انقر اللون الذي تريده. للفيديو، أوقف التشغيل على الإطار أولاً للحصول على أدق عيّنة.

قد تُطبّق المتصفحات تحويل ملف تعريف الألوان (ICC) عند عرض الصور، وترث لقطات الشاشة ملف تعريف الألوان الخاص بشاشتك. تُبلّغ الأداة عن قيم البكسل sRGB الفعلية كما يعرضها متصفحك — القيم التي ستستخدمها في CSS — وهي صحيحة لعمل الويب. إذا رأيت تعارضاً مع Photoshop أو Figma، تحقق من معايرة شاشتك على sRGB ومن أن ملف الصورة يحتوي على ملف تعريف ألوان مضمّن يتطابق معه. لأصول الشعارات، يُفضّل أن يزودك المصمم بقيم HEX للعلامة التجارية مباشرةً بدلاً من الاعتماد على الاستخراج.

imagecolorpicker.com هو البديل الأكثر استخداماً — يوفر انتقاء البكسل المفرد واستخراج لوحة الألوان، لكنه يرفع صورتك إلى خادمه ويعرض إعلانات. Adobe Color يستخرج لوحات الألوان من الصور لكنه يتطلب حساباً على Adobe ويرسل الصور إلى خوادم Adobe؛ كما لا يوفر انتقاء البكسل المفرد بعدسة التكبير. قطارة Canva مدمجة في محرر Canva وتعمل فقط على الصور داخل مشروع Canva. Digital Color Meter على macOS وWindows PowerToys Color Picker يعملان لأخذ عينات من الشاشة لكنهما لا يستخرجان لوحات من الملفات. هذه الأداة هي الخيار الوحيد المجاني والكامل من جهة العميل الذي يجمع عدسة التكبير وقطارة الشاشة وسجل 16 لوناً واستخراج لوحة الألوان — بدون حساب، بدون إعلانات، بدون رفع.