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

ينشئ مولد لوحات الألوان لوحة من 5 ألوان انطلاقًا من أي لون أساسي باستخدام تناسقات نظرية الألوان — المتكامل والثلاثي والمتجاور والمتكامل المنقسم والرباعي وأحادي اللون — ويصدّرها كخصائص CSS مخصصة.

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

  1. اختر لونًا أساسيًا من منتقي الألوان.
  2. اختر نوع التناسق، مثل المتكامل أو الثلاثي.
  3. راجع العينات الخمس المُنشأة.
  4. انقر Copy as CSS Variables للصق اللوحة في ملف الأنماط.

معلومات مفيدة

  • تقع الألوان المتكاملة على بُعد 180° من بعضها على عجلة الألوان، بينما تتباعد الألوان الثلاثية بمقدار 120°.
  • تستخدم اللوحات المتجاورة درجات لونية متقاربة (بفارق نحو 30°) وتبدو عادةً هادئة ومتناسقة.
  • يجمع المتكامل المنقسم درجة لونية أساسية مع الدرجتين الواقعتين على جانبي لونها المكمّل (±30°)، فيمنح تباينًا بتوتر أقل.
  • تحافظ اللوحات أحادية اللون على درجة لونية واحدة ولا تغيّر إلا التشبع والإضاءة.
  • يعمل المولد بنظام HSL، الذي يدير درجة اللون دون تغيير إضاءته.

تعمل بالكامل داخل متصفحك — لا يتم رفع أو حفظ أي شيء تُدخله.

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

ما هي لوحة الألوان المتكاملة؟

تجمع اللوحة المتكاملة درجة لونية مع الدرجة المقابلة لها مباشرة على عجلة الألوان (على بُعد 180°)، مثل الأزرق والبرتقالي. وهي تمنح أقوى تباين بين كل أنواع التناسق.

كم لونًا يجب أن تضم لوحة ألوان الموقع؟

تستخدم معظم الواجهات لونًا أساسيًا واحدًا ولونًا أو لونين للتمييز ومجموعة من الألوان المحايدة. التناسق من خمسة ألوان نقطة بداية جيدة يمكنك تقليصها أو توسيعها بدرجات أفتح وأغمق.

ما الفرق بين الثلاثي والرباعي؟

يستخدم الثلاثي ثلاث درجات لونية متباعدة بالتساوي بمقدار 120°. أما الرباعي فيستخدم أربع درجات متباعدة بمقدار 90° تشكّل مربعًا على العجلة، وهو أغنى لكن موازنته أصعب.

هل يمكنني استخدام اللوحة في CSS أو Tailwind؟

نعم. انسخ اللوحة كخصائص CSS مخصصة واستخدمها عبر var()، أو الصق قيم hex في ألوان سمة Tailwind.