محوّل ألوان CSS
حوّل أي لون CSS بين HEX وRGB وHSL مع معاينة مباشرة ونسب التباين مقابل النص الأبيض والأسود.
المدخل
التحويلات
لماذا تهم صيغ الألوان
يمكن كتابة اللون نفسه بعدة طرق في CSS. تسلّم أدوات التصميم عادةً رموز HEX. أما RGB فمفيد حين تحتاج إلى الشفافية عبر rgb() أو rgba(). ويصف HSL اللون بدرجته وتشبّعه وسطوعه، مما يسهّل إنشاء درجات أفتح وأغمق من لون العلامة التجارية. التحويل الدقيق بينها يحافظ على اتساق رموز التصميم لديك.
كيفية استخدام المحوّل
الصق قيمة HEX أو RGB أو HSL، أو اختر لونًا بأداة اختيار الألوان. تعرض الأداة اللون بالصيغ الثلاث مع معاينة، ويمكنك نسخ أي منها بنقرة واحدة. كما تعرض نسبة التباين مع النص الأبيض والأسود باستخدام معادلة WCAG 2، فترى بنظرة واحدة أي لون للنص يكون مقروءًا عليه.
قراءة شارات التباين
- AAA: نسبة 7:1 أو أكثر، وهي المستوى الأكثر صرامة للنص العادي.
- AA: نسبة 4.5:1 أو أكثر، وهي الهدف المعتاد لنص المتن.
- AA للنص الكبير فقط: نسبة 3:1 أو أكثر، مناسبة للعناوين الكبيرة لا لنص المتن.
الأسئلة الشائعة
هل يجب أن أستخدم HEX أم HSL في CSS؟
كلاهما يعمل في كل المتصفحات الحديثة. HEX مختصر للقيم الثابتة. وHSL أسهل حين تريد تعديل السطوع أو التشبع، مثلًا لإنشاء حالات التمرير أو لوحة من الدرجات الفاتحة.
لماذا يتغير اللون قليلًا عند التحويل ذهابًا وإيابًا؟
تُقرَّب قيم HSL هنا إلى أعداد صحيحة، لذا قد يؤدي التحويل ذهابًا وإيابًا إلى إزاحة إحدى القنوات بدرجة واحدة. الفرق غير مرئي، لكن اعتمد قيمة HEX أو RGB كمرجع أساسي.
هل تدعم الأداة الشفافية؟
تقرأ قيم rgba() وhsla() لكنها تتجاهل قناة ألفا، لأن حساب التباين وتحويل HEX هنا مخصصان للألوان المصمتة.