انتقل إلى المحتوى
أدواتأدوات
أدوات

مولّد لوحات الألوان

أنشئ لوحة ألوان متوازنة بضغطة واحدة. اقفل الألوان التي تعجبك، واطلع على قيم HEX وRGB وHSL وOKLCH، وصدّرها بالصيغة التي تحتاجها.

كل شيء يعمل داخل متصفحك

ألوانك ونصوصك وصورك لا تُرفع إلى أي مكان.

اضغط مسطرة المسافة للتوليد (انقر أولًا على مساحة فارغة في الأداة). اقفل لونًا لتحتفظ به.

  • Aa 16.0
    15.99:1 على الأبيض
  • Aa 6.3
    6.29:1 على الأبيض
  • Aa 7.0
    7.04:1 على الأسود
  • Aa 14.1
    14.08:1 على الأسود
  • Aa 18.8
    18.78:1 على الأسود

تصدير

لوحات سابقة

تظهر هنا اللوحات التي تولّدها (محفوظة على هذا الجهاز فقط).

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

  1. 1اختر نمط التناسق مثل المتجاور أو المتكامل أو الثلاثي، وعدد الألوان.
  2. 2اضغط مسطرة المسافة أو زر التوليد حتى تعجبك اللوحة. واقفل الألوان التي تريد الاحتفاظ بها.
  3. 3اسحب البطاقات لإعادة ترتيبها، أو انقر على لون لضبطه بدقة.
  4. 4صدّر اللوحة كمتغيرات CSS أو إعداد Tailwind أو JSON أو SVG أو PNG، أو انسخ رابط المشاركة.
صف من خمس بطاقات ألوان عليها أيقونات قفل

متى تحتاج هذه الأداة؟

  • موقع أو علامة جديدة

    اقفل لون علامتك ودع المولّد يقترح ألوانًا مساندة تنسجم معه.

  • شرائح ومستندات

    اصنع مجموعة أحادية اللون هادئة لعرض تقديمي مع لون إبراز واحد.

  • تصميم التطبيقات ولوحات المعلومات

    ولّد لوحة تدرجات من درجة لونية واحدة لبناء الخلفيات والحدود ومستويات النص.

  • ألوان المخططات

    استخدم لوحة ثلاثية أو متكاملة لتبقى سلاسل المخطط متمايزة.

نصائح وحدود مهمة

  • اقفل لونًا تحبه وولّد الباقي حوله. وتأخذ الألوان الجديدة درجتها من أول لون مقفل.
  • افحص رقم التباين في كل بطاقة قبل وضع نص عليها. وما دون 4.5:1 يصعب قراءته في النص العادي.
  • تُحفظ اللوحات التي تولّدها في هذا المتصفح فقط، في قائمة الأحدث. انسخ الرابط لتحتفظ بواحدة في مكان آخر.
  • تُعاد الألوان الخارجة عن نطاق sRGB إلى داخله، فما تراه هو ما تستخدمه على الويب.

لوحات متوازنة بضغطة واحدة

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

تعرض كل بطاقة قيم HEX وRGB وHSL وOKLCH تنسخها بنقرة، إضافة إلى أفضل لون نص عليها (أسود أو أبيض) ونسبة التباين حسب WCAG. وصدّر اللوحة كمتغيرات CSS أو إعداد Tailwind أو JSON أو SVG أو صورة PNG بالتسميات، أو انسخ رابطًا يحمل الألوان بعد علامة #. وإن بدأت من صورة فـاستخرج ألوانها وافتحها هنا، وعدّل القيم في محوّل الألوان، وابنِ مزجًا ناعمًا بـمولّد التدرجات. ويشرح دليل اختيار ألوان الموقع كيف تمنح كل لون وظيفة.

شروحات خطوة بخطوة

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

ما هو OKLCH ولماذا نستخدمه؟

يصف OKLCH اللون بالإضاءة والتشبع والدرجة بطريقة تطابق ما نراه. فتبدو خطوات الإضاءة المتساوية متساوية، وهذا يجعل اللوحات المولَّدة متوازنة.

كيف أولّد لوحة؟

اضغط زر التوليد أو مسطرة المسافة بعد النقر على مساحة فارغة من الأداة. واقفل الألوان التي تريد إبقاءها.

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

نعم. افتح تبويبات التصدير وانسخ متغيرات CSS أو إعداد Tailwind، أو نزّل JSON أو SVG أو PNG.

كيف أشارك لوحة؟

انسخ الرابط من تبويب «رابط». وتُحفظ الألوان في الجزء بعد علامة # الذي لا يُرسل إلى أي خادم.

هل أستطيع إضافة ألوان أو حذفها؟

نعم، من ثلاثة إلى عشرة. استخدم قائمة عدد الألوان أو زرّي الإضافة والحذف على البطاقات.