مولد نظام الألوان (متكامل / ثلاثي / متشابه)
مرشد
مولد نظام الألوان
أنشئ لوحات ألوان متناغمة باستخدام نظرية الألوان. اختر لونًا أساسيًا ونوع تناغم — متكامل، ثلاثي، متجاور، متكامل جزئي، رباعي، أو أحادي اللون — لإنشاء لوحة متوازنة فورًا. تعرض العينات المرئية قيم hex و RGB و HSL. يتحقق فحص تباين WCAG من إمكانية الوصول. قم بالتصدير كخصائص CSS مخصصة، JSON، إعدادات Tailwind، أو متغيرات SCSS.
كيفية استخدام
أدخل لونًا أساسيًا باستخدام منتقي الألوان، إدخال hex، أو شرائط RGB، أو قيم HSL — تتم مزامنة جميع المدخلات تلقائيًا. حدد نوع تناغم لإنشاء لوحة من 3-6 ألوان بناءً على رياضيات نظرية الألوان. يعرض كل لون كعينة مرئية مع قيم hex و RGB و HSL وزر نسخ. تحقق من نسب تباين WCAG مقابل النص الأبيض والأسود. قم بتصدير اللوحة بأكملها بالتنسيق المفضل لديك.
خصائص
- 6 أنواع من التناغم — متكامل (180 درجة)، ثلاثي (120 درجة)، متجاور (30 درجة)، متكامل جزئي (150 درجة/210 درجة)، رباعي/مربع (90 درجة)، وأحادي اللون (تغيرات التشبع/الإضاءة).
- مدخلات ألوان متعددة — منتقي الألوان الأصلي، hex (RGB GGBB)، شرائط RGB، وشرائط HSL تتم مزامنتها جميعًا في الوقت الفعلي. قم بتغيير أي إدخال وسيتم تحديث جميع المدخلات الأخرى على الفور.
- عرض اللوحة المرئي — عينات ألوان كبيرة مع قيم hex و RGB و HSL لكل لون. نسخ بنقرة واحدة على أي قيمة.
- فحص تباين WCAG — كل لون في اللوحة يعرض نسبة التباين مقابل النص الأبيض والأسود مع شارات اجتياز/فشل AA/AAA. يضمن أن خيارات الألوان الخاصة بك تلبي معايير إمكانية الوصول.
- 4 تنسيقات تصدير — خصائص CSS المخصصة (متغيرات :root)، كائن JSON، ألوان إعدادات Tailwind، ومتغيرات SCSS. انسخ كتلة التصدير بأكملها بنقرة واحدة.
- تحديثات في الوقت الفعلي — يتم إعادة إنشاء اللوحة فورًا عند أي تغيير في الإدخال. لا حاجة لزر إنشاء.
- حسابات قائمة على HSL — تستخدم جميع أنواع التناغم دوران تدرج اللون الصحيح رياضيًا، مما ينتج عنه نتائج دقيقة لنظرية الألوان.
أنواع تناغم الألوان
متكامل: لونان متقابلان على عجلة الألوان (تفصل بينهما 180 درجة). تباين عالي، نابض بالحياة. الأفضل لـ: عناصر الحث على اتخاذ إجراء، التصميمات الجريئة.
ثلاثي: ثلاثة ألوان متباعدة بالتساوي (تفصل بينها 120 درجة). متوازن، ملون. الأفضل لـ: الرسوم التوضيحية، التصميمات المرحة.
متجاور: ألوان متجاورة على العجلة (تفصل بينها 30 درجة). متناغم، هادئ. الأفضل لـ: سمات الطبيعة، التدرجات، التصميمات المتماسكة.
متكامل جزئي: اللون الأساسي + لونان مجاوران للون المتكامل الخاص به (150 درجة/210 درجة). تباين قوي مع توتر أقل. الأفضل لـ: المبتدئين، اللوحات المتنوعة.
رباعي/مربع: أربعة ألوان بفواصل 90 درجة. غني، متنوع. الأفضل لـ: التصميمات المعقدة ذات العناصر الكثيرة.
أحادي اللون: لون واحد مع تشبع وإضاءة متغيرين. أنيق، موحد. الأفضل لـ: التصميمات البسيطة، سمات العلامات التجارية الفردية.
ما هو تناغم الألوان في التصميم؟
ما هي نسبة تباين WCAG ولماذا هي مهمة؟
ما الفرق بين نموذجي الألوان RGB و HSL؟
أي نوع تناغم يجب أن أستخدم لتصميمي؟
تثبيت ملحقاتنا
أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع
恵 وصلت لوحة النتائج!
لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!
