مولّد لوحات الألوان
اختر لونًا أساسيًا وولّد فورًا تناسقات مستوحاة من نظرية الألوان — الألوان المكملة والمتماثلة والثلاثية والرباعية والمكمل المنقسم والأحادية اللون — كعيّنات حية يمكنك نسخها بصيغة HEX أو RGB أو HSL أو متغيرات CSS أو إعداد Tailwind.
الألوان المكملة
اللون الأساسي ومقابله على العجلة (درجة اللون + 180°) — أقوى تباين ممكن في الاقتران.
الألوان المتماثلة
اللون الأساسي يكتنفه جاراه على العجلة (درجة اللون ± 30°) — تناسق هادئ ومتماسك.
الألوان الثلاثية
ثلاثة ألوان متباعدة بالتساوي 120° (درجة اللون، +120°، +240°) — نابضة ومع ذلك متوازنة.
الألوان الرباعية (مستطيل)
أربعة ألوان تشكّل مستطيلًا على العجلة (درجة اللون، +90°، +180°، +270°) — زوجان مكمّلان.
المكمل المنقسم
اللون الأساسي مضافًا إليه اللونان على جانبي مكمّله (درجة اللون +150° و+210°) — تباين قوي يسهل موازنته.
الألوان الأحادية اللون
درجة لون واحدة معروضة كتدرّج في الإضاءة من الفاتح إلى الداكن — سُلّم متناسق دون عناء.
تصدير اللوحة
انسخ التناسق المحدد كخصائص CSS مخصّصة جاهزة للصق أو كإعداد ألوان Tailwind.
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}حول مولّد لوحات الألوان
يحوّل مولّد لوحات الألوان لونًا أساسيًا واحدًا إلى مجموعة ألوان تنسجم معًا، مستعينًا بهندسة عجلة الألوان. تناسقات نظرية الألوان ليست سوى علاقات محددة بين درجات الألوان: ألوان تقابل بعضها، أو تجاور بعضها، أو تتوزع بالتساوي حول العجلة. تأخذ هذه الأداة لونك الأساسي، وتقرأ درجة لونه وتشبعه وإضاءته (HSL)، ثم تدوّر درجة اللون بمقادير ثابتة لبناء ست خطط كلاسيكية — مكملة (درجة اللون + 180°)، متماثلة (درجة اللون ± 30°)، ثلاثية (بتباعد 120°)، رباعية أو مستطيل (بتباعد 90°)، مكمل منقسم (على جانبي المكمّل)، وأحادية اللون (درجة لون واحدة بإضاءة متغيرة). تُعرض كل لوحة كعيّنات حية لترى العلاقات بدل قراءة الأرقام فحسب، ويأتي كل لون بقيم HEX وRGB وHSL جاهزة للنسخ. حين تحصل على تناسق يعجبك، صدّره كخصائص CSS مخصّصة أو إعداد ألوان Tailwind وأدرجه مباشرة في مشروع. صُمّم للمصممين والمطورين والرسامين وكل من يختار الألوان لموقع أو علامة تجارية أو رسم بياني أو شرائح عرض أو ديكور داخلي — طريقة سريعة للانتقال من لون واحد تحبه إلى لوحة كاملة متوازنة.
كيفية استخدام هذا المولّد
- 1 اختر لونًا أساسيًا بمنتقي العيّنة، أو اكتب أي قيمة hex (مثل #3498DB أو #39F) في الحقل.
- 2 تصفّح أقسام التناسق الستة — مكملة ومتماثلة وثلاثية ورباعية ومكمل منقسم وأحادية اللون — كلٌّ منها معروض كعيّنات ألوان حية.
- 3 انسخ أي لون منفرد كـ HEX عبر زر كل عيّنة؛ كما تعرض كل عيّنة قيمتي RGB وHSL المطابقتين.
- 4 اختر لوحة وصيغة في صندوق التصدير لنسخ خصائص CSS مخصّصة أو إعداد ألوان Tailwind، ثم الصقها في مشروعك.
كيف تعمل تناسقات الألوان (عجلة الألوان)
كل تناسق هو تدوير لدرجة لون اللون الأساسي حول عجلة الألوان بمقدار 360°، مع إبقاء تشبعه وإضاءته كما هما. والعمل بنظام HSL (درجة اللون، التشبع، الإضاءة) يجعل ذلك سهلاً: تتغيّر درجة اللون وحدها. الألوان المكملة — درجة اللون + 180°. يقع اللونان في مواجهة مباشرة، ما يمنح أقوى تباين. الألوان المتماثلة — درجة اللون − 30°، درجة اللون، درجة اللون + 30°. ألوان متجاورة تمتزج بسلاسة وتبدو متناسقة. الألوان الثلاثية — درجة اللون، درجة اللون + 120°، درجة اللون + 240°. ثلاثة ألوان عند رؤوس مثلث متساوي الأضلاع: زاهية لكن متوازنة. الألوان الرباعية (مستطيل) — درجة اللون، درجة اللون + 90°، درجة اللون + 180°، درجة اللون + 270°. زوجان مكمّلان لخطة غنية من أربعة ألوان. المكمل المنقسم — درجة اللون، درجة اللون + 150°، درجة اللون + 210°. اللون الأساسي مع درجتَي اللون المكتنفتين لمكمّله — تباين يقارب المكمّل لكنه ألطف. الأحادية اللون — درجة لون واحدة عند عدة مستويات إضاءة، من الدرجات الفاتحة إلى الظلال الداكنة. مثلاً، اللون الأساسي #3498DB درجة لونه نحو 204°. مكمّله هو 204° + 180° = 24° (برتقالي)، وشريكاه الثلاثيان عند 324° و84°، ومكمّلاه المنقسمان عند 354° و54°. تُجرى الحسابات في HSL وتُحوَّل ثانيةً إلى HEX لكل عيّنة.
الأسئلة الشائعة
ما هو اللون المكمل؟
اللون المكمل هو اللون المقابل مباشرةً للون آخر على عجلة الألوان — أي تدوير لدرجة اللون بمقدار 180°. الأزرق والبرتقالي، والأحمر والأخضر، والأصفر والبنفسجي أزواج مكمّلة. عند وضعها جنبًا إلى جنب تخلق أقوى تباين ممكن، ما يجعل كل لون يبدو أكثر حدّة، ولذلك تشيع الأزواج المكمّلة في أزرار الحث على الإجراء واللمسات المميزة وكل ما يجب أن يبرز. يجد هذا المولّد المكمّل بأخذ درجة لون لونك الأساسي وإضافة 180°.
كيف تصنع لوحة ألوان؟
ابدأ بلون أساسي واحد يعجبك، ثم استخدم علاقات نظرية الألوان لاشتقاق البقية بدل التخمين. اختر تناسقًا يلائم المزاج: التناسقات المتماثلة أو الأحادية اللون تبدو هادئة وموحّدة، بينما تضيف المكملة والثلاثية والمكمل المنقسم تباينًا وحيوية. حافظ على ثبات التشبع والإضاءة كي تبدو الألوان كمجموعة واحدة، واقتصر على حفنة ألوان مع ألوان محايدة. تُؤتمِت هذه الأداة تلك العملية — أدخل لونًا أساسيًا فتولّد ست لوحات جاهزة يمكنك نسخها بصيغة HEX أو RGB أو HSL أو متغيرات CSS أو إعداد Tailwind.
ما هي خطة الألوان الثلاثية؟
تستخدم خطة الألوان الثلاثية ثلاثة ألوان متوزعة بالتساوي حول عجلة الألوان، بتباعد 120° — مثل الأحمر والأزرق والأصفر. اللوحات الثلاثية نابضة ومفعمة بالتباين مع بقائها متوازنة، لأن درجات الألوان الثلاث متساوية البعد عن بعضها. من الأساليب الشائعة أن يهيمن لون واحد وتُستخدم الآخران كلمسات مميزة. في هذا المولّد، اللوحة الثلاثية هي لونك الأساسي مضافًا إليه درجتا اللون عند +120° و+240°.
ما هي خطة الألوان المتماثلة؟
تستخدم خطة الألوان المتماثلة ألوانًا متجاورة على العجلة، عادةً في حدود نحو 30° من درجة اللون الأساسية — مثل الأزرق والأزرق المخضر والأخضر. ولأن درجات الألوان شديدة التقارب، تبدو اللوحات المتماثلة ناعمة وطبيعية ومتناسقة، ولهذا تظهر كثيرًا في الطبيعة (الغروب، الأوراق، المحيط). تباينها أقل من الخطط المكملة، لذا يفيد اختيار لون مهيمن. تبني هذه الأداة لوحة متماثلة من درجات اللون عند −30° واللون الأساسي و+30°.
أدوات تصميم وألوان ذات صلة
يقترن مولّد اللوحات طبيعيًا بمحول الألوان لترجمة أي عيّنة بين HEX وRGB وHSL وHSV وCMYK، وبمدقق التباين للتأكد من أن ألوانك مقروءة ومتوافقة مع WCAG، وبمولّد تدرّجات CSS لمزج ألوان اللوحة في خلفيات ناعمة، وبحاسبة نسبة العرض إلى الارتفاع لبقية سير عمل التصميم لديك.