مولّد لوحات الألوان
ولّد لوحات ألوان متكاملة ومتجاورة وثلاثية وأحادية اللون من لون أساسي — انقر أي عيّنة لنسخ رمزها السداسي.
1,201 مشاهدة
كيف يعمل
تُعرِّف نظرية الألوان قواعد التناغم كعلاقات زاوية ثابتة بين درجات اللون على عجلة الألوان. تحسب هذه الأداة تلك القواعد في نموذج HSL (تدرج اللون، التشبع، الإضاءة) بدلاً من RGB، لأن تدرج اللون (Hue) هو قيمة طبيعية من 0 إلى 360 درجة على دائرة — فإضافة زاوية لإيجاد لون ذي علاقة هو عملية حسابية مباشرة. أما في RGB فالألوان مجرد ثلاث قنوات شدة لا تحمل مفهوماً متأصلاً لـ"الزاوية"، فحساب التناغم مباشرة في RGB كان سيتطلب أصلاً التحويل داخلياً إلى HSL؛ هذه الأداة ببساطة تعمل في الفضاء الذي تكون فيه هذه الحسابات طبيعية.
انطلاقاً من تدرج لونك الأساسي، تشتق الأداة: المتكامل (تدرج اللون الوحيد المعاكس تماماً، الأساس + 180°، لأقصى تباين)، الثلاثي (ثلاثة تدرجات متباعدة بالتساوي حول العجلة بفواصل 120°، زاهية لكن متوازنة)، المتجاور (تدرجات مجاورة عند ±30°، تبدو هادئة ومتماسكة لأنها قريبة من بعضها)، المتكامل المنقسم (التدرجان المحيطان بنقطة التكامل، عند ±150°، يمنحان تبايناً مع توتر بصري أقل من زوج متكامل خالص)، ومقياس أحادي اللون يُثبِّت تدرج اللون والتشبع بينما يرفع الإضاءة ويخفضها تدريجياً. على سبيل المثال، تدرج لون أساسي بقيمة 200° (أزرق) ينتج تدرجاً متكاملاً بقيمة 20° (برتقالي) وتدرجين ثلاثيين عند 320° و80°.
ما يجب أن تعرفه
- وصفة عملية 60-30-10: استخدم اللون الأساسي لنحو 60% من التصميم، ودرجة متجاورة لـ30%، واللون المتكامل كلمسة بارزة بنسبة 10% — للأزرار والروابط والتمييزات.
- التناغم ليس إتاحة (accessibility). كون تدرجَي لون مرتبطين رياضياً على العجلة لا يقول شيئاً عن تباين إضاءتهما؛ تحقق من تركيبات النص فوق اللون مقابل معايير WCAG بشكل منفصل.
- انقر أي عيّنة لنسخ رمزها السداسي مباشرة إلى الحافظة.
- التشبع والإضاءة ما زالا مهمين للغاية. يمكن للوحتين أن تتشاركا المجموعة نفسها تماماً من تدرجات اللون لكن تبدوان مختلفتين تماماً في المزاج — فنسخة منخفضة التشبع وعالية الإضاءة تبدو ناعمة وباستيلية، بينما التدرجات نفسها بتشبع كامل وإضاءة منخفضة تبدو جريئة ودرامية.
- الدلالات الثقافية لا تتبع العجلة. شريك التناغم "الصحيح" رياضياً لتدرج ما لا يقول شيئاً عمّا يرمز إليه ذلك اللون في منطقة أو صناعة معينة — فالأحمر قد يُقرأ كإنذار في سياق واحد واحتفالاً في آخر، بغض النظر عن أي قاعدة تناغم.
مثال عملي سريع: اختر #3B82F6 (أزرق متوسط، بتدرج لون يقارب 217°) كلونك الأساسي. يقع المتكامل قرب تدرج 37°، وهو برتقالي دافئ — زوج طبيعي لزر أساسي في واجهة يغلب عليها الأزرق. تضيف المجموعة الثلاثية تدرجين قرب 97° (أخضر مصفر) و337° (وردي أرجواني)، مفيدان عندما يحتاج تصميم إلى ثلاثة ألوان تمييز متمايزة لكن متوازنة، مثل وسوم الفئات أو سلاسل بيانات مخطط.
الأسئلة الشائعة
أي توافق ينبغي أن أختار؟
اللوحات المتجاورة تبدو هادئة ومتماسكة لأن التدرجات قريبة من بعضها على العجلة؛ المتكاملة تمنح أقصى تباين لأزرار الدعوة إلى الإجراء؛ الثلاثية زاهية لكنها متوازنة. الأحادية اللون هي الخيار الأكثر أماناً للواجهات — تدرج لون واحد وعدة درجات إضاءة، مضمونة الشعور بالتماسك حتى لو لم تكن واثقاً من مزج عدة تدرجات بنفسك.
لماذا يُحسَب تدرج اللون في HSL بدلاً من RGB مباشرة؟
يمثّل HSL تدرج اللون (Hue) كزاوية واحدة (0–360°) على دائرة، بحيث تكون عملية "الدوران بمقدار 180° لإيجاد المتكامل" إضافة بخطوة واحدة. لا يملك RGB مفهوماً متأصلاً للزاوية — فقنواته الثلاث (أحمر، أخضر، أزرق) لا تُطابق عجلة بشكل نظيف، لذا فإن حساب التناغم مباشرة في RGB سيتطلب حسابات أعقد بكثير للوصول للنتيجة نفسها، مع تحويل ذهاباً وإياباً داخلياً على أي حال.
ما الفرق بين المتكامل والمتكامل المنقسم؟
يستخدم المتكامل تدرج اللون الوحيد البعيد بالضبط 180° — أقصى تباين، لكن قد يبدو متوتراً بصرياً بكميات متساوية. أما المتكامل المنقسم فيستخدم التدرجين على جانبي تلك النقطة (±150° من الأساس)، محافظاً على تباين قوي مع شعور أنعم وأسهل في التوازن، ولهذا تعتمد عليه لوحات شعارات وعلامات تجارية كثيرة بدلاً من زوج متكامل خالص.
كيف أنسخ لونًا؟
انقر العيّنة — يُنسخ رمزها السداسي إلى الحافظة فوراً ويظهر تأكيد، جاهز للصق مباشرة في CSS أو أداة تصميم أو كود.
هل اللوحات المولَّدة متاحة (accessible) للنص؟
ليس تلقائياً. يصف التناغم علاقات تدرج اللون، لا تباين الإضاءة — يمكن للونين متناغمين أن يفشلا في سهولة القراءة عندما يكون أحدهما نصاً والآخر خلفية، خصوصاً تدرجين متوسطي الإضاءة متقاربين. عند وضع نص فوق لون، تحقق من نسبة تباين WCAG لا تقل عن 4.5:1 (أو 3:1 للنص الكبير) باستخدام أداة فحص تباين مخصصة قبل النشر.
أدوات مشابهة
الإبلاغ عن مشكلة
مولّد لوحات الألوان
التعليقات
لا توجد تعليقات بعد — كن أول من يكتب تعليقًا!