مولّد درجات الألوان

حوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس OKLCH أو HSL أو RGB بخطوات قابلة للتعديل، وتلميحات تباين WCAG لكل خطوة، وتصدير إلى CSS وTailwind وJSON.

جارٍ تحميل الأداة…

مولّد درجات الألوان — أدخل لونًا أساسيًا واحدًا بصيغة HEX وابنِ فورًا مقياسًا كاملًا باستخدام استيفاء متساوٍ إدراكيًا في OKLCH أو HSL — درجة لون ثابتة مع توزيع سطوع متساوٍ — أو المزج الخطي التقليدي بصيغة RGB، بأي عدد من الخطوات تريده. اضبط درجة اللون والتشبّع، واقرأ لكل خطوة تلميح تباين WCAG الذي يبيّن أي الدرجات تظل مقروءة كنص على الأبيض وعلى الأسود، وانسخ المقياس كله كخصائص CSS مخصّصة أو إعداد ألوان Tailwind أو JSON. يعمل كل شيء بالكامل داخل متصفحك؛ ولا يُرسَل أي لون إلى أي خادم على الإطلاق.

ما هي مولّد درجات الألوان؟

مولّد درجات الألوان يحوّل لونًا أساسيًا واحدًا بصيغة HEX إلى مقياس كامل من الدرجات الفاتحة والداكنة جاهز لنظام تصميم. فبدلًا من المزج خطّيًا في RGB فقط، يمكنه الاستيفاء في OKLCH أو HSL بحيث تبقى درجة اللون ثابتة ويُوزَّع السطوع بالتساوي، فينتج تدرّج متوازن إدراكيًا بلا خطوات باهتة أو مغسولة. أنت تختار عدد الخطوات — من 2 إلى 24، أو قائمة تسميات مخصّصة مفصولة بفواصل — وتزيح درجة اللون أو تضبط التشبّع، وتقرأ لكل خطوة تلميح تباين WCAG الذي يبيّن أي الدرجات تصلح كنص على الأبيض وعلى الأسود. ويُنسخ المقياس المكتمل كخصائص CSS مخصّصة أو ككائن إعداد ألوان Tailwind أو JSON بنقرة واحدة.

كيفية استخدام مولّد درجات الألوان

  1. اكتب لونًا أساسيًا في حقل اللون الأساسي (HEX) بصيغة #rrggbb أو #rgb، أو انقر على العيّنة الكبيرة لاختياره بصريًا.
  2. اختر مساحة لون: OKLCH أو HSL للحصول على تدرّج متساوٍ إدراكيًا بدرجة لون ثابتة، أو RGB للمزج الخطي التقليدي.
  3. حدّد عدد الخطوات الذي تريده (2–24)، أو افتح الإعدادات لإدخال قائمة خطوات مخصّصة مفصولة بفواصل، وإزاحة درجة اللون، وضبط التشبّع، وتعيين اسم اللون للتصدير.
  4. اقرأ خليّتي التباين في كل صف — الحرف A على الأبيض وعلى الأسود — اللتين تُبرَزان عندما تحقّق تلك الدرجة معيار WCAG AA للنص.
  5. انسخ قيمة HEX لخطوة واحدة، أو انسخ المقياس كله كمتغيّرات CSS أو إعداد Tailwind أو JSON بأزرار النسخ.

أمثلة

تدرّج OKLCH متساوٍ من أزرق العلامة

اختر OKLCH وأبقِ 11 خطوة: يوزّع المقياس 50–950 السطوع بالتساوي مع الحفاظ على درجة اللون الزرقاء، فلا تبدو أي خطوة باهتة أو مغسولة كما قد يحدث مع المزج الخطي بصيغة RGB.

إعداد Tailwind مخصّص من خمس خطوات

أدخل 100 و300 و500 و700 و900 كقائمة خطوات مخصّصة لإخراج خمس عيّنات فقط، ثم انسخها ككائن ألوان Tailwind تكون تلك التسميات مفاتيحه، أو كمتغيّرات CSS وJSON.

الأسئلة الشائعة

ما الفرق بين خيارات RGB وHSL وOKLCH؟
يمزج RGB لونك خطّيًا نحو الأبيض والأسود، وهو سريع لكنه قد يبدو غير متساوٍ في الدرجات المتوسطة. أما HSL وOKLCH فيبقيان درجة اللون ثابتة ويوزّعان السطوع بالتساوي؛ وOKLCH متساوٍ إدراكيًا، فتبدو كل خطوة قفزة سطوع متساوية. اختر OKLCH للحصول على أكثر تدرّج توازنًا.
كم درجة يمكنني توليدها، وهل يمكنني تسميتها؟
حدّد أي عدد خطوات من 2 إلى 24. العدد 11 يستخدم ترقيم Tailwind المألوف (50، 100…900، 950)؛ وتوزَّع الأعداد الأخرى بالتساوي من 50 إلى 950. كما يمكنك كتابة قائمة تسميات مخصّصة مفصولة بفواصل في الإعدادات، فتتجاوز عدد الخطوات وتسمّي كل خطوة تمامًا كما تكتبها.
كيف يُحسَب تلميح تباين WCAG؟
لكل درجة تحسب الأداة نسبة تباين WCAG مقابل الأبيض النقي والأسود النقي انطلاقًا من السطوع النسبي. تعرض الخليّتان الصغيرتان في كل صف الحرف A على الأبيض وعلى الأسود، وتُبرَزان عندما تبلغ النسبة 4.5:1 (AA للنص العادي)؛ مرّر المؤشر لرؤية النسبة الدقيقة وما إذا كانت AA أو AAA.
هل تُرفع بيانات ألواني إلى أي مكان؟
لا. تُنفَّذ حسابات الألوان وفحوص التباين والتصديرات الثلاثة بالكامل داخل متصفحك، فلا تُرسَل أي قيمة لون إلى أي خادم. تعمل الأداة دون اتصال وتبقي لوحة ألوانك خاصة.

أدوات ذات صلة

تحويل الكود إلى صورة

حوّل مقتطف كود إلى صورة بإبراز لتركيب الجملة داخل متصفحك، مع أكثر من 20 لغة وسمات وخلفيات مخصّصة وأرقام أسطر وتصدير PNG أو SVG.

أداة فحص تباين الألوان

افحص تباين WCAG 2.1 ودرجة APCA Lc بين لون النص ولون الخلفية، وشاهد شارات AA وAAA و3:1، وطبّق أقرب لون ناجح.

خالط الألوان

امزج لونين بصيغة HEX بنسبة تختارها في فضاء RGB أو Lab، واقرأ اللون الوسطي الناتج كعينة وقيمة HEX قابلة للنسخ.

محاكي عمى الألوان

ارفع صورة وعاين كيف تبدو مع عمى الأحمر (بروتانوبيا) أو عمى الأخضر (ديوتيرانوبيا) أو عمى الأزرق (تريتانوبيا) أو عمى الألوان الكامل، ثم نزّل النتيجة المحاكاة.