تحويل الألوان — HEX إلى RGB وHSL وOKLCH
تحويل HEX وRGB وHSL وOKLCH مع معاينة وفحص تباين WCAG
تعمل في متصفحك · لا يُرفع أي شيء
تم التعرف على اللون: #1e90ff
#1e90ffrgb(30, 144, 255)hsl(209.6, 100%, 55.9%)oklch(0.652 0.1901 253.21)تباين WCAG
3.24:1
- AA نص عادي (4.5)راسب
- AA نص كبير (3)ناجح
- AAA نص عادي (7)راسب
- AAA نص كبير (4.5)راسب
6.49:1
- AA نص عادي (4.5)ناجح
- AA نص كبير (3)ناجح
- AAA نص عادي (7)راسب
- AAA نص كبير (4.5)ناجح
ما هذه الأداة؟
HEX في ملف الأنماط، وRGB في أداة التصميم، وHSL أو OKLCH في لوحة الألوان: قيم الألوان تغيّر شكلها باستمرار. اكتب لونًا بأي من هذه الصيغ، فتعرض لك الأداة HEX وRGB وHSL وOKLCH معًا، وتعاين اللون، وتفحص تباينه مع الخلفيتين البيضاء والسوداء.
طريقة الاستخدام
- اكتب لونًا أو استخدم منتقي الألوان بجانب خانة الإدخال. أمثلة:
#1e90ffوrgb(30 144 255)وhsl(210 100% 56%)وoklch(0.65 0.19 250). - اقرأ قيم HEX وRGB وHSL وOKLCH أدناه وانسخ ما تحتاجه.
- في قسم التباين، راجع النسبة على الأبيض وعلى الأسود، وهل تجتاز مستويي AA وAAA. وإذا كان تصميمك يستخدم خلفية أخرى فاكتبها في لون الخلفية لتفحص هذا الزوج بالضبط.
- اللون الذي فيه شفافية يظهر بصيغة HEX من 8 خانات و
rgba()وhsla()وصيغ/ alpha.
كيف تعمل؟
- يقبل الإدخال HEX (من 3 أو 4 أو 6 أو 8 خانات، و
#اختيارية)، وأسماء الألوان الـ 148 في CSS Color 4 (مثلtomatoوrebeccapurpleبأي حالة أحرف) وtransparent، وrgb()/rgba()(بالفواصل أو بالمسافات، والنسب المئوية مسموحة)، وhsl()/hsla()وoklch(). - يستخدم OKLCH المصفوفات القياسية من تعريف Björn Ottosson لفضاء OKLab (2020). يُحوَّل sRGB إلى قيم خطية، ثم يمر عبر الجذور التكعيبية لـ LMS للحصول على L وa وb، ويكون C طول المتجه (a, b) وH زاويته.
- دقة المخرجات منزلة عشرية واحدة لـ HSL، وأربع منازل لقيمتي L وC في OKLCH، ومنزلتان لـ H، وهذا يكفي لأن يعيد التحويل إلى HEX القيمة الأصلية تمامًا.
- مدخل OKLCH الواقع خارج نطاق sRGB تُقص كل قناة منه إلى 0-255 ويظهر إشعار.
- يتبع التباين الإضاءة النسبية في WCAG 2.x. تُقرَّب النسبة المعروضة إلى منزلتين عشريتين، لكن النجاح أو الإخفاق يعتمد على القيمة غير المقرّبة، فلا تظهر 4.499 أبدًا كنسبة 4.5 ناجحة.
أمثلة
| المدخل | النتيجة |
|---|---|
#ffffff مقابل الأسود |
21:1، يجتاز كل المستويات |
#777777 على الأبيض |
نحو 4.48:1، يخفق في AA للنص العادي ويجتاز للنص الكبير |
#ff0000 |
oklch(0.628 0.2577 29.23) |
#ffffff |
oklch(1 0 0) |
ملاحظات
- لنص المحتوى اعتبر AA للنص العادي (4.5:1) حدًا أدنى. أما النص الكبير، أي 18pt فأكبر أو 14pt بخط عريض، فلا يحتاج إلا إلى 3:1 لمستوى AA.
- لا تعتمد على اللون وحده لنقل المعنى، وأضف أيقونة أو تسمية. ففحص التباين يقيس فرق الإضاءة بين النص والخلفية فقط.
الأسئلة الشائعة
لماذا أستخدم OKLCH؟
في HSL قد يبدو لونان لهما قيمة الإضاءة نفسها مختلفين كثيرًا في السطوع، مما يجعل بناء لوحات الألوان مرهقًا. أما OKLCH فمبني على فضاء الألوان OKLab المصمم وفق الإدراك البشري، فتغيير L (الإضاءة) أو C (التشبع اللوني) أو H (درجة اللون) يعطي خطوات مرئية متقاربة إلى حد كبير. وتقبله CSS مباشرة عبر oklch().
ماذا يحدث إذا كانت قيمة OKLCH خارج نطاق sRGB؟
إذا لم تستطع شاشة sRGB عرضها، تُقص كل قناة RGB إلى المجال 0-255 ويُستخدم أقرب لون مع إشعار بذلك. هذا قص بسيط وليس تعيينًا للنطاق يخفض التشبع تدريجيًا، لذلك قد تختلف النتيجة قليلًا عما قصدته.
كيف تُحسب نسبة التباين؟
بمعادلة الإضاءة النسبية في WCAG 2.x، أي (إضاءة الأفتح + 0.05) مقسومة على (إضاءة الأغمق + 0.05)، وتتراوح من 1:1 إلى 21:1. يحتاج النص العادي إلى 4.5:1 لمستوى AA و7:1 لمستوى AAA، ويحتاج النص الكبير إلى 3:1 و4.5:1.
كيف تُعامل الألوان شبه الشفافة في حساب التباين؟
تُدمج أولًا فوق الخلفية المختارة (أبيض أو أسود). فاللون الأسود بشفافية 50% على الأبيض يبدو رماديًا، لذلك تُحسب النسبة لذلك الرمادي.
