Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
حول هذه الأداة
مُستخرِج لوحة الألوان يُنشئ سلم تصميم من 10 خطوات من أي لون أساسي، متطابقاً مع اصطلاحات الظلال 50–900 المستخدمة في Tailwind CSS وMaterial Design والأطر المماثلة.
تُعرض كل عينة في السلم المُنشأ مع قيم hex وRGB وHSL. يتكيف لون النص تلقائياً إلى الأبيض أو الداكن بناءً على الإضاءة.
كيفية الاستخدام
- اختر لوناً أساسياً باستخدام منتقي الألوان أو أدخل قيمة hex.
- يُنشأ السلم المكون من 10 خطوات (50–900) فوراً، ليغطي نطاق السطوع الكامل.
- استخدم قيم hex أو RGB أو HSL لتطبيق الألوان في نظام التصميم أو متغيرات CSS.
حالات الاستخدام
تُنشئ فرق نظام التصميم مقاييس ألوان كاملة كامتدادات لإعدادات Tailwind أو خصائص CSS مخصصة. يبني مطورو الواجهة الأمامية مكونات UI يمكن الوصول إليها.
الأسئلة الشائعة
- كيف يختلف هذا السلم عن "الظلال" في أدوات أخرى؟ — تُنشئ هذه الأداة سلماً ثابتاً من 10 خطوات (50، 100، 200، … 900) مُثبَّتاً على قيم سطوع محددة، وفق اصطلاحات نظام التصميم الشائعة.
- هل يؤثر تغيير الإشباع على السلم؟ — يُحافظ على إشباع لونك الأساسي في جميع الخطوات — يتغير السطوع فقط.
- هل يمكنني استخدام هذه الألوان مباشرةً في Tailwind CSS؟ — نعم. انسخ قيم hex من كل مستوى ظل وأضفها إلى tailwind.config.js تحت theme.extend.colors مع أرقام الظل كمفاتيح.