مولّد درجات الألوان
حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس درجات بأسلوب Tailwind من 50 إلى 950، بالمزج نحو الأبيض والأسود، مع عيّنة لونية لكل خطوة وقيمة HEX قابلة للنسخ.
مولّد درجات الألوان — أدخل لونًا أساسيًا واحدًا بصيغة HEX واحصل فورًا على مقياس درجات من 11 خطوة (50، 100، 200 … 900، 950) يُبنى بمزج لونك نحو الأبيض في الخطوات الفاتحة ونحو الأسود في الخطوات الداكنة — بنفس الترقيم الذي يستخدمه Tailwind CSS. تعرض كل خطوة عيّنتها اللونية وقيمة HEX الخاصة بها مع زر نسخ بنقرة واحدة. يعمل كل شيء بالكامل داخل متصفحك؛ ولا يُرسَل أي لون إلى أي خادم على الإطلاق.
ما هي مولّد درجات الألوان؟
مولّد درجات الألوان أداة مجانية على الإنترنت تحوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس كامل من الدرجات الفاتحة والداكنة، مرقّم من 50، 100، 200 حتى 900 و950 تمامًا مثل رموز ألوان Tailwind CSS. يبني التدرّج بمزج لونك الأساسي خطّيًا نحو الأبيض للخطوات الأفتح (50-400) ونحو الأسود للخطوات الأغمق (600-950)، مع إبقاء 500 هو اللون الأساسي نفسه. يستخدمه المصممون ومطوّرو الواجهات الأمامية لتوليد مقياس لوني متّسق لنظام تصميم، وإعداد خصائص CSS المخصّصة أو ألوان سمات Tailwind، واختيار متغيّرات فاتحة/داكنة سهلة الوصول للون العلامة التجارية. تُعرض كل خطوة كعيّنة لونية بجوار قيمة HEX الخاصة بها مع زر نسخ بنقرة واحدة.
كيفية استخدام مولّد درجات الألوان
- اكتب لونًا أساسيًا في حقل اللون الأساسي (HEX) بصيغة #rrggbb أو #rgb، أو انقر على عيّنة منتقي الألوان الكبيرة لاختياره بصريًا.
- يتحدّث المقياس 50-950 فورًا: تُمزج الدرجات الفاتحة (50-400) نحو الأبيض، و500 هو لونك الأساسي، وتُمزج الدرجات الداكنة (600-950) نحو الأسود.
- اقرأ كل صف لترى رقم الخطوة (50 … 950)، وعيّنتها اللونية، وقيمة HEX الخاصة بها جنبًا إلى جنب.
- انقر على زر النسخ في نهاية أي صف لنسخ قيمة HEX لتلك الخطوة إلى الحافظة.
- انسخ قيمة HEX للون الأساسي بزر النسخ المجاور لحقل الإدخال كلما احتجت إلى الخطوة 500 فقط.
أمثلة
الخطوة الأفتح (50) من لون أساسي أزرق
المدخل
#4f86f7
المخرج
#f6f9ff
الخطوة الأغمق (950) من اللون الأساسي نفسه
المدخل
#4f86f7
المخرج
#0b1323
بناء ألوان سمات Tailwind
أدخل لون علامتك التجارية، ثم انسخ الخطوات من 50 إلى 950 واحدة تلو الأخرى إلى لون سمة Tailwind (مثل colors.brand) أو إلى خصائص CSS المخصّصة، لتحصل على مقياس جاهز من الفاتح إلى الداكن يطابق ترقيم درجات Tailwind الافتراضي.
الأسئلة الشائعة
- ما صيغ الألوان التي يمكنني إدخالها؟
- يُدخَل اللون الأساسي كقيمة HEX إما بصيغة #rrggbb (ست خانات) أو بالصيغة المختصرة #rgb (ثلاث خانات). إذا لم تكن القيمة لونًا HEX صالحًا، تظهر رسالة 'Invalid HEX color' ولا يُولَّد أي مقياس. تُعرض كل خطوة في المخرجات كقيمة HEX بصيغة #rrggbb.
- كيف تُحسَب الدرجات؟
- كل خطوة هي مزيج خطّي بين لونك الأساسي والأبيض النقي أو الأسود النقي. تُمزج الخطوات 50-400 نحو الأبيض بنسب متناقصة، والخطوة 500 هي اللون الأساسي دون تغيير، وتُمزج الخطوات 600-950 نحو الأسود بنسب متزايدة. ويطابق الترقيم مقاييس ألوان Tailwind CSS.
- لماذا لا تطابق الخطوة 500 أحيانًا رقم لوني الأساسي بالضبط؟
- الخطوة 500 هي دائمًا لونك الأساسي بالضبط. لا تعيد الأداة توسيط لونك على منحنى سطوع إدراكي، لذا إذا كان إدخالك فاتحًا جدًا أو داكنًا جدًا، فسيكون للنصف الأفتح أو الأغمق من المقياس مدى أقل — اختر لونًا أساسيًا بدرجة متوسطة للحصول على أكثر تدرّج تجانسًا.
- هل يمكنني اختيار لون بصريًا بدلًا من كتابة HEX؟
- نعم. انقر على العيّنة الكبيرة المزوّدة بمنتقي الألوان المدمج لاختيار لون؛ يتحدّث حقل HEX تلقائيًا ويُعاد حساب المقياس 50-950 بالكامل فورًا أثناء تغييرك له.
- هل تُرفع بيانات ألواني إلى أي مكان؟
- لا. يعمل كل شيء بالكامل داخل متصفحك باستخدام حسابات ألوان محلية — ولا تُرسَل أي قيمة لون إلى أي خادم على الإطلاق، فيعمل دون اتصال بالإنترنت ويبقي لوحة ألوانك خاصة.
أدوات ذات صلة
تحويل الكود إلى صورة
حوّل مقتطف كود إلى بطاقة PNG أنيقة بإبراز لتركيب الجملة داخل متصفحك، مع سمة وخلفية متدرجة أو شفافة وحشوة — دون أي رفع.
أداة فحص تباين الألوان
افحص نسبة تباين WCAG بين لون أمامي ولون خلفية بصيغة HEX وتعرّف على ما إذا كانت تجتاز المستويين AA وAAA لكل من النص العادي والنص الكبير.
خالط الألوان
امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.
محاكي عمى الألوان
ارفع صورة وعاين كيف تبدو مع عمى الأحمر (بروتانوبيا) أو عمى الأخضر (ديوتيرانوبيا) أو عمى الأزرق (تريتانوبيا) أو عمى الألوان الكامل، ثم نزّل النتيجة المحاكاة.