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

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

تم بناؤه وصيانته بواسطة Shehzad Munir ·

مستخرج لوحة الألوان
Loading Color Architect
Share

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

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

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

سمات

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

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

  1. 1

    تحميل صورة

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

  2. 2

    صقل اللوحة

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

  3. 3

    فحص وضبط

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

  4. 4

    يصدّر

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

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

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

دليل مفصل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قم بتحميل صورة وستقوم الأداة بسحب ألوانها السائدة، وإظهار كل منها كعينة تحتوي على قيم HEX وRGB وHSL التي يمكنك نسخها لتصميماتك.

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

تسرد اللوحة المستخرجة كود HEX (وRGB/HSL) لكل لون مهيمن، حتى تتمكن من نسخ القيم الدقيقة إلى CSS أو أداة التصميم الخاصة بك.

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

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

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

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

من المجلة

All articles →