محوّل الألوان

اكتب اللون بأي صيغة معروفة — ‎#1f5fd6‎ أو 1f5fd6 أو ‎#1f5‎ أو rgb(31, 95, 214) — لتظهر بقية الصيغ دفعةً واحدة، ومعها أرقام التباين اللازمة لنصّ مقروء.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

التباين:

طريقة الاستخدام

معلومات مفيدة

ثلاث صيغ للّون نفسه

‏HEX مختصرة وشائعة في CSS. أما RGB فتسمّي القنوات صراحةً، وهذا مهم حين تُحسَب القيمة بدل كتابتها يدويًا. و HSL تصف درجة اللون والتشبّع والإضاءة، وهي الصيغة المناسبة حين تريد اللون نفسه أفتح قليلًا، إذ تُغيّر رقمًا واحدًا بدل تخمين ثلاثة.

التباين ليس زخرفة

وفق معايير WCAG يحتاج النص العادي إلى نسبة 4.5:1 على الأقل مع الخلفية، والنص الكبير إلى 3:1. الرقمان المعروضان هنا يخبرانك فورًا إن كان هذا اللون يحتمل نصًّا أبيض أو أسود أو لا يحتمل أيًّا منهما — قبل أن يصل التصميم إلى المطوّر.

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

ما الصيغ المقبولة؟

‏HEX بثلاثة وأربعة وستة وثمانية أرقام، مع علامة # أو بدونها، إضافةً إلى rgb() و rgba() بفواصل أو مسافات. تُحفَظ قيمة الشفافية وتظهر ضمن قيمة HEX.

لماذا يظهر HSL أحيانًا بلون مختلف قليلًا؟

تُقرَّب قيم HSL إلى أعداد صحيحة لتسهيل القراءة، فقد تنزاح قناة بمقدار وحدة عند العودة. أما HEX و RGB فدقيقتان.

هل يُرسَل شيء إلى خادم؟

لا. كل الحسابات تجري في الصفحة، فتبقى ألوان هوية لم تُنشر بعد على جهازك.

أدوات ذات صلة