العربية
حوّل بين HEX وRGB وHSL وOKLCH مع معاينة حيّة.
Last updated
#B18CFFrgb(177, 140, 255)hsl(259, 100%, 77%)oklch(72.2% 0.165 296.9)محوّل الألوان يأخذ لوناً مكتوباً بأي صيغة شائعة — HEX أو RGB أو HSL أو OKLCH — ويعرض لك بقية الصيغ التي تمثّل اللون نفسه. هو الأداة اليومية للمصممين والمطوّرين عند ضبط ألوان الهوية البصرية، أو تتبّع متغيّرات CSS، أو مقارنة لوحات ألوان الوضع الفاتح والداكن، أو التحقق من تباين إمكانية الوصول.
تدعم CSS عدة نماذج ألوان، ولكلٍّ منها نقاط قوة. صيغتا HEX و RGB تصفان اللون بدلالة كثافات الضوء الأحمر والأخضر والأزرق. أما HSL فأكثر بداهة (درجة اللون، الإشباع، السطوع). و OKLCH نموذج إدراكي، أي أن تغييراً رقمياً متساوياً ينتج عنه تغيير بصري متساوٍ تقريباً — وهذا ما يجعله مثالياً لتوليد درجات تفتيح وتعتيم ولوحات ألوان متاحة للجميع.
إمكانية الوصول مرتبطة بالتباين، لا باللون وحده. تحدّد معايير WCAG نسبة تباين بين النص والخلفية — 4.5:1 على الأقل لنص المحتوى العادي، و 3:1 للعناوين الكبيرة. الأداة الجيدة تعرض الرقمين بجوار لونك حتى لا تُطلق واجهة غير قابلة للقراءة دون أن تنتبه.
#ff8800 تعادل تماماً rgb(255, 136, 0).L بنسبة 10% تعطي تغييراً في السطوع يبدو متساوياً تقريباً مع أي درجة لون. أما HSL فلا يلتزم بهذا السلوك.الصق أي قيمة HEX أو RGB أو HSL أو OKLCH، أو التقط لوناً عبر القطّارة أو منتقي الألوان الأصلي للمتصفح.
يعرض المحوّل اللون نفسه مكتوباً بكل الصيغ المدعومة. اضغط على أي قيمة لنسخها إلى الحافظة.
اسحب منزلق السطوع للحصول على تفتيح (أفتح) أو تعتيم (أغمق). استخدم سطوع OKLCH للحصول على خطوات متناسقة بصرياً.
تعرض لوحة التباين نسبة WCAG مقابل الأبيض والأسود معاً. استهدف ≥ 4.5 لنص المحتوى و ≥ 3 للعناوين الكبيرة.
استخدم الصيغة المتوافقة مع مشروعك — HEX لرموز التصميم (design tokens)، و OKLCH للوحات الحديثة، و HSL حين تريد التعديل عبر calc().
الصيغ الخمس التي ستقابلها يومياً، مع أمثلة لنفس اللون. مرجع كامل لصياغة الألوان على صفحة <color> في MDN.
| الصيغة | البنية | مثال (برتقالي) |
|---|---|---|
| HEX | #RRGGBB أو #RGB | #ff8800 |
| HEX مع قناة ألفا | #RRGGBBAA | #ff880080 (شفافية 50%) |
rgb() | أحمر وأخضر وأزرق من 0 إلى 255 | rgb(255 136 0) |
rgb() مع ألفا | صياغة الشرطة المائلة الحديثة | rgb(255 136 0 / 0.5) |
hsl() | Hue من 0 إلى 360°، Saturation و Lightness من 0 إلى 100% | hsl(32 100% 50%) |
oklch() | Lightness من 0 إلى 100%، ثم Chroma و Hue | oklch(74% 0.18 50) |
| اسم اللون | اسم لون معرّف في CSS (147 لوناً) | darkorange |
color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);كل التصاريح الأربعة تنتج اللون الأزرق نفسه بالضبط. اختيار صيغة دون أخرى لرموز تصميمك يعتمد أساساً على الطريقة التي تنوي تعديلها بها لاحقاً.
--brand: oklch(67% 0.16 268);--brand-light: oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark: oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);بتثبيت درجة اللون (268) والـ Chroma، وتحريك الـ Lightness خطوة خطوة، نحصل على لوحة متّسقة تبدو فيها كل خطوة *بصرياً* بنفس مقدار التغيير — وهذا ما لا يضمنه HSL.
background: rgb(108 140 255 / 0.5);background: #6c8cff80;تعبير / 0.5 هو الطريقة الحديثة في CSS لإضافة قناة ألفا. أما صيغة HEX فتُلحق بايت ألفا من خانتين (80 ≈ 50%).
hsl(60 100% 50%) (أصفر) واللون hsl(240 100% 50%) (أزرق) لهما نفس قيمة L لكن السطوع المُدرك بينهما مختلف جداً — استخدم OKLCH للمقارنات البصرية.#abc) ليست إلا اختصاراً للصيغة من ست خانات (#aabbcc).rgba(...) بدلاً من الصياغة الحديثة rgb(... / alpha) — كلاهما يعمل، لكن صيغة الشرطة المائلة هي المعيار الحالي وأسهل قراءة في الأدوات.#RR و GG و BB)، ثم حوّل كل زوج من النظام الست عشري إلى العشري. أو الصق القيمة في محوّل ألوان واقرأ نتيجة RGB مباشرة.L لا يعني تساوي السطوع المُدرك. أما OKLCH فموحّد إدراكياً، ولذلك هو الأنسب لتوليد درجات تفتيح وتعتيم متّسقة ولوحات ألوان متاحة للجميع.