ما هو تحويل الألوان؟
كل لون يعرضه متصفحك هو في النهاية ثلاثية sRGB — ثلاثة أرقام بين 0 و 255 لقنوات الأحمر والأخضر والأزرق، بالإضافة إلى قناة ألفا اختيارية. يُعرِّف مواصفة CSS Color Level 4 عدة صيغ نصية تتحول جميعاً إلى الثلاثية نفسها، فضلاً عن فضاء OKLCH الموحَّد إدراكياً. تقرأ هذه الأداة أيّاً منها وتحوِّل إلى جميعها، وتُقدِّم نسبة تباين WCAG 2.1 مع لون ثانٍ لتنشر واجهات يسهل الوصول إليها باطمئنان.
كيف يعمل تحويل الألوان؟
التحويل سلسلة من التحويلات الخطية وغير الخطية المُعرَّفة جيداً. وتجري كل خطوة داخل متصفحك — لا يصل أي إدخال إلى خوادمنا أبداً:
- يُحلَّل إدخالك. تكتشف الأداة تلقائياً صيغة HEX المؤلَّفة من 3 أو 4 أو 6 أو 8 خانات، والصيغ الوظيفية
rgb()/rgba()/hsl()/hsla()/hsv()/hwb()سواء بصيغة الفاصلة التقليدية أو بصيغة الشَرطة المائلة الحديثة لألفا، وأياً من ألوان CSS الـ 150 المسمّاة (بما فيهاrebeccapurple). - يُسوَّى اللون المُحلَّل إلى صيغة sRGB القانونية — أربع قيم عشرية
{r, g, b, a}كل منها في المدى 0–1. هذا هو المصدر الوحيد للحقيقة الذي تُشتق منه كل صيغة خرج. - تأتي صيغة HEX من تقريب كل قناة إلى قيمة بايت في المدى 0–255 وضم خانات النظام السداسي عشري. وتطبع RGB / RGBA البايتات نفسها. وتُطبَّق على HSL و HSV خوارزميات الإحداثيات الأسطوانية القياسية لـ W3C؛ وتشتق HWB التدرّج اللوني من HSV، والبياض من
min(r, g, b)، والسواد من1 - max(r, g, b). - تُعدّ CMYK تقريباً ساذجاً —
k = 1 - max(r, g, b)، ثمc, m, yمن القنوات المتبقية. وهي مناسبة للمعاينة على الشاشة لا للطباعة الفعلية: فالخرج الحقيقي لـ CMYK يتطلب ملف ICC وهو ما لا تتضمّنه هذه الأداة عن قصد. - يسلك OKLCH المسار الأمامي الذي تحدّده css-color-4: تُحوَّل sRGB إلى خطية، ثم تُضرب في مصفوفة LMS، ثم يُحسب الجذر التكعيبي، ثم تُضرب في مصفوفة LMS إلى OKLab، وأخيراً تُحوَّل OKLab المستطيلة إلى OKLCH القطبية. وفضاء OKLCH موحَّد إدراكياً، مما يجعله الفضاء الأنسب لتصميم لوحات ألوان تبدو متوازنة للعين البشرية.
لماذا نستخدم محوِّل الألوان هذا؟
- الخصوصية: يجري كل تحويل داخل متصفحك باستخدام JavaScript عادية. اللون الذي تلصقه لا يغادر جهازك أبداً، وهو ما يهمّ في عمل العلامات التجارية غير المُعلَنة وأنظمة التصميم الداخلية ونماذج العملاء تحت اتفاقيات عدم الإفصاح.
- تسليم المصمِّم إلى المطوِّر: ألصق HEX من Figma واقرأ سلسلة
rgb()لإعداد Tailwind، أو سلسلةhsl()لخاصية CSS مخصَّصة، أو سلسلةoklch()للوحة ألوان حديثة — كل الصيغ في مكان واحد، دون نسخ ولصق بين علامات التبويب. - دقة WCAG: يستخدم فاحص التباين معادلة الإضاءة النسبية الدقيقة من WCAG 2.1 وعتبات AA المنشورة (4.5 / 3.0) و AAA (7.0 / 4.5) للنص العادي والكبير. وتتطابق النسبة المُعلنة مع الحواسيب اليدوية بفارق لا يتجاوز 0.01.
- اشتقاق الوضع الداكن ولوحات الألوان: تكشف HSL و OKLCH السطوع بوصفه قناة واحدة، فيغدو من السهل تحريك لون علامة تجارية لأعلى أو لأسفل على محور السطوع لاشتقاق رموز وضع داكن متطابقة، أو لتوليد سلَّم لوحة ألوان من 10 خطوات من بذرة واحدة.
ما هي التطبيقات الشائعة لتحويل الألوان؟
يظهر تحويل الألوان عبر تطوير الويب والتصميم وعمل إمكانية الوصول:
- أنظمة التصميم: تحويل HEX لعلامة تجارية إلى رموز HSL و OKLCH المتطابقة لسلَّم خصائص CSS مخصَّصة، ثم التحقق من أن كل توليفة رموز تجتاز WCAG AA مقابل خلفية الصفحة.
- تدقيقات إمكانية الوصول: لصق زوج من المقدّمة والخلفية من شاشة منتج حقيقي وقراءة نسبة التباين مع حُكمَي AA/AAA للنص العادي والكبير في نظرة واحدة.
- التنقل بين الأدوات: سحب لون من منتقي لقطة شاشة (HEX)، ولصقه هنا، ونسخ سلسلة
hsl()أوoklch()مباشرة إلى Tailwind أو رموز Figma أو موضوع CSS-in-JS.
كيف يبدو مثال على تحويل الألوان؟
خذ rebeccapurple الشهير. يحلّ بحث الألوان المسمّاة قيمته إلى #663399. ويعطي تحويل RGB rgb(102, 51, 153). ويعطي تحويل HSL hsl(270, 50%, 40%) — تدرّج بنفسجي بنصف تشبّع وأربعة أعشار من السطوع. وفحص هذا اللون مقابل الأبيض النقي بأداة التباين يعيد نسبة قريبة من 7.39، وهي تجتاز AAA (7.0) للنص العادي و AAA (4.5) للنص الكبير — خيار مقدِّمة قوي وسهل الوصول. ودورة كاملة من #663399 عبر RGB ← HSL ← RGB ← HEX تُعيد السلسلة الأصلية تماماً، بايتاً ببايت.
استخدم هذا المحوِّل مرجعاً سريعاً لأي لون تصادفه — في الكود أو في ملفات التصميم أو في لقطة شاشة — واستخدم فاحص التباين فحصاً منطقياً قبل النشر. كل شيء يعمل محلياً، ولا شيء يُسجَّل، ورياضيات التحويل تتبع مواصفات W3C و WCAG المنشورة فتطابق الأرقام ما تعرضه أداة التدقيق أو أدوات مطوِّر المتصفح.