مولد نظام الألوان (متكامل / ثلاثي / متشابه)

مطور
إعلان · حذف؟

اللون الأساسي


نوع التناغم


تنسيق التصدير

إعلان · حذف؟

مرشد

مولد نظام الألوان

أنشئ لوحات ألوان متناغمة باستخدام نظرية الألوان. اختر لونًا أساسيًا ونوع تناغم — متكامل، ثلاثي، متجاور، متكامل جزئي، رباعي، أو أحادي اللون — لإنشاء لوحة متوازنة فورًا. تعرض العينات المرئية قيم 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 ولماذا هي مهمة؟

تقيس نسبة تباين WCAG (إرشادات إمكانية الوصول إلى محتوى الويب) اختلاف الإضاءة بين لونين — عادةً النص وخلفيته. نسبة 1:1 تعني عدم وجود تباين (نفس اللون)، بينما 21:1 هو أقصى تباين (أسود على أبيض). تتطلب WCAG AA ما لا يقل عن 4.5:1 للنص العادي و 3:1 للنص الكبير. تتطلب WCAG AAA 7:1 للنص العادي و 4.5:1 للنص الكبير. يضمن استيفاء هذه النسب أن يتمكن الأشخاص الذين يعانون من ضعف بصري، عمى الألوان، أو أولئك الذين يشاهدون في ظروف إضاءة ضعيفة من قراءة المحتوى الخاص بك. تشير العديد من قوانين إمكانية الوصول إلى معايير WCAG.

ما الفرق بين نموذجي الألوان RGB و HSL؟

يحدد RGB (الأحمر والأخضر والأزرق) الألوان عن طريق خلط شدة الضوء — تتراوح كل قناة من 0 إلى 255. هكذا تعرض الشاشات الألوان ولكنها ليست بديهية للبشر. HSL (تدرج اللون، التشبع، الإضاءة) أكثر بديهية: تدرج اللون هو زاوية اللون على العجلة (0-360 درجة)، والتشبع هو شدة اللون (0-100%)، والإضاءة هي مدى سطوعه أو قتامه (0-100%). يعتبر HSL أفضل لحسابات تناغم الألوان لأن تدوير زاوية تدرج اللون يخلق مباشرة ألوانًا متناغمة، بينما يتطلب تحقيق نفس الشيء في RGB رياضيات معقدة.

أي نوع تناغم يجب أن أستخدم لتصميمي؟

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

هل تريد حذف الإعلانات؟ تخلص من الإعلانات اليوم

تثبيت ملحقاتنا

أضف أدوات IO إلى متصفحك المفضل للوصول الفوري والبحث بشكل أسرع

أضف لـ إضافة كروم أضف لـ امتداد الحافة أضف لـ إضافة فايرفوكس أضف لـ ملحق الأوبرا

وصلت لوحة النتائج!

لوحة النتائج هي طريقة ممتعة لتتبع ألعابك، يتم تخزين جميع البيانات في متصفحك. المزيد من الميزات قريبا!

إعلان · حذف؟
إعلان · حذف؟
إعلان · حذف؟

ركن الأخبار مع أبرز التقنيات

شارك

ساعدنا على الاستمرار في تقديم أدوات مجانية قيمة

اشتري لي قهوة
إعلان · حذف؟