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

قم باستخراج لوحة الألوان السائدة من أي صورة. احصل على الرموز السداسية، وتحقق من نسب تباين إمكانية الوصول إلى WCAG، وقم بتصدير متغيرات Tailwind CSS على الفور.

قم بتحميل أي صورة لسحب ألوانها السائدة، أو انقر في أي مكان على الصورة لأخذ عينة من البكسل الدقيق. احصل على HEX وRGB وHSL لكل عينة، واضبط عدد الألوان المراد استخراجها، وقم بإنشاء تناغمات مماثلة / ثلاثية / تكميلية، وتحقق من تباين WCAG (مع إصلاح تلقائي بنقرة واحدة)، وقم بتصدير اللوحة كمتغيرات CSS، أو SCSS، أو تكوين Tailwind، أو JSON، أو ورقة عينات SVG.

Share
فئة
أدوات الصورة
يشمل
مميزات 6
وصول
حر · لا الاشتراك
خصوصية
يعمل في المتصفح الخاص بك
مستخرج لوحة الألوان

Calibrating Color Architect......

Please wait a moment

كيفية الاستخدام

كيفية استخدام مستخرج لوحة الألوان

  1. 01

    تحميل صورة

    قم بسحب وإفلات أو تحديد أي صورة أو شعار أو لقطة شاشة. يتم استخراج اللوحة على الفور، بالكامل في متصفحك.

  2. 02

    صقل اللوحة

    قم بتمرير عنصر التحكم في العد لاستخراج 3 إلى 12 لونًا، أو قم بتشغيل "اختيار من الصورة" وانقر فوق أي مكان لأخذ عينة من البكسل الدقيق.

  3. 03

    فحص وضبط

    حدد عينة لرؤية HEX/RGB/HSL، وضبط الإضاءة بدقة، والتحقق من تباين WCAG باللونين الأبيض والأسود - اضغط على العصا لإصلاح اللون الفاشل تلقائيًا.

  4. 04

    يصدّر

    اختر CSS أو SCSS أو Tailwind أو JSON أو SVG وانسخ الكود، أو قم بتنزيل ورقة عينات SVG لمستندات التصميم الخاصة بك.

حالات الاستخدام

حالات الاستخدام الشائع

  • أنشئ لوحة ألوان للعلامة التجارية من شعار أو صورة للوحة المزاج
  • احصل على الشكل السداسي الدقيق للون في لقطة شاشة أو صورة
  • قم بإنشاء نظام ألوان واجهة مستخدم متوافق مع WCAG ويمكن الوصول إليه
  • قم بتصدير متغيرات Tailwind أو CSS مباشرة إلى المشروع
  • قم بإنشاء تدرجات متناغمة وألوان مميزة من الصورة
ملخص

سحب لوحة الألوان من أي صورة

قم بتحميل صورة وسيحدد المستخرج الألوان السائدة، ويعيد قيم HEX وRGB الجاهزة للاستخدام. إنها أسرع طريقة لإنشاء لوحة ألوان من صورة، أو مطابقة لون العلامة التجارية، أو العثور على الظل الدقيق في لقطة الشاشة بدون تطبيق تصميم.

للمصممين والمطورين وعمل العلامات التجارية

قم بتحويل الإلهام إلى قيم قابلة للاستخدام - قم بتجربة غروب الشمس للحصول على تدرج، أو قم بتحسين لون تمييز المنافس، أو قم بإنشاء سمة متماسكة من صورة رئيسية. تتم المعالجة في متصفحك، لذلك لا يتم تحميل صورك إلى الخادم أبدًا.

سمات
01
استخراج اللون السائد مع عدد 3-12 قابل للتعديل
02
انقر لاختيار وحدات البكسل الدقيقة + القطارة الأصلية
03
قيم HEX وRGB وHSL مع نسخة بنقرة واحدة
04
التناغمات التناظرية والثلاثية والتكميلية
05
مدقق التباين WCAG 2.1 AA/AAA مع الإصلاح التلقائي
06
تصدير عينات CSS أو SCSS أو Tailwind أو JSON أو SVG
التعليمات

الأسئلة المتداولة

كيف يمكنني الحصول على رموز الألوان السداسية من الصورة؟+

قم بتحميل صورتك وتقوم الأداة تلقائيًا بتحليلها لاستخراج الألوان السائدة باستخدام مجموعة K-Means. يتم عرض كل لون بقيمه HEX وRGB وHSL - انقر فوق أي لون لنسخه.

هل يمكنني استخراج ألوان العلامة التجارية من الشعار؟+

نعم. قم بتحميل أي صورة شعار وستحدد الأداة الألوان الأساسية والثانوية للعلامة التجارية، مما يمنحك رموزًا سداسية دقيقة لاستخدامها في CSS أو Tailwind أو أدوات التصميم مثل Figma.

ما هو فحص التباين WCAG؟+

تحدد WCAG (إرشادات الوصول إلى محتوى الويب) نسب التباين بين ألوان النص والخلفية. مطلوب نسبة لا تقل عن 4.5:1 حتى يكون النص العادي (معيار AA) قابلاً للقراءة من قبل المستخدمين ذوي الإعاقة البصرية.

كم عدد الألوان التي يحددها المستخرج؟+

أنت تتحكم فيه - يتيح لك شريط التمرير استخراج ما يتراوح بين 3 إلى 12 لونًا سائدًا، مرتبة حسب مقدار المساحة المرئية والحيوية التي تحملها في الصورة. يمكنك أيضًا النقر مباشرةً على الصورة لأخذ عينات من لون البكسل الدقيق.

هل يمكنني تصدير اللوحة لاستخدامها في CSS أو Tailwind؟+

نعم. تقوم الأداة بإنشاء متغيرات خصائص CSS مخصصة جاهزة للاستخدام (--color-primary: #hex) ومقتطفات تكوين Tailwind التي يمكنك لصقها مباشرةً في مشروعك.

هل يمكنني الحصول على رموز سداسية عشرية دقيقة من الشعار؟+

نعم - يقوم المستخرج بإرجاع الألوان السائدة كقيم سداسية يمكنك نسخها مباشرة إلى أدوات التصميم الخاصة بك.