مولد صبغات الألوان
الصبغة هي نتيجة خلط اللون مع اللون الأبيض - كل خطوة تصبح أفتح. يأخذ المولد اللون الأساسي الخاص بك وينتج سلمًا من الصبغات الأفتح تدريجيًا، وهو مفيد لنطاقات لوحة نظام التصميم (100 → 400)، وملء الخلفية الدقيقة، وحالات التمرير على الألوان الأساسية الداكنة، وخلفيات الشارة/التنبيه حيث يجب أن يكون لون التمييز موجودًا ولكن هادئًا.
كيف يتم إنشاء الصبغات
-
1
اختر لونًا أساسيًا
استخدم منتقي الألوان لاختيار لون أساسي. يعمل بشكل أفضل مع قواعد متوسطة الخفة؛ القواعد القريبة من اللون الأبيض ليس لديها مساحة كبيرة للتفتيح.
-
2
اختر عدد الخطوات
بين 3 و20 خطوة، والافتراضي 10. تمنحك 10 خطوات مقياسًا كاملًا لنظام التصميم؛ وخطوات أقل تكفي للعمل السريع في واجهة المستخدم.
-
3
امزجه مع الأبيض بنسب متزايدة
مع 10 خطوات، يخلط اللون الأول نحو 9% من الأبيض والأخير نحو 91%. يتم الاستيفاء مباشرة في فضاء RGB، لذلك يتلاشى التشبع كلما ارتفعت الخفة.
-
4
اقرأ قيم HEX
تعرض كل عيّنة قيمة HEX الخاصة بها. انقلها إلى متغيرات CSS أو مقياس Tailwind أو خريطة Sass.
مثال لمقياس الصبغة من #3B82F6
يوضح الجدول أدناه ما ينتجه المولد مع الخطوات العشر الافتراضية:
| خطوة | Hex | أبيض | الدور النموذجي |
|---|---|---|---|
| 0 | #3B82F6 | قاعدة | العلامة التجارية الأساسية (blue-500) |
| 1 | #4C8DF6 | 9.1% | تمرير فاتح على خلفية داكنة |
| 2 | #5E98F7 | 18.2% | يعادل blue-400 |
| 3 | #70A4F8 | 27.3% | |
| 4 | #82AFF9 | 36.4% | blue-300 |
| 5 | #94BAFA | 45.5% | |
| 6 | #A5C6FA | 54.5% | |
| 7 | #B7D1FB | 63.6% | |
| 8 | #C9DCFC | 72.7% | خلفية خفيفة (blue-100/200) |
| 9 | #DBE8FD | 81.8% | |
| 10 | #EDF3FE | 90.9% | blue-50 |
صبغة + ظل = مقياس نظام التصميم
امزج الصبغات (الأفتح) والظلال (الأغمق) حول قاعدة واحدة لتشكيل مقياس كامل:
- 50، 100، 200، 300، 400: الصبغات (الأخف إلى الأفتح قليلاً من القاعدة)
- 500: القاعدة
- 600، 700، 800، 900: ظلال (أغمق قليلاً من القاعدة إلى الأغمق)
يتوافق هذا مع Tailwind وMaterial وOpen Color وRadix UI وأنظمة التصميم الأكثر شيوعًا. المقاييس المكونة من 10-11 خطوة هي القاعدة.
حيث تتألق الصبغات في واجهة المستخدم
- خلفيات التنبيه والشارة: نص خطأ-500 على خلفية خطأ-50 = التعرف الفوري بدون صيحة مرئية.
- حالات التمرير على الخلفيات الداكنة: يتم تفتيح الأزرار الموجودة على السطح الداكن باتجاه درجة أفتح عند التمرير.
- المقاييس التسلسلية في تصور البيانات: تعيين القيمة إلى اللون حيث يكون المقدار العالي مشبعًا ويتلاشى المقدار المنخفض نحو اللون الأبيض.
- العناصر النائبة لفئة الصورة الرمزية/المخطط: لون أساسي في حالة عدم وجود صورة/بيانات.
- الطبقات السطحية: خلفية البطاقة ملونة قليلًا بلون العلامة التجارية لإبراز العلامة التجارية بشكل دقيق.
لماذا تفقد الصبغات الأفتح تشبعها
يمزج المولد مباشرة في فضاء RGB. كلما أُضيف الأبيض، انخفض التشبع أسرع من ارتفاع الخفة المدركة، لذلك تبدو الخطوات العليا شاحبة أو رمادية. هذا سلوك طبيعي لمزج RGB:
- مزج RGB (هذه الأداة): بسيط ويمكن التنبؤ به. يتلاشى التشبع بثبات؛ تبدو الخطوات الفاتحة جدًا منزوعة التشبع.
- استيفاء OKLCH أو LAB: تستخدمه برامج التصميم للحفاظ على ثبات الصفاء أكثر أثناء التفتيح. لا يقدم هذا المولد هذين النموذجين؛ إذا كنت بحاجة إلى صبغات بدرجة لون ثابتة، فأنشئها في أداة تصميم تدعم OKLCH.
- التفتيح في HSL: يرفع الخفة دون خلط الأبيض؛ قد تبدو النتيجة باستيلية بدلًا من أن تشبه الطلاء.
أرضية الصبغة لواجهة مستخدم قابلة للاستخدام
تقترب الصبغات الخفيفة جدًا (الخطوة 8+) من اللون الأبيض النقي وتصبح غير قابلة للتمييز بصريًا على خلفية بيضاء. مفيدة مثل:
- التحديد الدقيق يبرز خلف النص.
- خطوط صف غير مرئية تقريبًا في الجداول الكثيفة.
ولكنها ليست جيدة بالنسبة للأزرار أو الملصقات التي يحتاج المستخدم فيها إلى رؤية لون مميز. قم بإقران الصبغات الفاتحة مع عنصر أغمق (الحدود والنص) لتثبيتها.
الأسئلة الشائعة
يمزج المولد مباشرة في RGB، واستيفاء RGB يسحب التشبع إلى الأسفل كلما ارتفعت الخفة، لذلك تميل الخطوات العليا نحو الأبيض. أما الاستيفاء في OKLCH أو LAB فيحافظ على تلميح مرئي من اللون الأساسي؛ استخدم أداة تصميم تدعم OKLCH عندما يكون ذلك مهمًا.
مماثلة ولكن ليست متطابقة. يؤدي المزج مع اللون الأبيض إلى تقليل التشبع والخفة بشكل متناسب؛ تعديل خفة HSL يرفع L بشكل مستقل. تبدو الصبغات أكثر طبيعية (تشبه الطلاء)؛ خفة HSL يمكن أن تدفع إلى ألوان الباستيل غير الواقعية.
نعم - عادةً ما يحتاج الوضع المظلم إلى “سلم إضاءة” مختلف لأن الخلفيات داكنة بالفعل. تقوم العديد من الأنظمة بعكس المقياس (الوضع الداكن 50 يعادل اللون الأبيض على الظلام 900 للوضع الفاتح).
أنشئ سلم تظليل مكون من 5 خطوات (50-500) وسلم تظليل مكون من 5 خطوات (500-900) من نفس القاعدة. قم بالتسلسل لمقياس نظام التصميم الكامل المكون من 10 إلى 11 خطوة.
أدوات ذات صلة
مرجع جدول ASCII
جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.
مرجع أحرف HTML
قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.
عدّاد FPS
قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.
منسق JSON
الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.
مولد لوحة الألوان
أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.
محول ASCII إلى Hex
حوّل نص ASCII إلى قيم بايت سداسية عشرية. يستخدم الناتج رقمين ست عشريين لكل محرف، جاهزة لتفريغات الذاكرة أو تتبعات الحزم أو جداول البرامج الثابتة.