مستخرج لوحة الألوان

ما مستخرج لوحة الألوان؟#

تحمل كلّ صورة مجموعة صغيرة من الألوان تؤدّي معظم العمل — أزرق العلامة التجارية لشعار، أو الحياد الدافئ لصورة منتج، أو لوحة اللونين لرسم توضيحيّ. يستخرج مستخرج لوحة الألوان تلك الألوان التمثيليةّة تلقائيًّا كي تُعيد استخدامها: ابنِ سمة واجهة مطابقة، أو اختر لون زرّ لا يتصادم، أو ولّد متغيّرات CSS، أو افهم ببساطة أيّ عيّنات تسيطر فعلًا على الصورة مقابل ما تفترض عينك أنّه مهمّ.

تُشغّل هذه الصفحة تكميم الألوان بالقطع الوسيط بالكامل داخل متصفّحك. تحمّل صورة، تُحجَّر إلى حجم عيّنة عمليّ، يُقرأ كلّ بكسل، ويُكرِّر الخوارزميون تقسيم فضاء اللون على امتداد أوسع قناة حتى يحصل على أفضل N عيّنات طلبتها (2–16). تحصل على كلّ لون كعيّنة مع حصّته من الصورة، بالإضافة إلى متوسط اللون المستقيم، قابلًا للتصدير كقائمة HEX، أو ملف متغيّرات CSS، أو JSON منظَّم.

كيف تستخدمها#

1. اسحب صورة إلى منطقة الإفلات المتقطّعة (أو انقرها لاختيار ملف). PNG وJPEG وWebP كلّها تعمل؛ تُعالَج ملفات PNG الشفافة بشكل صحيح لأنّ البكسلات الشفافة تُتخطَّى قبل العدّ.
2. اسحب شريط عدد الألوان (2–16) لاختيار عدد الألوان التمثيلية للاستخراج. ستّ قيمة افتراضيّة جيّدة للوحة متوازنة؛ اثنان أو ثلاثة يعزلان الزوج الأسيطر.
3. اقرأ قائمة العيّنات على اليمين: يُظهر كلّ صفّ اللون، وقيم HEX/RGB/HSL، ونسبة بكسلات العيّنة التي وقعت في ذلك الدلو، مُرتَّبة الأكثر سيطرة أولًا. انقر أيّ قيمة لنسخها.
4. اطّلع على بطاقة اللون المتوسط في الشريط الجانبي للحصول على المتوسط المستقيم لكلّ بكسل — مفيد عندما تريد لون خلفية كلّي واحد بدلًا من لوحة مُرتَّبة.
5. اختر صيغة اللوحة للتنزيل:
   • قائمة HEX (.txt) — سطر #RRGGBB واحد لكلّ سطر، الأكثر سيطرة أولًا. ألصقه مباشرةً في أداة تصميم.
   • متغيّرات CSS (.css) — كتلة :root { --palette-1: …; …; --palette-avg: …; } يمكنك إسقاطها في ملف أنماط.
   • JSON (.json) — عيّنات منظّمة بـ hex وrgb وcount وshare، بالإضافة إلى المتوسط والبيانات الوصفية للعيّنة.
6. انقر تنزيل اللوحة لحفظ الملف.

أبرز المزايا#

• تكميم بالقطع الوسيط، مؤلَّف ذاتيًّا. عائلة الخوارزميات نفسها التي تستخدمها أدوات الصور الاحترافيةّ، تُشغَّل في لسانك: قسّم على أوسع قناة عند الوسيط، وكرّر على الصندوق الأوسع حاليًّا حتى يُبلغ عدد الطلبات.
• أرقام حصص صادقة. تحمل كلّ عيّنة الكسر الحقيقي للبكسلات المُعاينة التي تمثّله، فيعني «سيّطر» سيادة بالمساحة، لا بالتخمين.
• المتوسط مفصول عن السيّطر. يُعرَض المتوسط المستقيم للبكسلات جنبًا إلى جنب مع اللوحة المُرتَّبة — سؤالان مختلفان يُجاب عنهما في تمريرة واحدة.
• البكسلات الشفافة متخطّاة. تُستثنى قيم ألفا تحت عتبة صغيرة، فتُعرَض لـ PNG شفاف الألوان المرسومة فعلًا، لا مزيج موحل مع الشفافية.
• ثلاثة أشكال للتصدير. قائمة HEX لأدوات التصميم، ومتغيّرات CSS لملف الأنماط، وJSON للبرامج — كلّها مُولَّدة من العيّنات نفسها التي تراها تمامًا.
• 100% محليّ. تُفكَّك الصورة وتُعاين بواسطة المتصفّح. لا يوجد رفع.

