Softonic

مولّد الألوان الثلاثية

خطوة 1 / 2
التالي

تعتمد اللوحة الثلاثية على ثلاثة ألوان متباعدة بمقدار 120° على عجلة الألوان؛ والأحمر والأصفر والأزرق هو المثال المدرسي الشهير. والنتيجة متوازنة وحيوية بطبيعتها من دون فوضى. اختر أي لون أساسي عبر منتقي الألوان، فيحوّله هذا المولّد إلى HSL ويدوّر درجة اللون بمقدار +120° و+240° بالضبط مع إبقاء التشبع والإضاءة كما هما، ثم يعرض العينات الثلاث مع أكواد HEX الخاصة بها. انقر على أي عينة لنسخ كودها.

كيف تُبنى اللوحة

  1. 1

    اختر لونا أساسيا

    استخدم منتقي الألوان لاختيار الدرجة اللونية التي ستُبنى اللوحة حولها.

  2. 2

    حساب الشريكين

    تدوّر الأداة درجة اللون بمقدار +120° و+240° في فضاء HSL؛ ويبقى التشبع والإضاءة متطابقين للحصول على ثلاثي متماسك.

  3. 3

    اقرأ أكواد HEX

    تظهر عينات Base وTriadic +120° وTriadic +240° جنبا إلى جنب، وكل منها موسومة بقيمة HEX من ست خانات.

  4. 4

    انقر للنسخ

    نقرة واحدة على أي عينة تنسخ كود HEX إلى الحافظة، جاهزا للصقه في CSS أو إعدادات Tailwind أو أداة التصميم التي تستخدمها.

لماذا تبدو اللوحات الثلاثية متوازنة

ثلاثة ألوان على مسافات متساوية حول عجلة الألوان لا تتشارك أي جوار في الدرجات اللونية: فهي تتباين بقوة، بينما يجنّبها التباعد بمقدار 120° الصدام المباشر الذي يحدث مع المتممات المتقابلة (المتباعدة 180°). تقرؤها العين ألوانا مميزة لكن متناغمة.

الرياضيات خلف العينات

يحوّل المولّد لون HEX الذي اخترته إلى HSL، ويضيف 120° و240° إلى درجة اللون، ثم يعيد التحويل. ولأن درجة اللون وحدها تتغير، تتشارك الألوان الثلاثة دائما التشبع والإضاءة نفسيهما. ومن النتائج الطريفة أن التدوير بمقدار 120° بالضبط يعادل تدوير قيم القنوات الحمراء والخضراء والزرقاء، لذا فإن شريكي #6366F1 (اللون الافتراضي) هما #F16366 و#66F163، أي الأزواج الثلاثة نفسها بترتيب مختلف.

أمثلة على ثلاثيات تنتجها هذه الأداة:

الأساس Triadic +120° Triadic +240°
#FF0000 (الأحمر) #00FF00 #0000FF
#6366F1 (النيلي) #F16366 #66F163
#E67E22 (البرتقالي) #22E67E #7E22E6
#0EA5E9 (الأزرق السماوي) #E90EA5 #A5E90E
#2ECC71 (الزمردي) #712ECC #CC712E

استخدام الثلاثية دون إرباك

ثلاث درجات لونية زاهية بكامل التشبع أمر مبالغ فيه. أفضل ممارسة:

  • لون مهيمن (60%) للواجهة الرئيسية.
  • لون ثانوي (30%) للتفاصيل والأقسام.
  • لون بارز (10%) للعناصر التفاعلية الأساسية.

الانطلاق من أساس هادئ هو الأداة الأخرى: يرث الشريكان تشبعه، فالأساس الناعم يعطي ثلاثيا ناعما.

الثلاثية مقابل أنواع التناغم الأخرى

التناغم البنية الإحساس
المتمم لونان، متباعدان 180° تباين عالٍ، قوي
المتجاور 3 ألوان، متجاورة هادئ، متماسك
الثلاثي 3 ألوان، متباعدة 120° متوازن، حيوي
الرباعي 4 ألوان، مستطيل ثري، أصعب موازنة
المتمم المنقسم الأساسي + متممان قريبان قوي دون تضارب

نصائح لتصميم الواجهات

  • تحقق من تباين كل زوج. لا تضمن اللوحات الثلاثية تباين WCAG AA للنصوص فوق الألوان؛ تحقق من كل زوج على حدة.
  • اختر لونا واحدا لأزرار الإجراء والتزم به. الأزرار التي تتنقل بين ألوان الثلاثي تربك المستخدمين.
  • استخدم الدرجات الفاتحة والداكنة لتوسيع اللوحة دون إضافة درجة لونية رابعة.
  • اختبر في الوضع الداكن. قد يفقد ثلاثي يعمل على الأبيض تمايزه على الخلفيات الداكنة؛ اضبط الإضاءة.

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

ثلاثة تقسيمات متساوية لعجلة الألوان البالغة 360° تضع أقصى مسافة بين الدرجات اللونية دون أن تهيمن أي منها. التباعد الأصغر يعطي تناغما متجاورا؛ والتباعد الأكبر يكسر تساوي المسافات وينهار عادة إلى نظام متمم منقسم.

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

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

الرمادي الصافي تشبعه صفر، فلا توجد درجة لون تُدار، وتخرج العينات الثلاث متطابقة. حرّك الأساس نحو أي درجة لونية وستفترق العينات فورا.

لا حاجة إلى تسجيل ولا يُحفظ أي شيء. يُستخدم اللون فقط لحساب اللوحة وعرضها، وفي طريقة العرض خطوة بخطوة يظهر أيضا في عنوان URL للصفحة، ما يسهّل حفظ اللوحة في المفضلة أو مشاركتها.

أدوات ذات صلة

مولد الورق المسطر

أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.

منتقي ألوان Material Design

تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.

مولّد ورق الرسم البياني

أنشئ ورق رسم بياني قابلاً للطباعة عبر الإنترنت: اختر شبكة مربّعات أو نقاطاً، واضبط التباعد بالمليمتر، وحدّد A4 أو Letter ولون خطوط مخصّصاً، ثم اطبع أو نزّل ملف SVG واضحاً.

صانع الأعلام

صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.

أداة تقسيم شبكة إنستغرام

قسّم صورة عريضة إلى شبكة إنستغرام بحجم 3×3 أو إلى أي عدد من الصفوف. القطع مُرقّمة لتسهيل رفعها بترتيب عكسي.

عكس ألوان الصورة

قم بعكس كل قناة من قنوات RGB في الصورة لإنتاج صورة سلبية، وهي مفيدة للتعديلات الإبداعية وعرض نسخ الأفلام المصورة.

الأداة متاحة بلغات أخرى