المدونة
العربية

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

أداة في المتصفح تلتقط رموز الألوان من صورة وتستخرج لوحة الألوان السائدة

تعمل في متصفحك · لا يُرفع أي شيء

أفلت هنا الصورة التي تريد التقاط الألوان منها

صورة واحدة بصيغة مثل JPG أو PNG أو WebP. يمكنك أيضًا لصق صورة منسوخة بالضغط على Ctrl+V (أو ⌘V على Mac). لا تغادر الصورة متصفحك.

ما هذه الأداة؟

تخبرك هذه الأداة بلون أي بكسل في صورة فوتوغرافية أو تصميم، برمز HEX (#2563EB) وبصيغتي RGB وHSL. انقر على الصورة أو المسها لالتقاط بكسل، ويكبّر المكبّر ما حوله لتصيب الموضع الدقيق. كما تنشئ تلقائيًا لوحة بأبرز 5 إلى 8 ألوان في الصورة.

طريقة الاستخدام

  1. أفلت صورة أو اضغط اختيار صورة. يمكنك أيضًا لصق صورة منسوخة بالضغط على Ctrl+V (أو ⌘V على Mac).
  2. عند تحريك المؤشر فوق الصورة يعرض المكبّر على الجانب البكسلات القريبة مكبّرة. انقر أو المس الموضع الذي تريده.
  3. اقرأ قيم HEX وRGB وHSL تحت اللون الملتقط واضغط نسخ.
  4. بعد النقر على الصورة تحرّك مفاتيح الأسهم المؤشر بكسلًا بكسلًا، وShift مع السهم عشرة بكسلات، لتحكّم أدق.
  5. في لوحة الألوان السائدة اختر بين 5 و8 ألوان، وانقر على أي لون لتحميله في القيم أعلاه.

كيف تعمل؟

  • HEX: كل قناة برقمين ست عشريين بأحرف كبيرة. القيم R37 G99 B235 تعطي #2563EB.
  • HSL: درجة اللون من 0 إلى 360 درجة، والتشبّع والإضاءة من 0 إلى 100%، مقرّبة إلى أعداد صحيحة. اللون أعلاه هو hsl(221, 83%, 53%).
  • لوحة الألوان: تُجمَّع البكسلات التي لا تقل عتامتها عن 50% بطريقة k-means (بدء k-means++، بذرة ثابتة، 20 تكرارًا كحد أقصى) وتُقرَّب المراكز. تأتي المجموعات الأكبر أولًا مع نسبتها المئوية من الصورة.
  • التصغير: تُصغَّر الصورة إلى نحو 10,000 بكسل قبل التجميع، فتبقى معالجة الصور الكبيرة سريعة. وتُؤخذ عينات البكسلات دون مزج، فلا يتسلل إلى اللوحة لون وسيط غير موجود في الصورة.
  • قيم الألوان: هي قيم البكسل كما رسمها المتصفح بنظام sRGB؛ والصورة ذات ملف تعريف ألوان آخر تُقرأ بعد أن يحوّلها المتصفح إلى sRGB.

أمثلة على الاستخدام

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

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

هل تُرفع صورتي؟

لا. يجري رسم الصورة وقراءة قيم بكسلاتها داخل متصفحك، ولا يُرسل الملف ولا الألوان التي تلتقطها إلى أي مكان.

يبدو اللون الملتقط مختلفًا قليلًا عما أراه.

تقرأ الأداة قيم البكسل التي رسمها المتصفح للشاشة بنظام sRGB. فإذا كانت الصورة تحمل ملف تعريف ألوان مثل Display P3 أو Adobe RGB، يحوّلها المتصفح أولًا إلى sRGB، لذا قد تختلف القيم عن قيم المستند في محرر مثل Photoshop. كما تؤثر إعدادات الشاشة وسطوعها في مظهر اللون. وفي الصور تشويش دقيق يجعل البكسلات المتجاورة مختلفة قليلًا، فللحصول على لون دقيق انقر داخل منطقة ذات لون موحّد.

هل يمكنني الالتقاط بلوحة المفاتيح؟

نعم. انقر على الصورة مرة أو انتقل إليها بمفتاح Tab، ثم استخدم مفاتيح الأسهم لتحريك المؤشر بكسلًا واحدًا، أو عشرة مع Shift، فيُلتقط اللون الذي تحته فورًا. ويعيد Enter أو مفتاح المسافة التقاط اللون عند موضع المؤشر الحالي. يعرض المكبّر البكسلات المحيطة بمساحة 11 × 11.

كيف تُختار لوحة الألوان؟

تُصغَّر الصورة إلى نحو 10,000 بكسل، ثم تُجمَّع الألوان المتقاربة بطريقة k-means في 5 إلى 8 ألوان. وتأتي نقاط البداية من بذرة عشوائية ثابتة، لذا تعطي الصورة نفسها اللوحة نفسها دائمًا. ولا تدخل البكسلات الشفافة في الحساب.

هل تعمل الأداة مع الصور الكبيرة جدًا؟

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

ماذا عن البكسلات الشفافة جزئيًا؟

تعرض HEX وRGB وHSL اللون فقط دون قيمة ألفا. وعند التقاط بكسل شبه شفاف تظهر ملاحظة بأن قيمة الشفافية غير مضمّنة.

لم تجد الأداة التي تبحث عنها؟