دوال الألوان الحديثة في CSS: rgba()، hsl()، oklch()، وما بعدها
دوال الألوان الحديثة في CSS: rgba()، hsl()، oklch()، وما بعدها
تطورت دوال الألوان في CSS بشكل كبير. ما كان في السابق خيارًا بين hex و rgb() و hsl() أصبح الآن نظامًا بيئيًا غنيًا من فضاءات الألوان ودوال المعالجة التي تمنح المطورين تحكمًا غير مسبوق في تمثيل الألوان، والاستيفاء، وإمكانية الوصول.
يغطي هذا الدليل كل دالة ألوان رئيسية في CSS متاحة في عام 2026، من المألوف إلى المتطور.
RGB و RGBA: الأدوات الأساسية
تعرف دالة rgb() الألوان باستخدام نموذج الألوان الجمعي الأحمر-الأخضر-الأزرق. وهي جزء من CSS منذ CSS1 وتدعمها جميع المتصفحات على الإطلاق.
/* الصيغة القديمة المفصولة بفواصل */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
/* الصيغة الحديثة المفصولة بمسافات (CSS Color Level 4) */
color: rgb(255 0 0);
color: rgb(255 0 0 / 0.5);
/* القيم المئوية */
color: rgb(100% 0% 0%);
التغييرات الرئيسية في RGB الحديثة
قدم CSS Color Level 4 تحسينين مهمين:
- مفصولة بمسافات بدلاً من الفواصل — تقبل دالة
rgb()الآن القيم المفصولة بمسافات أو شرطات مائلة - صيغة ألفا الموحدة — الاسم المستعار
rgba()أصبح مهملاً (ولكنه لا يزال مدعومًا).rgb()الآن تقبل قناة ألفا بشكل أصلي
هذه الصيغة الحديثة مدعومة في جميع المتصفحات التي صدرت منذ عام 2020. بالنسبة للمشاريع الجديدة، استخدم الصيغة الحديثة وتخط الاسم المستعار rgba() تمامًا.
قنوات RGB
تقبل كل قناة RGB:
- عددًا صحيحًا من 0 إلى 255
- نسبة مئوية من 0% إلى 100%
- الكلمة المفتاحية
noneللقنوات المفقودة (CSS Color Level 4)
الكلمة المفتاحية none مفيدة عند استيفاء الألوان — فهي تخبر المتصفح بعدم استيفاء تلك القناة المحددة.
HSL و HSLA: تحكم لوني بديهي
HSL تعني Hue (درجة اللون)، Saturation (التشبع)، Lightness (الإضاءة). تستخدم نظام إحداثيات أسطواني يتوافق بشكل طبيعي مع كيفية تفكير البشر في اللون.
/* H هي زاوية الدرجة (0-360)، S هي التشبع (0-100%)، L هي الإضاءة (0-100%) */
color: hsl(0 100% 50%); /* أحمر نقي */
color: hsl(0 100% 50% / 0.5); /* أحمر بشفافية 50% */
/* زوايا الدرجة مع وحدات */
color: hsl(0deg 100% 50%);
color: hsl(0rad 100% 50%);
color: hsl(0grad 100% 50%);
color: hsl(0turn 100% 50%);
مرجع زاوية الدرجة
| الدرجة | اللون | Hex |
|-----|---------|----------|
| 0 | أحمر | #FF0000 |
| 30 | برتقالي | #FF8000 |
| 60 | أصفر | #FFFF00 |
| 120 | أخضر | #00FF00 |
| 180 | سماوي | #00FFFF |
| 240 | أزرق | #0000FF |
| 300 | أرجواني | #FF00FF |
HSL هو الخيار الأفضل لتوليد لوحات الألوان برمجيًا لأن تغيير قناة الإضاءة أو التشبع فقط ينتج متغيرات بصرية متسقة.
HWB: المزج مع الأبيض والأسود
HWB (درجة اللون، البياض، السواد) هو بديل أكثر بديهية لـ HSL. تختار درجة لون، ثم تضيف البياض والسواد لإنشاء التفتيح والتظليل.
color: hwb(0 0% 0%); /* أحمر نقي */
color: hwb(0 40% 0%); /* أحمر مفتّح (أضيف الأبيض) */
color: hwb(0 0% 40%); /* أحمر مظلل (أضيف الأسود) */
color: hwb(0 20% 20%); /* درجة لونية (أبيض + أسود) */
HWB أبسط من HSL لحالة استخدام محددة: إنشاء متغيرات تفتيح وتظليل للون العلامة التجارية. لا تحتاج أبدًا إلى التفكير في منحنيات التشبع — فقط أضف الأبيض أو الأسود.
دعم المتصفح: HWB مدعوم في جميع المتصفحات الحديثة (Chrome 101+، Firefox 96+، Safari 15+).
LAB و LCH: فضاءات موحدة إدراكيًا
LAB (الإضاءة، المحور A، المحور B) و LCH (الإضاءة، الصفاء، الدرجة) هما فضاءات ألوان موحدة إدراكيًا. هذا يعني أن المسافة الإقليدية بين قيمتي لون تتوافق مع الفرق البصري المُدرَك — وهو ما لا تستطيع RGB و HSL فعله.
color: lab(50% 50 0); /* أحمر متوسط */
color: lch(50% 50 0); /* نفس اللون بالصيغة الأسطوانية */
أهمية التوحيد الإدراكي:
- التدرجات — ينتج الاستيفاء في LAB أو LCH انتقالات سلسة وطبيعية بدون "المنطقة الموحلة" الباهتة التي تنتجها تدرجات RGB
- قياس فرق اللون — Delta E (مقياس الفرق الإدراكي) ذو معنى في فضاء LAB
- إمكانية الوصول — يساعد التوحيد الإدراكي في التنبؤ بكيفية إدراك المستخدمين ذوي نقص رؤية الألوان للألوان
القيود: يمكن لـ LAB و LCH إنتاج ألوان خارج نطاق sRGB. سيتم قص هذه الألوان عند عرضها على شاشات sRGB ولكنها متاحة على الشاشات ذات النطاق الأوسع (DCI-P3، Rec. 2020).
دعم المتصفح: مدعوم في Chrome 111+، Firefox 113+، Safari 15+. لا يوجد دعم لـ IE أو Edge القديم.
OKLAB و OKLCH: المعيار الإدراكي الحديث
OKLCH هو نسخة محسنة من LCH طورها Bjorn Ottosson. تعالج عدم التوحيد الإدراكي في LCH، خاصة لدرجات اللون الأزرق. أصبحت OKLCH فضاء الألوان الافتراضي الموصى به لمشاريع CSS الجديدة في 2025-2026.
color: oklch(60% 0.2 30);
/* الإضاءة: 0-100%، الصفاء: 0-~0.4، الدرجة: 0-360 */
لماذا OKLCH هو أفضل فضاء ألوان لـ CSS
- أفضل توحيد إدراكي — التغييرات الرقمية المتساوية تنتج تغييرات بصرية متساوية عبر جميع الدرجات
- إضاءة قابلة للتنبؤ — الألوان عند نفس قيمة الإضاءة تبدو بالفعل متساوية في السطوع
- لا تدرجات موحلة — يبقى الاستيفاء نظيفًا عبر نطاق الدرجة بأكمله
- آمن لـ sRGB افتراضيًا — معظم قيم OKLCH تنتج ألوان sRGB داخل النطاق
- قنوات بديهية — مثل HSL ولكن بدقة إدراكية فعلية
OKLCH في الممارسة العملية
/* إنشاء مقياس ألوان متوازن باستخدام OKLCH */
--blue-100: oklch(95% 0.02 250);
--blue-300: oklch(75% 0.08 250);
--blue-500: oklch(55% 0.15 250);
--blue-700: oklch(35% 0.10 250);
--blue-900: oklch(15% 0.04 250);
لاحظ أن كل خطوة تتغير بقيمة إضاءة متساوية تقريبًا (20 نقطة مئوية). لأن OKLCH موحد إدراكيًا، تظهر هذه الخطوات متباعدة بشكل متساوٍ للعين البشرية — وهو أمر يصعب تحقيقه مع HSL.
دعم المتصفح: OKLCH مدعوم في Chrome 111+، Firefox 113+، Safari 15.4+. أصبح بسرعة أكثر فضاء ألوان حديث موصى به.
Color-Mix: مزج الألوان في CSS
تمزج دالة color-mix() لونين في فضاء لوني محدد:
/* مزج الأحمر والأزرق بالتساوي في sRGB */
color: color-mix(in srgb, red, blue);
/* 30% أساسي، 70% أبيض — تفتيح */
color: color-mix(in oklch, var(--primary) 30%, white);
/* المزج مع فضاء لوني مُدرَك للحصول على نتائج سلسة */
background: color-mix(in oklch, var(--accent) 20%, var(--surface));
يتيح لك معامل in <color-space> التحكم في فضاء الاستيفاء. في معظم الحالات، ينتج in oklch أفضل النتائج البصرية.
حالات الاستخدام:
- إنشاء التفتيح والتظليل بدون دوال المعالج المسبق
- بناء متغيرات المكونات من رمز لوني واحد
- توليد حالات التحويم والنشاط ديناميكيًا
- إنشاء تأثيرات تشبه التدرج في دالة واحدة
صيغة الألوان النسبية: تعديل الألوان الموجودة
يتيح لك CSS Color Level 4 اشتقاق ألوان جديدة من الألوان الموجودة عن طريق تعديل القنوات الفردية:
--primary: #3366cc;
/* استخدام قنوات OKLCH */
--primary-lighter: oklch(from var(--primary) l c calc(h + 30));
--primary-darker: oklch(from var(--primary) calc(l * 0.8) c h);
/* استخدام قنوات HSL */
--primary-light: hsl(from var(--primary) h s calc(l + 15%));
--primary-dark: hsl(from var(--primary) h s calc(l - 15%));
تقوم الكلمة المفتاحية from <color> بتفكيك قنوات اللون المصدر إلى قنوات الدالة الوجهة، والتي يمكنك بعد ذلك تعديلها بالعمليات الحسابية.
الكلمات المفتاحية للقنوات لكل فضاء لوني
يعرض كل فضاء لوني كلمات مفتاحية محددة للقنوات:
| فضاء اللون | الكلمات المفتاحية |
|-------------|----------------------------------|
| rgb() | r، g، b، alpha |
| hsl() | h، s، l، alpha |
| hwb() | h، w، b، alpha |
| lch() | l، c، h، alpha |
| oklch() | l، c، h، alpha |
| lab() | l، a، b، alpha |
| oklab() | l، a، b، alpha |
نظرة عامة على دعم المتصفح (2026)
| الدالة | Chrome | Firefox | Safari | Edge |
|----------|--------|---------|--------|------|
| rgb() / hsl() | الكل | الكل | الكل | الكل |
| hwb() | 101+ | 96+ | 15+ | 101+ |
| lab() / lch() | 111+ | 113+ | 15+ | 111+ |
| oklch() / oklab() | 111+ | 113+ | 15.4+ | 111+ |
| color-mix() | 111+ | 113+ | 16.2+ | 111+ |
| صيغة الألوان النسبية | 111+ | 113+ | 16.2+ | 111+ |
جميع دوال الألوان الحديثة آمنة للاستخدام في عام 2026 للمشاريع التي لا تتطلب دعم Internet Explorer. لتوافق أوسع، استخدم خطوة بناء تحول الصيغة الحديثة إلى hex أو rgb() القديمة.
توصيات عملية
- للمشاريع القائمة — تظل HSL أفضل توازن بين القابلية للقراءة والقدرات
- للمشاريع الجديدة — استخدم OKLCH كفضاء الألوان الأساسي لدقتها الإدراكية
- للتدرجات — قم دائمًا بالاستيفاء في OKLCH لتجنب الانتقالات الموحلة
- لأنظمة التصميم — خزن الألوان الأساسية في OKLCH، وولّد المتغيرات باستخدام
color-mix()أو الصيغة النسبية - لـ canvas/WebGL — التزم بـ RGB، فهو الأصلي في خط أنابيب العرض
الخاتمة
لقد غيرت دوال الألوان الحديثة في CSS ما يمكنك فعله بالألوان على الويب. توفر OKLCH توحيدًا إدراكيًا يجعل تصميم نظام الألوان قابلاً للتنبؤ. تقضي color-mix() وصيغة الألوان النسبية على الحاجة إلى دوال ألوان المعالج المسبق. معًا، تمنح هذه الأدوات مطوري الويب نفس قوة الألوان التي تقدمها أدوات التصميم لسنوات — الآن مباشرة في المتصفح.
استخدم محول الألوان المجاني عبر الإنترنت الخاص بنا للتحويل بين جميع صيغ الألوان الحديثة في CSS بما في ذلك OKLCH و LAB و HWB و HEX/RGB/HSL الكلاسيكية.