Web Utilitiesمولد درجات وظلال الألوان
قم بإنشاء درجات وظلال وأنماط من أي لون أساسي. أنشئ مقاييس ألوان بنمط Tailwind من 50 إلى 950، وانسخ متغيرات CSS، وابنِ لوحات ألوان كاملة لأنظمة التصميم فورًا.
hsl(217, 91%, 60%)
210
اللون الأساسي
#3B82F6
خصائص CSS المخصصة
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}الدرجات
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
الظلال
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
الأنماط
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
انقر فوق أي عينة لنسخ قيمة HEX الخاصة بها
أدوات ذات صلة
حول مولد درجات وظلال الألوان
كيف يعمل
- أدخل أو اختر أي لون أساسي باستخدام منتقي الألوان أو حقل HEX.
- اختر عدد الخطوات لإنشاء الدرجات والظلال.
- بدّل بين الوضع الكلاسيكي ووضع Tailwind (50–950).
- انقر فوق أي عينة لونية لنسخ قيمة HEX فورًا.
- استخدم نسخ الكل كـ CSS للحصول على لوحة الألوان الكاملة.
حالات الاستخدام الشائعة
- بناء لوحات ألوان نظام التصميم لأطر عمل واجهة المستخدم.
- إنشاء مقاييس ألوان متوافقة مع Tailwind CSS.
- إنشاء تدرجات لونية متاحة تحافظ على هوية العلامة التجارية.
- استكشاف كيف يبدو لون العلامة التجارية عبر جميع مستويات الإضاءة.
- إنتاج رموز الألوان لتسليم التصميم في Figma أو Storybook.
الأسئلة الشائعة
ما هي درجة اللون؟
تُنشأ درجة اللون بإضافة الأبيض إلى لون أساسي، مما يجعله أفتح وأقل إشباعًا. تحتفظ الدرجات بالصبغة الأصلية مع زيادة الإضاءة، مما ينتج عنه أنماط تشبه الألوان الباستيل المثالية للخلفيات وحالات التمرير.
ما هو ظل اللون؟
يُنشأ ظل اللون بإضافة الأسود إلى لون أساسي، مما يجعله أغمق. تحتفظ الظلال بالصبغة الأصلية مع تقليل الإضاءة، وتُستخدم عادةً للنصوص والحدود والحالات المضغوطة.
ما هو نمط اللون؟
يُنشأ نمط اللون بإضافة الرمادي إلى لون أساسي، مما يقلل إشباعه دون تغيير الإضاءة بشكل ملحوظ. تنتج الأنماط تنويعات لونية أكثر هدوءًا تناسب مكونات واجهة المستخدم المحايدة.
ما هو وضع لوحة الألوان بنمط Tailwind؟
يُنشئ وضع Tailwind 11 نقطة توقف بالتسميات 50 و100 و200 و300 و400 و500 و600 و700 و800 و900 و950، مما يعكس اصطلاح Tailwind CSS، مما يسهّل إنشاء عائلات ألوان مخصصة لملف tailwind.config.js.
كيف أستخدم متغيرات CSS المُنشأة؟
تُخرج الأداة كتلة :root { } مع خصائص CSS مخصصة لكل لون مُنشأ. انسخها إلى ورقة الأنماط الخاصة بك وارجع إليها عبر var(--tint-1) أو var(--shade-3) أو var(--color-500) وغيرها.
كم عدد الخطوات التي يمكنني إنشاؤها؟
في الوضع الكلاسيكي يمكنك اختيار من 2 إلى 10 خطوات. يُنتج وضع Tailwind دائمًا المقياس الثابت المكون من 11 نقطة توقف.
هل يمكنني نسخ قيم الألوان الفردية؟
نعم. انقر فوق أي لون عيّنة لنسخ قيمة HEX الخاصة به فورًا. يمكنك أيضًا استخدام زر نسخ الكل كـ CSS للحصول على لوحة الألوان الكاملة بنقرة واحدة.
ما صيغ الألوان التي تدعمها الأداة؟
يمكنك إدخال أي لون HEX مكون من 6 أرقام (مثل #3B82F6) في حقل النص، أو استخدام منتقي الألوان الأصلي للمتصفح. جميع القيم المُخرجة بصيغة HEX.
هل لوحة الألوان المُنشأة متاحة للجميع؟
تُنشئ الأداة ألوانًا متباعدة إدراكيًا، لكن الامتثال لـ WCAG يعتمد على كيفية إقران ألوان النص والخلفية. استخدم أداة فاحص إمكانية وصول الألوان للتحقق من نسب التباين.
كيف تفيد هذه الأداة في أنظمة التصميم؟
تتطلب أنظمة التصميم عادةً مقياسًا لونيًا كاملًا لكل لون من ألوان العلامة التجارية. تعمل هذه الأداة على أتمتة تلك العملية — أدخل لونك التجاري مرة واحدة واحصل على مقياس كامل جاهز لـ Figma أو tailwind.config.js.
هل تخزّن هذه الأداة ألواني؟
لا. تتم جميع حسابات الألوان في متصفحك بالكامل باستخدام JavaScript. لا يُرسَل أي بيانات إلى خادم، ولا يُخزَّن أي شيء بين الجلسات.
ما الفرق بين الدرجات/الظلال والتدرج اللوني؟
التدرج هو انتقال بصري سلس بين لونين أو أكثر في صورة أو خاصية CSS. الدرجات والظلال هي نقاط توقف لونية منفصلة ومسماة داخل عائلة صبغة واحدة، تُستخدم كقيم ألوان فردية في رموز التصميم.