ترى لوناً تريد إعادة استخدامه — في صورة، أو لقطة شاشة لموقع تحبه، أو شعار قديم ضاعت ملفات مصدره منذ زمن — وتحتاج رمز hex الفعلي، لا تخميناً. تقديره بالعين لا ينجح تماماً أبداً؛ الشاشات تكذب و"ذلك الأزرق" هو في الحقيقة ستة أزرق مختلفة قليلاً. سحب اللوحة مباشرة من البكسلات يعطيك رموزاً تلصقها في CSS، أو أداة تصميم، أو مستند علامة.

إليك كيفية القيام به، وكيف تحصل على لوحة قابلة للاستخدام فعلاً بدل التقاط عشوائي للبكسلات.

ماذا يفعل "استخراج لوحة" فعلاً

كيفية استخراج لوحة ألوان من أي صورة — visual 1
ماذا يفعل "استخراج لوحة" فعلاً

الأداة تمسح الصورة وتجد الألوان التي تمثّلها أفضل — الدرجات المهيمنة مع اللمسات البارزة — ثم تعطيك كلاً كرمز hex تستطيع نسخه. بدل مليون لون بكسل فردي، تحصل على مجموعة مرتّبة (مثلاً 5 أو 8) تلخّص الصورة.

هذا مفيد فعلاً لبضع مهام شائعة:

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

ضع صورة واقرأ الرموز:

استخدم عنصر تحكّم العدد للحصول على لوحة مفيدة

كيفية استخراج لوحة ألوان من أي صورة — visual 2
استخدم عنصر تحكّم العدد للحصول على لوحة مفيدة

أهم إعداد واحد هو كم لوناً تسحب. يغيّر الجواب كلياً.

  • ألوان أقل (3–5) تعطيك اللوحة الأساسية — الحفنة من الدرجات التي تعرّف الصورة. هذا ما تريده عادة للعلامة أو نظام تصميم، حيث تكون المجموعة المحكمة ميزة لا قيداً.
  • ألوان أكثر (8–12) تلتقط اللمسات والتدرجات الدقيقة. مفيد حين تكون صورة غنية ومتنوّعة وتريد الدرجات الثانوية أيضاً، أو حين تدرس بالضبط كيف تتكوّن صورة.

إن بدت النتيجة الأولى غير سليمة — تهيمن درجة، أو دُمِجت لمسة أردتها — عدّل العدد وأعد القراءة. صورة 80% منها سماء ستسلّمك كثيراً من الأزرق بأعداد منخفضة؛ ارفع العدد لإظهار البقع الأصغر من اللون.

انقر لتنسخ — سير العمل المهم

قراءة رمز hex وكتابته حيث تتسلّل الأخطاء (#3A7BD5 مقابل #3A7BD6 وتقضي عشر دقائق تتساءل لماذا يبدو خطأً). في أداة لوحة الألوان، كل عيّنة تنسخ رمز hex الخاص بها بالنقر، فتنتقل مباشرة من الصورة إلى الحافظة إلى ورقة أنماطك دون لمس لوحة المفاتيح.

سير عملي:

  1. حمّل الصورة.
  2. اضبط العدد ليطابق المهمة — منخفض للوحة علامة، أعلى لالتقاط اللمسات.
  3. انقر كل عيّنة تريدها؛ الصقها حيث تذهب.
  4. المدى غير كافٍ؟ حرّك العدد وخذ الإضافيات.

قراءة النتائج بعين مصمّم

بضعة أمور تستحق المعرفة كي تحطّ اللوحة جيداً:

  • اللون المهيمن ليس دائماً المفيد. صورة منتج على خلفية بيضاء ستبلّغ عن كثير من الأبيض أو شبه الأبيض. ذلك دقيق، لكن اللون الذي يهمّك فعلاً هو المنتج — ارفع العدد لسحبه، أو اقصص إلى الموضوع أولاً.
  • الصور فيها ألوان أكثر مما تبدو. البشرة والظلال والانعكاسات تضيف درجات لم تلاحظها بوعي. عدد أعلى يكشفها؛ وعدد أقل يخفيها خلف المتوسطات.
  • hex محمول. كل رمز تنسخه يعمل مباشرة في CSS أو Figma أو Photoshop أو Canva أو مستند علامة. لا تحويل يلزم.

لماذا يبقى في متصفحك

الاستخراج كله يعمل محلياً — تُقرأ الصورة وتُحلَّل في متصفحك بـ Canvas، ولا تُرفع أبداً إلى خادم. ذلك يهم حين تكون "الصورة" نموذجاً غير مُطلَق، أو أصل علامة عميل خاصاً، أو لقطة داخلية لا ينبغي نشرها على أداة ويب عشوائية. مجاني، ولا يحتاج تسجيلاً، وبعد زيارتك الأولى يعمل دون اتصال.

خذ الألوان، انقر لتنسخ، الصقها حيث تنتمي.