محوّل الألوان: HEX وRGB وHSL وHSV وHWB وCMYK وLAB وOKLCH

حوّل أي لون بين HEX وRGB وHSL وHSV وHWB وCMYK وCIELAB وOKLCH، واطّلع على اسمه في CSS وتباين WCAG على الأبيض والأسود. مجاني داخل متصفحك.

يقبل HEX (#rgb و#rrggbb و#rrggbbaa) وrgb()/rgba() وhsl()/hsla() وhsv() وhwb() وcmyk() وlab() وoklch() وأسماء ألوان CSS الـ148.

اسم CSS: dodgerblue
HEX#1e90ff
RGBrgb(30, 144, 255)
HSLhsl(209.6, 100%, 55.9%)
HSV / HSBhsv(209.6, 88.2%, 100%)
HWBhwb(209.6 11.8% 0%)
CMYKcmyk(88.2%, 43.5%, 0%, 0%)
CIELABlab(58.36% 0.89 -64.78)
OKLCHoklch(65.2% 0.1901 253.21)
Aa
التباين على الأبيض
3.23:1
AA نص عادي (4.5:1) ✗AA نص كبير (3:1) ✓AAA نص عادي (7:1) ✗
Aa
التباين على الأسود
6.48:1
AA نص عادي (4.5:1) ✓AA نص كبير (3:1) ✓AAA نص عادي (7:1) ✗

يستخدم CIELAB النقطة البيضاء D50 كما في CSS Color 4. تُقرَّب القيم عند العرض فقط، والتحويلات بدقة كاملة. تُتجاهَل الشفافية في CMYK وHSV والتباين.

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

الصق لونًا بأي صيغة شائعة لتحصل عليه في ثمانية نماذج لونية دفعة واحدة: HEX وRGB(A) وHSL(A) وHSV وHWB وCMYK وCIELAB وOKLCH. وتعرض الأداة أيضًا اسم اللون المطابق في CSS (إن وُجد اسم مطابق تمامًا) ونسبة تباين WCAG للون على الأبيض وعلى الأسود.

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

  1. اكتب لونًا أو الصقه في اللون (بأي صيغة) مثل #1e90ff أو rgb(30 144 255) أو hsl(210 100% 56%) أو oklch(65% 0.19 253) أو tomato، أو اخترْه بأداة انتقاء اللون.
  2. اقرأ القيم المحوّلة في قائمة النتائج؛ ولكل صف زر نسخ خاص به.
  3. راجع اسم CSS لمعرفة اسم اللون المطابق تمامًا، وبطاقتي التباين على الأبيض / الأسود لنتائج WCAG بمستوى AA وAAA.
  4. إذا كانت قيمة LAB أو OKLCH خارج نطاق sRGB، يخبرك تحذير بأنها قُصّت إلى أقرب لون قابل للعرض.

مثال

الإدخال
#ff0000
الإخراج
rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red

التباين على الأبيض 3.99:1، فالأحمر الصافي يخفق في WCAG AA للنص العادي.

متى تستخدم محوّل الألوان

استخدمها عند نقل الألوان بين أدوات التصميم وCSS، أو حين تحتاج نموذجًا إدراكيًا مثل OKLCH لبناء لوحات الألوان، أو للتحقق السريع من تباين النص. لا تستخدم ناتج CMYK للبروفات الطباعية الاحترافية: فالطباعة الفعلية تحتاج ملف تعريف ألوان ICC تتجاهله هذه الصيغة البسيطة.

كيف يعمل محوّل الألوان

يُحلَّل كل إدخال إلى قنوات sRGB مرمّزة بـ gamma مع ألفا. HSL وHSV وHWB هي التحويلات الأسطوانية القياسية لـ sRGB؛ وCMYK هي الصيغة البسيطة المستقلة عن الجهاز K = 1 − max(R,G,B). وبالنسبة إلى LAB تُحوَّل قيم sRGB إلى الخطية ثم إلى CIE XYZ (D65) وتُكيَّف لونيًا إلى D50 بمصفوفة Bradford وتتحول إلى CIELAB تمامًا كما في CSS Color 4. ويستخدم OKLCH مصفوفات OKLab لـ Björn Ottosson على sRGB الخطي. تُقرَّب القيم للعرض فقط (أعداد صحيحة لـ RGB ورقم عشري واحد لـ HSL/HSV/HWB/CMYK ورقمان لـ LAB). ويتبع التباين اللمعان النسبي في WCAG 2.x: (L1 + 0.05) / (L2 + 0.05).

حالات الاستخدام الشائعة

  • تحويل رمز HEX لعلامة تجارية من دليل الأسلوب إلى hsl() أو oklch() لمتغيرات CSS
  • تحويل قيمة rgba() من أدوات المطور إلى HEX من 8 خانات مع ألفا
  • التحقق من اجتياز لون النص مستوى WCAG AA (4.5:1) على خلفية بيضاء
  • إيجاد كلمة CSS المفتاحية لقيمة HEX مثل #663399 (rebeccapurple)
  • الحصول على نسب CMYK تقريبية لطباعة مكتبية

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

لماذا تختلف قيمة LAB عن Photoshop؟

تتبع هذه الأداة CSS Color 4 الذي يستخدم نقطة البياض D50 مع تكييف Bradford. وبعض التطبيقات تعرض LAB نسبةً إلى D65 فتعطي أرقامًا مختلفة قليلًا.

ماذا يعني «خارج نطاق sRGB»؟

يمكن لـ LAB وOKLCH وصف ألوان لا تستطيع شاشة sRGB العادية عرضها. تُقصّ هذه المدخلات قناة قناة إلى أقرب لون قابل للعرض، ويخبرك التحذير بأن قيم HEX/RGB تقريبية.

كيف تُقرَّب نسبة التباين؟

تُقتطع إلى منزلتين عشريتين ولا تُقرَّب للأعلى، حتى لا تظهر النسبة 4.499 كأنها اجتازت 4.5:1.

هل تُحفظ ألفا في كل الصيغ؟

تُحفظ ألفا في HEX (8 خانات) وrgba() وhsla() وHWB وLAB وOKLCH. أما HSV وCMYK فلا قناة ألفا فيهما، ويُحسب التباين للون المعتم.

استكشف المزيد من الفئات

CRC
خوارزميات التحقق من التكرار الدوري لاكتشاف الأخطاء
MD
خوارزميات ملخص الرسالة (MD2، MD4، MD5)
SHA-1
خوارزمية التجزئة الآمنة 1 - دالة تجزئة 160 بت
SHA-2
عائلة خوارزمية التجزئة الآمنة 2 (SHA-224، SHA-256، SHA-384، SHA-512)