مولد ظلال الألوان
الظل هو نتيجة خلط اللون مع اللون الأسود؛ كل خطوة تصبح أغمق. يأخذ المولد لونًا أساسيًا بصيغة HEX وينتج من 3 إلى 20 خطوة (10 افتراضيًا) للظلال الداكنة بشكل متزايد، إضافة إلى الصبغات الفاتحة للون الأساسي نفسه. مفيد لسلالم لوحة نظام التصميم (500 → 900)، وحالات الضغط على الزر/التنشيط، وألوان النص التي تظل مقروءة، وتراكبات الظل. تُعرض كل خطوة كعينة مع قيمة hex الخاصة بها جاهزة للنسخ.
كيف يعمل توليد الظل
-
1
اختر لونًا أساسيًا
استخدم منتقي الألوان، أو مرّر قيمة hex عبر رابط الصفحة في وضع الخطوات. تقع القاعدة بين نطاق الصبغات ونطاق الظلال.
-
2
اختر عدد الخطوات
من 3 إلى 20 خطوة، 10 افتراضيًا. المزيد من الخطوات يعطي سلمًا أنعم؛ والقليل منها يعطي قفزات أقوى.
-
3
امزج مع الأسود بخطوات متساوية
تضرب كل خطوة القنوات الحمراء والخضراء والزرقاء بالعامل نفسه، وهو ما يعادل المزج مع الأسود (أو الأبيض للصبغات) بخطوات متساوية. مع 10 خطوات، تصبح كل خطوة أغمق أو أفتح بنحو 9 %. يبقى اللون مطابقًا للون الأساس.
-
4
اقرأ السلم
تعرض كل عينة قيمة hex الخاصة بها. حدد النص لنسخه إلى CSS أو ثيم Tailwind أو ملف design tokens.
الظل والصبغة والنغمة
- الظل (shade): اللون + الأسود → أغمق.
- الصبغة (tint): اللون + الأبيض → أفتح.
- النغمة (tone): اللون + الرمادي → أقل تشبعًا.
يُنتج هذا المولد الظلال والصبغات معًا من اللون الأساس نفسه. عادة ما يشكل زوج الصبغة والظل لوحة نظام التصميم (على سبيل المثال، العلامة التجارية 100 حتى العلامة التجارية 900 حيث 500 هو الأساس).
مثال على المقياس: #3B82F6 (Tailwind blue-500)
| الخطوة | HEX | المزيج | الدور في نظام التصميم |
|---|---|---|---|
| 0 | #3B82F6 | قاعدة | العلامة التجارية الأساسية (مثل blue-500) |
| 1 | #316CCD | 17% أسود | حالة التمرير |
| 2 | #2756A4 | 33% أسود | حالة الضغط/النشاط (blue-600) |
| 3 | #1D417B | 50% أسود | blue-700 |
| 4 | #132B52 | 67% أسود | blue-800 |
| 5 | #091528 | 83% أسود | blue-900 |
يعرض الجدول مقياسًا من 5 خطوات: كل خطوة تمثل سدس الطريق نحو الأسود.
كيف تُحسب الخطوات
تضرب الأداة القنوات الحمراء والخضراء والزرقاء للون الأساس بالعامل نفسه في كل خطوة. وهذا يعادل المزج مع الأسود لنطاق الظلال ومع الأبيض لنطاق الصبغات، بخطوات متساوية. مع 10 خطوات، تصبح كل خطوة أغمق أو أفتح بنحو 9 % من الخطوة السابقة.
لأن جميع القنوات تُضرب بالتساوي، يبقى لون الأساس ثابتًا تمامًا: فالأساس الأزرق يظل أزرق، والأساس الأخضر يظل أخضر. كما يخفض المزج مع الأسود التشبع جنبًا إلى جنب مع الإضاءة، فتبدو الخطوات الداكنة طبيعية بدلًا من أن تتوهج. أما تقليل الإضاءة وحده، دون لمس التشبع، فيترك الألوان الداكنة مفرطة التشبع.
استخدام الظلال في واجهة المستخدم
- الزر: قاعدة لحالة السكون، 1-2 خطوة أغمق للتمرير، 2-3 خطوات أغمق للتنشيط/الضغط.
- النص الأساسي: أغمق بمقدار 2-3 خطوات من القاعدة لضمان الوضوح على اللون الأبيض؛ أخف للنص الثانوي.
- الحدود / المقسم: درجة أو خطوتين أغمق من الخلفية، بما يكفي للرسم دون طغيان.
- الظلال: الخطوة الأغمق (أو الأغمق) مع ألفا مخفض بدلاً من اللون الرمادي الجديد.
- تصور البيانات: استخدم ظلالًا من لون واحد لمقياس متسلسل (مقادير القيم)، أو ظلال لونين للمقاييس المتباينة (موجب مقابل سالب).
المزالق الشائعة
- عدد كبير جدًا من الخطوات ينضغط في نطاقات لا يمكن تمييزها. تعمل المقاييس المكونة من 10 خطوات بشكل جيد لأن كل خطوة تكون أغمق بنحو 9 %؛ وعند 20 خطوة تصبح الاختلافات خفية. للتباينات القوية، فضّل 3-5 خطوات.
- انحراف اللون غير ممكن هنا: تضرب كل خطوة جميع القنوات بالتساوي، فالأحمر يظل أحمر والأخضر يظل أخضر. يظهر انحراف اللون عند الاستيفاء بين لونين مختلفين، وهذا المولد لا يفعل ذلك.
- تجاهل إمكانية الوصول: يمكن للظلال التي تبدو متناغمة أن تفشل في تباين WCAG مع الخلفية. تحقق دائمًا من التباين في كل خطوة.
- المقاييس المكوّنة من الظلال وحدها تبدو مرهقة على الخلفيات الداكنة. اقرنها بمقياس صبغة للحصول على وضع مظلم قابل للاستخدام.
الأسئلة الشائعة
بالنسبة لنظام التصميم، فإن 5 خطوات تظليل + 5 خطوات صبغة (10 إجمالاً حول القاعدة) هي التقليد الشائع. للحصول على ألوان حالة واجهة المستخدم السريعة (التمرير، النشطة)، تكفي 3 خطوات.
المزج المتساوي المستخدم هنا يبقي كل خطوة على خط مستقيم بين الأساس والأسود، لذلك تبقى الخطوات الوسطى نظيفة. عادة ما يأتي الوسط الموحل من أداة تستوفي بين لونين مختلفين، أو تقلل الإضاءة دون تقليل التشبع.
الألوان الداكنة لديها مساحة صغيرة بالفعل لتصبح أكثر قتامة قبل أن تتحول إلى اللون الأسود؛ تنتج القاعدة الأرجوانية الداكنة 2-3 خطوات مميزة فقط قبل أن ينهار المقياس. اختر قاعدة متوسطة الإضاءة للحصول على مقاييس أكثر ثراءً.
مشابه في النية، لكن مزجه مع الأسود يقلل من التشبع إلى جانب الإضاءة، والتي تبدو عادةً أكثر طبيعية. يحافظ تقليل الخفة النقي على التشبع العالي ويمكن أن يؤدي إلى ألوان داكنة مفرطة التشبع.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
عدّاد FPS
قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
محول ASCII إلى Hex
حوّل نص ASCII إلى قيم بايت سداسية عشرية. يستخدم الناتج رقمين ست عشريين لكل محرف، جاهزة لتفريغات الذاكرة أو تتبعات الحزم أو جداول البرامج الثابتة.