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

حول مولد لوحة الألوان

اختر اللون الأساسي لعلامتك التجارية واحصل على كل ما تحتاجه الواجهة حوله: ألوان مرافقة، وألوان الحالات، وألوان محايدة، ودرجات، وتوكنات للوضعين الفاتح والداكن، وفحص التباين، وكود جاهز للصق، كل ذلك دون مغادرة متصفحك.

لوحة ألوان كاملة من لون واحد

تستخلص الأداة من لونك الأساسي لونًا ثانويًا وآخر ثالثيًا، وألوان الحالات (معلومات، نجاح، تحذير، خطر) المنسجمة مع أسلوبه، ودرجات رمادية مشوبة بلون خفيف للخلفيات والنصوص.

درجات جاهزة للاستخدام

يأتي كل لون في إحدى عشرة درجة، من الأفتح (50) إلى الأغمق (950)، للخلفيات والحدود وحالات التمرير والنصوص. إذا لم يناسبك لون مقترح، فاستبدله بلونك: تتبعه درجاته.

توكنات الوضعين الفاتح والداكن

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

تباين تم التحقق منه

تُقيَّم كل تركيبة من نص وخلفية وفق قواعد WCAG: 4.5:1 للنص العادي، و3:1 للنص الكبير، و7:1 لمستوى AAA.

التصدير إلى CSS وTailwind وJSON

انسخ كل قيمة بصيغة HEX أو RGB أو HSL أو OKLCH، أو نزّل ملف متغيرات CSS، أو سمة Tailwind v4، أو إعدادات Tailwind v3، أو JSON، أو قائمة بسيطة. يجري كل شيء في متصفحك: لا يُرسل أي شيء ولا يُحفظ.