مولد لوحة الألوان من الصورة
Pull the dominant colours out of any photo as HEX, RGB and HSL. كل شيء يعمل محليًا — لا يُرفع أي شيء.
- الإدخال
- PNG · JPEG · WebP · GIF · SVG
- الإخراج
- HEX · RGB · HSL · CSS · JSON
أسقط صورة
صورة فوتوغرافية أو لقطة شاشة أو شعار: PNG أو JPEG أو WebP أو GIF أو SVG. يمكنك أيضًا لصق صورة.
احصل على لوحة ألوان من أي صورة
أسقط صورة فوتوغرافية أو لقطة شاشة أو شعارًا، فيستخرج مولد لوحة الألوان هذا ألوانها السائدة مرتبةً بحسب المساحة التي يغطيها كل لون من الصورة. اختر من 3 إلى 12 لونًا، وانسخ أيًّا منها بصيغة HEX أو RGB أو HSL، وانقر في أي مكان على الصورة لالتقاط بكسل بعينه، وصدّر اللوحة كمتغيرات CSS أو SCSS أو إعدادات Tailwind أو JSON أو شريط PNG. تُحلَّل الصورة على جهازك ولا تُرفع أبدًا.
كيف تستخرج الألوان من صورة
- أسقط صورة على الصفحة، أو اخترها من ملفاتك، أو الصقها مباشرة من الحافظة. تعمل صيغ PNG وJPEG وWebP وGIF وSVG كلها.
- اضبط الألوان على عدد العينات الذي تريده. يعرض الشريط فوق القائمة كل لون بحسب حصته من الصورة.
- انقر على قيمة لنسخها بصيغة HEX أو RGB أو HSL.
- تحتاج إلى نقطة محددة، مثل لون زر في لقطة شاشة؟ انقر تلك النقطة على الصورة لالتقاط لونها، ثم أضفه إلى اللوحة بزر الإضافة.
- اختر صيغة التصدير وانسخ الكود، أو نزّل اللوحة كشريط PNG.
كيف تُحدَّد الألوان السائدة
قد تحتوي الصورة الفوتوغرافية بسهولة على مئة ألف لون مختلف، معظمها تنويعات طفيفة على بعضها. ولإيجاد الألوان القليلة المهمة، تُصغَّر الصورة ويُجمع كل بكسل مع البكسلات الأشبه به، بطريقة تُسمى التجميع بخوارزمية k-means. تصبح كل مجموعة عينة لون واحدة: متوسط بكسلاتها، مرتبةً بحسب عدد البكسلات التي تضمها.
تفصيلان يجعلان النتيجة أفضل من منتقٍ ساذج. أولًا، تُقارن الألوان في فضاء OKLab، وهو فضاء ألوان مصمم بحيث تبدو المسافات المتساوية فروقًا متساوية للعين. أما التجميع في RGB العادي فيميل إلى تقسيم الأخضر إلى درجات متطابقة تقريبًا بينما يدمج درجات زرقاء مختلفة معًا. ثانيًا، تُختار نقاط البداية بطريقة حتمية تفضّل الألوان الشائعة والبعيدة عن الألوان المختارة سابقًا، فتعطي الصورة نفسها دائمًا اللوحة نفسها، ولا تبتلع الخلفية لونًا مميزًا صغيرًا لكنه زاهٍ، مثل شعار أحمر على جدار رمادي.
تُتجاهل البكسلات الشفافة، فيعطيك الشعار على صورة PNG شفافة ألوان الشعار، لا عينة سوداء.
HEX وRGB وHSL: أيها تنسخ
تحتاج إلى OKLCH أو CMYK أو HSV، أو درجة أفتح من أحد الألوان؟ الصق قيمة HEX في محول الألوان، الذي يعرض كل الصيغ مع الدرجات الفاتحة والداكنة وتناسقات الألوان.
- HEX
- #2a9d8f. ست خانات ست عشرية للأحمر والأخضر والأزرق. الشكل الأكثر إيجازًا، وتقبله كل أدوات التصميم وCSS.
- RGB
- rgb(42, 157, 143). القنوات الثلاث نفسها كأرقام من 0 إلى 255. مفيدة في الكود الذي يجري عمليات حسابية على الألوان، أو في الأدوات التي تطلب قيمًا منفصلة.
- HSL
- hsl(173 58% 39%). درجة اللون والتشبع والإضاءة. أسهل صيغة للتعديل يدويًا: ارفع الإضاءة لحالة التمرير، وخفّض التشبع لنسخة هادئة.
صيغ التصدير
- متغيرات CSS: كتلة
:rootتضم--palette-1و--palette-2وهكذا، جاهزة لأي ملف أنماط. - SCSS: متغيرات بأسلوب
$palette-1لمشاريع Sass. - إعدادات Tailwind v3: كائن
theme.extend.colorsلملفtailwind.config.js، يعطيك فئات مثلbg-palette-1. - Tailwind v4 @theme: خصائص مخصصة
--color-palette-1لإعدادات Tailwind 4 المبنية على CSS. - JSON: مصفوفة بقيم HEX وRGB وHSL لكل لون، للسكربتات ورموز التصميم (design tokens).
- شريط PNG: العينات جنبًا إلى جنب كصورة، للوحة إلهام أو موجز تصميم أو رسالة دردشة.
نصائح للحصول على لوحة مفيدة
- ألوان أقل لعمل الهوية البصرية، وأكثر للرسوم التوضيحية. خمسة أو ستة ألوان تلتقط عادةً جو الصورة؛ ارفع العدد إلى 10 أو 12 عندما تحتاج إلى الدرجات المساندة أيضًا.
- قصّ الصورة أولًا. السماء الواسعة أو الحافة البيضاء للصفحة تطغى على النتيجة. قصّ الجزء الذي يهمك من الصورة لتحصل على لوحة تعبّر عنه.
- تحقق من ألوان النص قبل استخدامها. نادرًا ما تأتي الألوان المستخرجة من صورة بتباين كافٍ للنص. مرّر أي زوج تنوي وضع نص عليه عبر مدقق التباين.
- استخدم القطارة للقيم الدقيقة. الألوان السائدة متوسطات. وعندما تحتاج إلى اللون الدقيق لبكسل واحد، مثل شعار أو عنصر واجهة في لقطة شاشة، انقر عليه.
الأسئلة الشائعة
- كيف أستخرج لوحة ألوان من صورة؟
- أسقط الصورة على هذه الصفحة. تظهر الألوان السائدة فورًا مرتبةً بحسب المساحة التي تغطيها من الصورة، ويمكنك تغيير عددها، ونسخ كل منها بصيغة HEX أو RGB أو HSL، وتصدير المجموعة إلى CSS أو Tailwind أو JSON.
- كيف أعرف كود HEX للون في صورة؟
- حمّل الصورة وانقر على النقطة التي تريدها بالضبط. تعرض القطارة قيم HEX وRGB وHSL لذلك البكسل، والنقر على أي قيمة ينسخها.
- كيف تُحسب الألوان السائدة؟
- تُصغَّر الصورة وتُجمَّع بكسلاتها بخوارزمية k-means في فضاء الألوان OKLab، الذي يقيس الفرق بين الألوان كما يدركه البشر. يصبح متوسط لون كل مجموعة عينةً، مرتبةً بحسب حصة البكسلات التي تضمها.
- لماذا أحصل على ألوان مختلفة قليلًا عن أداة أخرى؟
- كل أداة استخراج تجمع البكسلات المتشابهة بطريقة مختلفة، والعينات متوسطات لتلك المجموعات لا بكسلات مفردة. نقاط البداية في هذه الأداة حتمية، فتعطي الصورة نفسها النتيجة نفسها هنا دائمًا. استخدم القطارة عندما تحتاج إلى قيمة بكسل دقيقة.
- هل يمكنني تصدير اللوحة إلى Tailwind CSS؟
- نعم. اختر إعدادات Tailwind v3 للحصول على كائن colors تلصقه في tailwind.config.js، أو Tailwind v4 @theme للإعدادات المبنية على CSS، ثم انسخ الكود أو نزّله.
- هل تعمل مع صور PNG الشفافة والشعارات؟
- نعم. تُتخطى البكسلات الشفافة في معظمها، فتعبّر اللوحة عن الرسم الظاهر لا عن الخلفية الفارغة.
- هل تُرفع صورتي؟
- لا. تُفك الصورة وتُحلَّل في متصفحك ولا تغادر جهازك أبدًا.