مثال عملي#

أفلت شعار علامة تجارية هو أزرق شركاتي عميق على خلفية بيضاء مع لمسة صغيرة — لنقل أنّ الأزرق يملأ نحو 60% من اللوحة. مع ضبط عدد الألوان على 4، يبدو الاستخراج النموذجيّ كالتالي:

#1D4ED8   58.4%   rgb(29, 78, 216)    hsl(224, 76%, 48%)
#FFFFFF   31.2%   rgb(255, 255, 255)  hsl(0, 0%, 100%)
#172554   7.1%    rgb(23, 37, 84)     hsl(224, 57%, 21%)
#93C5FD   3.3%    rgb(147, 197, 253)  hsl(217, 95%, 78%)

العيّنة السيّطرة هي أزرق العلامة بنحو 58%، ثمّ الأبيض ثانيًا. لاحظ الأزرقين الإضافيَين — درجة أغمق وصبغة أفتح — اللذين وجدهما الخوارزميون لأنّهما يعبران حدًّا وسيطًا؛ هذه بالضبط الألوان التي تُعيد استخدامها لحالات التمرير والظلال. صدِّر كـ متغيّرات CSS فتحصل على سمة جاهزة للإدراج:

:root {
  --palette-1: #1D4ED8;
  --palette-2: #FFFFFF;
  --palette-3: #172554;
  --palette-4: #93C5FD;
  --palette-avg: #5A7BCB;
}

--palette-avg هو المتوسط المستقيم لكلّ بكسل — أزرق متوسط مكتوم يصلح كصبغة خلفية صفحة مايلة نحو العلامة.

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

النسب المئوية لا تُجمَع إلى 100% بالضبط.#

تُقرَّب للعرض (القيم الكامنة دقيقة إلى أربع منازل عشرية في تصدير JSON). مصدر ثانوي صغير للتبقّي يأتي أيضًا من تخطّي البكسلات الشفافة قبل العدّ، فيعكس الإجمالي البكسلات المعتمَة المُعاينة فعلًا فقط.

أحصل على عيّنات أقلّ ممّا طلبت.#

يتوقّف القطع الوسيط مبكرًا عندما يصبح كلّ صندوق لون متبقّي مصمتًا (مدى صفريّ على كلّ القنوات) — فعلًا لا يوجد شيء متبقّ للاقتسام. طلب 8 ألوان على صورة ذات 3 ألوان يُعيد 3، لا 8 مُختلَقة.

لماذا متوسط اللون يختلف كثيرًا عن السيّطر؟#

لأنّهما يُجيبان عن سؤالين مختلفين. اللون السيّطر هو الدلو الأكثر تكرارًا؛ المتوسط هو المتوسّط الحسابي لكلّ بكسل، الذي يمكن لبضعة مناطق كبيرة لكن مختلفة الألوان أن تُبعده عن القيمة الأكثر تكرارًا. صورة نصفها أحمر ونصفها أخضر لها متوسط بنّي لكن بلا بنّي سيّطر — كلا الرقمين صحيح.

هل يعمل على الصور الفوتوغرافية، أم الرسوم المسطّحة فقط؟#

كلاهما. الرسوم المسطّحة تُعطي عيّنات نظيفة مفصولة جيّدًا؛ والصور الفوتوغرافية تُعطي مجموعة أكثر تدرّجًا لأنّ النغمات الحقيقية تمتدّ على ألوان قريبة كثيرة. للصورة الفوتوغرافية، ارفع عدد الألوان إلى 8–12 لالتقاط المدى الأغنى.