مولّد لوحات الألوان

أنشئ لوحات ألوان متناسقة من لون أساسي — تكميلية ومتماثلة وثلاثية ومنقسمة التكامل. أداة أساسية للمصممين لبناء أنظمة ألوان احترافية.

الاستوديو · محيط محايد

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

نظام التناغم

عدد الألوان

الميزات

الألوان المكمّلة

الألوان المتشابهة

نظام ثلاثي

مكمّل منقسم

تصدير كمتغيرات CSS

طريقة الاستخدام

1. اختر لونًا أساسيًا ونظام تناغم — تمتلئ منطقة العمل بلوحة ألوان.

2. اضغط مسافة (أو خلط) لتجربة تنويعات. مرّر المؤشر فوق أي عمود للنسخ أو التعديل أو فتح سلّم الدرجات أو قفله أثناء الخلط.

3. بدّل خلفية منطقة العمل (أبيض / رمادي / داكن / رقعة شطرنج) لاختبار اللوحة على خلفيات مختلفة، ثم صدّرها بصيغة CSS أو Tailwind أو JSON أو SVG أو PNG.

حول هذه الأداة

نادرًا ما تكون لوحات الألوان الجيدة عشوائية، فمعظمها يتبع علاقات على دائرة الألوان. انطلاقًا من لون أساسي واحد، يبني هذا المولّد لوحات من ستة ألوان وفق الانسجامات الكلاسيكية: المتجاورة (درجات متقاربة لتصاميم هادئة)، والأحادية (درجة واحدة بإضاءات مختلفة)، والمتكاملة (درجات متقابلة لتباين قوي)، والمتكاملة المنقسمة، والثلاثية، والرباعية. يعرض كل عمود قيمته واسمًا تقريبيًا للون، ويمكنك نسخه أو تعديله أو فتح سلّم من الدرجات الأفتح والأغمق، أو قفله ليبقى ثابتًا بينما تخلط الباقي. عاين اللوحة على خلفية بيضاء أو رمادية أو داكنة أو شفافة، ثم صدّرها كمتغيرات CSS أو إعداد ألوان Tailwind أو JSON أو SVG أو ورقة عينات PNG.

الأسئلة الشائعة

ما الفرق بين مخططات الانسجام؟

المتجاورة تستخدم درجات متقاربة، والأحادية تحتفظ بدرجة واحدة وتغيّر الإضاءة، والمتكاملة تجمع درجتين متقابلتين، والمتكاملة المنقسمة تستخدم الدرجتين المجاورتين للون المكمّل، والثلاثية توزع ثلاث درجات بفاصل 120°، والرباعية تستخدم أربع درجات بفاصل 90°.

أي مخطط يناسب موقع الويب أكثر؟

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

كيف تعمل الألوان المقفلة؟

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

هل اللوحات المولّدة متاحة للجميع؟

الانسجام لا يضمن تباينًا مقروءًا. قبل استخدام لونين من اللوحة للنص والخلفية، افحص الزوج بأداة فحص التباين وفق WCAG AA ‏(4.5:1 للنص العادي).

ما الصيغ التي يمكنني التصدير بها؟

خصائص CSS المخصصة، ومقتطف theme.extend.colors لـ Tailwind، ومصفوفة JSON لقيم HEX، وملف SVG يضم العينات، وصورة PNG بحجم 1500 × 900 مطبوع عليها قيمة كل عمود.