مولد لوحات الألوان
مولد لوحات الألوان في generatorsconverters.com ينشئ مجموعة ألوان متناسقة من لون أساس واحد. يمكنك اختيار اللون من منتقي الألوان أو كتابة قيمة HEX مثل #3B82F6، ثم اختيار نوع الانسجام: تكميلي، متجاور، ثلاثي، split complementary، رباعي أو أحادي. يعرض الكود معاينة للون الأساس، وقيم HEX وRGB وHSL، ثم يرسم swatches يمكن النقر عليها لنسخ اللون مباشرة. كما يمكن نسخ كل الألوان معا أو نسخها كمتغيرات CSS داخل :root.
كيف تعمل harmonies؟
الأداة تحول اللون من RGB إلى HSL، ثم تدور زاوية hue حسب نوع الانسجام. في النمط التكميلي تستخدم زوايا مثل 180 درجة، وفي المتجاور تستخدم درجات قريبة حول اللون الأساسي، وفي triadic تستخدم ثلاث نقاط بينها 120 درجة. النمط الأحادي لا يغير hue بل يغير lightness لإنتاج درجات فاتحة وداكنة من اللون نفسه. هذه الطريقة مفيدة لتصميم واجهة متماسكة بسرعة، لكنها لا تحكم وحدها على التباين أو قابلية القراءة.
متى تستخدمها؟
تصلح الأداة لاختيار ألوان موقع، لوحة تطبيق، هوية بسيطة، أزرار، تنبيهات، بطاقات أو خلفيات. يمكن البدء بلون العلامة التجارية ثم تجربة harmony مختلفة حتى تظهر لوحة متوازنة. إذا كنت تعمل على واجهة عربية أو متعددة اللغات، اختبر الألوان مع النص الفعلي، لأن الاتجاه، حجم الخط والخلفية تؤثر في الإحساس البصري. نسخ CSS variables مفيد عند نقل اللوحة إلى ملف style أو theme.
حدود مهمة
اللوحة المتناسقة بصريا لا تعني أنها متاحة accessibility. يجب فحص contrast بين النص والخلفية، خصوصا للأزرار الصغيرة والنص الرمادي. كما أن RGB وHEX لا يصفان اختلافات الشاشات أو الطباعة. إذا كانت الألوان ستستخدم في طباعة أو علامة تجارية رسمية، حوّلها لاحقا إلى نظام مناسب مثل CMYK أو Pantone مع مصمم مختص. استخدم هذه الأداة كمرحلة استكشاف وتوثيق أولي، ثم اختبر النتيجة في المنتج الحقيقي.
نصائح عملية
لا تستخدم كل ألوان اللوحة بنفس القوة. اختر لونا أساسيا، لونا مساعدا، ولونا للتنبيه أو التمييز، واترك ألوانا حيادية للنصوص والخلفيات. في اللوحات الداكنة، راقب قابلية القراءة قبل جمال التدرج. وفي اللوحات الأحادية، غيّر التشبع أو الإضاءة بما يكفي حتى لا تبدو كل العناصر متشابهة. عند مشاركة اللوحة مع فريق، انسخ HEX وCSS variables حتى تبقى القيم موحدة.
مثال تطبيقي
إذا كان لونك الأساسي أزرقا، جرّب النمط التكميلي للحصول على لون تمييز دافئ، أو النمط الأحادي للحصول على واجهة هادئة. قبل اعتماد اللوحة، ضعها على زر، بطاقة، خلفية ونص قصير. بهذه الطريقة ترى العلاقة بين الألوان في سياق حقيقي لا في مربعات منفصلة فقط.
أنواع الهارموني اللوني
تنشئ أداة لوحة الألوان مجموعة ألوان من لون أساسي بصيغة HEX. بعد تحويل اللون إلى HSL تستخدم الزوايا اللونية لبناء أنماط مختلفة: complementary يعتمد على 180 درجة، analogous يستخدم ألوانا قريبة حول اللون الأساسي، triadic يقسم الدائرة إلى ثلاث نقاط بفاصل 120 درجة، split يستخدم لونين حول المكمل، tetradic يستخدم أربع نقاط بفواصل 90 درجة، وmono يغير الإضاءة داخل الصبغة نفسها. لذلك لا تعرض الأداة ألوانا عشوائية تماما، بل مجموعات مرتبطة بعلاقة لونية واضحة.
كل عينة تعرض HEX وRGB ويمكن نسخها بالنقر، كما يمكن نسخ كل الألوان كسطر واحد أو كمتغيرات CSS داخل `:root`. لوحة المعلومات الجانبية تعرض اللون الأساسي بصيغ HEX وRGB وHSL حتى تفهم نقطة البداية. في المشاريع الواقعية، استخدم هذه اللوحات كبداية ثم راجع التباين، دور كل لون في الواجهة، ودلالات اللون في الثقافة أو العلامة التجارية. الألوان المتناغمة رياضيا لا تكفي وحدها؛ تحتاج أيضا إلى لون للنص، لون للخلفية، لون للحالات التحذيرية، ومسافات استخدام ثابتة حتى لا تصبح الواجهة مزدحمة.
التعليقات