TF

التصميم وCSS

محوّل الألوان وفاحص التباين

حوّل الألوان بين HEX وRGB وHSL وHSV وHWB وCMYK وOKLCH، وافحص تباين WCAG لنص سهل القراءة.

‏HEX أو rgb()‎ أو hsl()‎ أو hsv()‎ أو hwb()‎ أو cmyk()‎ أو oklch()‎ أو اسم CSS مثل tomato.

  • HEX#0f766e
  • RGBrgb(15 118 110)
  • HSLhsl(175 77% 26%)
  • HSV / HSBhsv(175 87% 46%)
  • HWBhwb(175 6% 54%)
  • CMYKcmyk(87% 0% 7% 54%)
  • OKLCHoklch(51.1% 0.086 186.4)

درجات فاتحة وداكنة

ما هذه الأداة؟

الصق لونًا بأي صيغة — ‎#ff6347 أو rgb(255 99 71) أو hsl(9 100% 64%) أو ببساطة tomato — وانسخه بكل الصيغ الأخرى. وانتقل إلى فاحص التباين لاختبار ألوان النص والخلفية وفق WCAG 2 والحصول على أقرب لون ناجح عند فشل الزوج.

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

تتراوح نسب تباين WCAG بين 1:1 و21:1. يحتاج النص العادي إلى 4.5:1 على الأقل لمستوى AA و7:1 لمستوى AAA، ويحتاج النص الكبير (24px أو 18.66px عريض) وعناصر الواجهة إلى 3:1. تُمزج ألوان النص شبه الشفافة مع الخلفية قبل القياس.

كيفية استخدام محوّل الألوان وفاحص التباين

  1. اكتب لونًا أو الصقه، أو اختره من منتقي الألوان.
  2. انسخ الصيغة التي تحتاجها: HEX أو RGB أو HSL أو HSV أو HWB أو CMYK أو OKLCH أو اسم اللون في CSS.
  3. انقر درجة فاتحة أو داكنة لاستكشاف تنويعات اللون نفسه.
  4. افتح فاحص التباين، وحدّد لوني النص والخلفية، وشاهد إن كانا يجتازان WCAG AA وAAA.
  5. إن فشل الزوج، استخدم اللون المقترح — فهو يحافظ على درجة اللون ويعدّل السطوع.

أمثلة

اللون tomato بصيغ أخرى

tomato
#ff6347
rgb(255 99 71)
hsl(9 100% 64%)

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

كيف أحوّل HEX إلى RGB؟

الصق رمز HEX مثل ‎#3366cc وانسخ سطر RGB: ‏rgb(51 102 204). كل زوج من الأرقام الست عشرية يمثّل قناة من 0 إلى 255.

ما نسبة التباين التي أحتاجها؟

للنص الأساسي 4.5:1 على الأقل (WCAG AA). تحتاج العناوين الكبيرة والأيقونات إلى 3:1. واستهدف 7:1 (AAA) للقراءة الطويلة أو لضعاف البصر.

هل تحويل CMYK دقيق للطباعة؟

إنه تقريب مستقل عن الجهاز. تعتمد نتيجة الطباعة الفعلية على الورق وملف تعريف الطابعة، لذا استخدم ملف الألوان الخاص بالمطبعة للتصاميم النهائية.

ما هي OKLCH؟

تصف OKLCH الألوان بالسطوع والتشبّع وزاوية اللون في مساحة متجانسة إدراكيًا. يدعمها CSS الحديث وتسهّل بناء لوحات ألوان متناسقة.

هل تحتاج إلى مزايا أكثر لاحقًا؟

الأدوات المميزة والحدود الأعلى والوصول عبر واجهة برمجية ضمن خططنا القادمة. يبقى الإصدار الأول مجانيًا وخاصًا داخل متصفحك.