الصور
مستخرِج لوحة الألوان
استخرج ألوان صورة أو شعار، مع نسبة ما يغطّيه كلّ لون منها. وكلّ لون معروض موجود فعلًا في الصورة، لا متوسّطًا لألوان فيها. يعمل داخل متصفّحك — ولا تُرفع الصورة.
طريقة الاستخدام
- أفلت صورة على الصفحة أو اخترها. تُقرأ داخل متصفّحك ولا تُرفع.
- حرّك المنزلق لتطلب ألوانًا أكثر أو أقلّ — فالصورة تُقرأ مرّةً واحدة، والاستجابة فورية.
- اقرأ الشريط: عرض كلّ نطاق بقدر شيوع لونه في الصورة.
- انقر أيّ لون لنسخ كوده، أو خذ اللوحة كلّها بصيغة CSS أو Tailwind أو JSON.
كيف تعمل
يُحوّل كلّ بكسل إلى فضاء Oklab، وهو فضاء لوني مبنيّ على أن تبدو المسافات المتساوية متساوية في الاختلاف. وهذا أهمّ ممّا يبدو: ففي RGB يساوي الفرق العددي بين زرقاوين داكنين الفرقَ بين أخضرين لا يلتبسان، فينطوي الظلّ في لون واحد بينما ينقسم الضوء إلى ثلاثة متقاربة.
ثمّ تُقسّم الألوان بقطع أوسع مجموعة على أوسع محور لها مرّةً بعد مرّة، ثمّ يُعاد إلحاق كلّ بكسل بأقرب مركز إليه. ولا شيء في هذا يبدأ من تخمين عشوائي، فالصورة نفسها تُعطي اللوحة نفسها في كلّ مرّة.
وكلّ لون معروض هو أقرب بكسل حقيقي إلى مركز مجموعته، لا المركز نفسه. فمركز المجموعة كثيرًا ما يكون لونًا لا أثر له في الصورة.
ثمّ خطوتا تنقية. تُدمج المجموعات المتقاربة أكثر ممّا تفرّقه العين. ثمّ تُطوى المجموعات الصغيرة الواقعة على الخطّ بين مجموعتين أكبر — وذلك أثر الحافة المنعّمة، وهو سبب أنّ شعارًا من لونين يعود هنا بلونين. أمّا المجموعة الصغيرة البعيدة عن ذلك الخطّ فتُبقى، لأنّها لون إبراز لا مزيج.
وتُتجاهَل البكسلات الشفّافة ولا تُعدّ. فمعظم المرمّزات تخزّن الأسود تحت الأجزاء الشفّافة من ملفّ PNG، فعدّها يجرّ كلّ مجموعة نحو السواد ويُعيد لوحة ليلية لشعار مشرق.
أسئلة شائعة
هل تُرفع صورتي؟
لا. تُفكّ وتُقاس بمتصفّحك ولا تغادر جهازك أبدًا. ولهذا يعمل هذا والشبكة مقطوعة بعد تحميل الصفحة.
لم تختلف الألوان عنّ أدوات أخرى؟
لسببين، وكلاهما مقصود. تُجمّع الألوان في فضاء Oklab لا في RGB، فيتبع التجميع ما تراه العين لا ما تقوله الأرقام — ففي RGB يساوي الفرق بين زرقاوين داكنين الفرقَ بين أخضرين لا يلتبسان، ولهذا تعود أدوات كثيرة بعدّة درجات داكنة متقاربة. وكلّ لون معروض بكسل حقيقي من الصورة لا متوسّط مجموعته؛ فمتوسّط زهرة حمراء مع أوراق خضراء بُنٌّ ليس في واحدة منهما.
طلبت ثمانية ألوان فجاءت خمسة.
إذًا في الصورة خمسة. والعدد سقف لا وعد، لأنّ البديل اختلاق فروق لا وجود لها — وهو ما يجعل شعارًا من لونين يُروى ستّ درجات من الأزرق نفسه. فتنعيم الحوافّ يضع شريطًا من البكسلات الوسيطة على كلّ حدّ، وتلك تُردّ إلى اللونين اللذين بينهما.
ما معنى النسب المئوية؟
نصيب كلّ لون من الصورة، محسوبًا على البكسلات غير الشفّافة وحدها. وهو الجزء الذي تضيّعه قائمة أكواد مجرّدة، وهو غالبًا ما يخبرك أيّ لون خلفية وأيّها لون إبراز.
ما النسبة بجانب كلّ لون؟
نسبة التباين بمعيار WCAG لنصّ أسود أو أبيض على ذلك اللون، أيّهما أوضح. ويُذكَر الرقم بدل حكم بالنجاح أو الرسوب لأنّ الحدّ يختلف باختلاف النصّ: 4.5:1 للمتن، وـ3:1 للكبير أو العريض. والأداة التي تقول «ناجح» قد افترضت أيّهما قصدت.
أتُعطي الصورة نفسها اللوحة نفسها دائمًا؟
نعم. لا شيء هنا يبدأ من تخمين عشوائي، خلافًا لكثير من المستخرِجات التي تستعمل k-means، وهي تحتاج منطلقًا فتجيب إجابة أخرى في المرّة الثانية. والقيم التي تُنسخ إلى ملفّ أنماط لا ينبغي أن تتغيّر بين زيارة وأخرى.
وماذا عن صورة التُقطت تحت مصباح دافئ؟
ستحصل على الألوان كما هي في الصورة، وهي تحت مصباح دافئ دافئة. ولا يُصحّح هنا توازن الأبيض، ولا ينبغي أن يُصحّح: فالجواب الصادق عن «ما ألوان هذه الصورة» هو الألوان التي فيها. فصحّح الصورة أوّلًا إن أردت ألوان المشهد لا ألوان الصورة.