أدوات المطوّرين · 16 أداة

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

اكتب لونًا بصيغة HEX أو RGB أو HSL أو HWB أو OKLCH، أو اختره، لتحصل عليه بكل الصيغ الأخرى. ويوضّح فحص التباين هل يستوفي النص المكتوب فوقه مستويات WCAG.

الإدخال

HEX أو rgb()‎ أو hsl()‎ أو hwb()‎ أو oklch()‎، مع الشفافية أو بدونها

قُرئ بصيغة HEX

النتيجة

  • HEX#2445D6
  • RGBrgb(36, 69, 214)
  • HSLhsl(229, 71%, 49%)
  • HWBhwb(229 14% 16%)
  • OKLCHoklch(47.27% 0.2232 266.62)

التباين (WCAG 2)

  • مع الأبيض

    7.24:1

    • AA: ناجح
    • AA للنص الكبير: ناجح
    • AAA: ناجح
    • AAA للنص الكبير: ناجح

  • مع الأسود

    2.89:1

    • AA: غير ناجح
    • AA للنص الكبير: غير ناجح
    • AAA: غير ناجح
    • AAA للنص الكبير: غير ناجح

  • مع #F5F6F8

    6.70:1

    • AA: ناجح
    • AA للنص الكبير: ناجح
    • AAA: غير ناجح
    • AAA للنص الكبير: ناجح

تعمل هذه الأداة بالكامل داخل متصفحك. لا يُرسل أي شيء تُدخله إلى الخادم.

كيف تحوّل رمز لون؟

  1. أدخل لونًا

    اكتب أو الصق قيمة مثل ‎#2445D6 أو ‎rgb(36, 69, 214)‎ أو ‎oklch(47% 0.22 267)‎، أو استخدم أداة اختيار اللون.

  2. انسخ الصيغة التي تحتاجها

    تُعرض صيغ HEX وRGB وHSL وHWB وOKLCH معًا، ولكل منها زر نسخ خاص.

  3. افحص التباين

    اعرف نسبة التباين مع الأبيض والأسود ومع لون من اختيارك، مع نتائج WCAG للمستويين AA وAAA.

لون واحد بخمس صيغ

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

التباين وWCAG

تشترط WCAG نسبة تباين لا تقل عن 4.5:1 للنص العادي (AA) و7:1 للمستوى AAA. أما النص الكبير، بدءًا من نحو 24px أو 19px بخط عريض، فيحتاج إلى 3:1 للمستوى AA و4.5:1 للمستوى AAA. وتُقرَّب النسب إلى الأدنى، فاللون الذي يظهر ناجحًا ناجح فعلًا.

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

لماذا يبدو لون OKLCH مختلفًا؟

يمكن أن تصف OKLCH ألوانًا لا تستطيع الشاشات ذات نطاق sRGB عرضها. وتُعاد هذه الألوان إلى النطاق بخفض درجة تشبّعها (chroma) مع الإبقاء على الإضاءة ودرجة اللون، وتخبرك ملاحظة عندما يحدث ذلك.

كيف يُفحص تباين الألوان الشفافة؟

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

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

لا. تجري كل التحويلات وفحوص التباين في متصفحك.