اعرف كود أي لون في صورتك
هل أعجبك لون في صورة وتريد استخدامه في تصميمك أو موقعك؟ أو تحتاج إلى معرفة ألوان شعار شركة لتصميم عرض تقديمي متناسق معه؟ تتيح لك هذه الأداة أمرين: التقاط لون أي نقطة في الصورة بدقة البكسل الواحد، واستخراج لوحة الألوان الرئيسية تلقائيًا مع نسبة حضور كل لون في الصورة.
كيف تستخدمها؟
- اختر صورة أو اسحبها إلى المربع أو الصقها من الحافظة.
- ستظهر لوحة من ثمانية ألوان رئيسية مرتبة حسب نسبة وجودها في الصورة.
- اضغط على أي نقطة في الصورة، أو اسحب المؤشر فوقها، لمعرفة لونها بدقة.
- انسخ الكود بالصيغة التي تحتاجها، أو انسخ اللوحة كاملة كمتغيرات CSS.
ما الفرق بين HEX وRGB وHSL؟
- HEX: الصيغة الأشهر في تصميم الويب، مثل
#4F46E5، وتتكون من ثلاثة أزواج للأحمر والأخضر والأزرق بالنظام الست عشري. - RGB: القيم نفسها بالنظام العشري من 0 إلى 255، مثل
rgb(79, 70, 229)، وتستخدم في برامج التصميم والبرمجة. - HSL: تصف اللون بدرجته وتشبعه وإضاءته، وهي الأسهل عندما تريد إنشاء درجات أفتح أو أغمق من اللون نفسه.
كيف نستخرج لوحة الألوان؟
نصغّر الصورة داخل متصفحك ثم نطبق خوارزمية التجميع العنقودي K-Means التي تجمع البكسلات المتشابهة في ثماني مجموعات، ويمثل متوسط كل مجموعة لونًا رئيسيًا. لهذا تعكس اللوحة الألوان السائدة فعلًا في الصورة، لا الألوان النادرة.
أفكار للاستخدام
- بناء هوية بصرية متناسقة لموقعك انطلاقًا من شعارك.
- اختيار ألوان عرض تقديمي أو منشورات تواصل تتماشى مع صورة الغلاف.
- مطابقة ألوان الطلاء أو الديكور من صورة غرفة أعجبتك.
- إنشاء تدرج لوني جميل باستخدام لونين من اللوحة في أداة مولد التدرجات اللونية.
الأسئلة الشائعة
هل يمكنني التقاط لون من لقطة شاشة؟
نعم، التقط الشاشة ثم الصقها مباشرة في الصفحة بـ Ctrl+V، واضغط على اللون الذي تريده.
لماذا يختلف لون اللوحة قليلًا عن لون نقطة معينة؟
لون اللوحة هو متوسط مجموعة من البكسلات المتقاربة، أما الالتقاط بالنقر فيعطيك لون بكسل واحد بالضبط.
كيف أستخدم المتغيرات المنسوخة في CSS؟
الصقها في ملف CSS، ثم استخدم اللون بكتابة var(--color-1) في أي خاصية مثل color أو background.
هل تُرفع الصورة؟
لا، تُحلل الصورة بالكامل داخل متصفحك.
هل تعمل على الهاتف؟
نعم، اضغط على الصورة بإصبعك لالتقاط اللون.
آخر تحديث: