كيفية الاستخدام
- انقر فوق "اختيار صورة"، أو أسقط صورة، أو الصق لقطة شاشة باستخدام Ctrl+V / Cmd+V.
- حرك المؤشر أو الإصبع فوق الصورة لمعاينة قيم HEX وRGB وHSL المباشرة والمكبر.
- انقر فوق النقطة التي تريد الاحتفاظ بها. يتم حفظ اللون في التاريخ.
- انقر فوق "استخراج لوحة" لإنشاء لوحة صديقة للتصميم، ثم انسخ قيم الألوان التي تحتاجها.
على سبيل المثال: الصق لقطة شاشة للمنتج، واختر لون الزر الرئيسي، وانسخ قيمة HEX إلى ملف CSS أو ملف تصميم.
الميزات الأساسية
- اختيار ألوان الصور المحلية: يتم عرض الصور وأخذ عينات منها باستخدام لوحة الرسم في المتصفح، ولا يتم تحميلها مطلقًا إلى الخادم.
- HEX/RGB/HSL على مستوى البكسل: حرك المؤشر أو الإصبع عبر الصورة لقراءة قيم HEX وRGB وHSL المباشرة.
- علامة التصويب للمكبر: تساعدك المعاينة المكبرة على استهداف حواف الأيقونات، وتفاصيل لقطة شاشة واجهة المستخدم، وكتل الألوان الصغيرة.
- Palette Generator: يستخرج أخذ عينات البكسل من جانب المتصفح ما يصل إلى 5 ألوان سائدة كمرجع سريع للتصميم.
- حفظ ونسخ سريع: انقر على الصورة لحفظ الألوان في السجل، ثم انقر على أي عينة لنسخ رمز اللون الخاص بها.
الأدوات ذات الصلة
قم بتحويل HEX وRGB وHSL وCMYK باستخدام مدقق التباين WCAG المدمج. الخصوصية المحلية فقط - لا يوجد تحميلات. احصل على قيم CMYK جاهزة للطباعة وانسخ النتائج الآن.
أنشئ لوريم إيبسوم على هيئة نص، أو HTML <p>، أو مصفوفات JSON. محلي فقط، لا يوجد تحميلات. يتضمن نصًا نائبًا صينيًا وعناصر تحكم متغيرة الطول. أنشئ الآن.
حساب نسب الارتفاع والأبعاد المفقودة بسرعة. يتم تشغيله محليًا — بدون تحميلات. يتضمن إعدادات TikTok/Reels 9:16 المسبقة ومقتطفات نسبة العرض إلى الارتفاع لـ CSS. احسب الآن.
منطق الحساب
تقوم هذه الأداة بفك ترميز الصورة محليًا باستخدام HTML5 Canvas وتقرأ بكسل RGBA عند إحداثيات المنتقي الحالي من خلال getImageData. يتم تنسيق قيم HEX وRGB وHSL من هذا البكسل.
يقوم إنشاء لوحة الألوان باختبار وحدات البكسل القماشية، وتجميع الألوان القريبة في مجموعات بسيطة، وترتيبها حسب التردد لإرجاع ما يصل إلى 5 ألوان سائدة. يعد هذا مفيدًا للويب السريع ولوحات التصميم، ولكنه لا يعد بإدارة ألوان مطلقة احترافية لـ ICC / P3.
التعليمات
هل تم تحميل الصور الخاصة بي؟
لا، يتم تشغيل تحميل الصور واختيار الألوان ومعاينة المكبر وإنشاء لوحة الألوان محليًا في متصفحك.
كيف يمكنني الحصول على لون HEX من الصورة؟
اختر صورة أو الصقها، ثم حرك المؤشر أو الإصبع إلى البيكسل المستهدف. يظهر اللون الحي على الفور. انقر على الصورة لحفظها في السجل، ثم انقر على العينة لنسخ قيمة HEX.
ما هي تنسيقات الألوان المدعومة؟
تعرض الأداة وتنسخ HEX وRGB وHSL، وهي التنسيقات الأكثر شيوعًا في تصميم الويب وتطوير الواجهة الأمامية.
لماذا قد يختلف اللون قليلاً عن Photoshop؟
يقرأ Canvas البكسل كما يعرضه متصفحك. يمكن أن يؤدي سلوك المتصفح ونطاق العرض وملفات تعريف ألوان الصور المضمنة إلى إنشاء اختلافات صغيرة.
هل يمكنني اختيار الألوان على الهاتف المحمول؟
نعم. على الأجهزة التي تعمل باللمس، اسحب إصبعك عبر الصورة لتحريك علامة التصويب، ثم اضغط أو حرره لقفل اللون.