ألوان CSS والتدرّجات: من hex إلى oklch وأبعد

اللون هو حيث يبدو التصميم متماسكًا أو يتفكّك، وتمنحك CSS الآن أدوات أفضل بكثير له من رموز hex التي ما زال معظم الناس يلجؤون إليها بالعادة. هذه هي الصورة الكاملة: نماذج اللون ومتى يساعد كلٌّ، وكيف تقلّل الشفافية وcurrentColor التكرار، وأنواع التدرّجات الثلاثة، والأمران الأهمّ فعلًا — التباين للوصولية، ووضع داكن نظيف. اقرِن هذا بنظرية اللون في CSS الحديثة وعمل الوضوح في الطباعة وستُقرَأ صفحاتك بوضوح للجميع.

الألوان الجميلة سهلة؛ والألوان المقروءة هي المهمّة. القاعدة التي لا يمكنك تخطّيها: نصّ المتن يحتاج نسبة تباين 4.5:1 على الأقلّ مع خلفيته (3:1 للنصّ الكبير). وكل ما تبقّى في هذا المقال في خدمة ذلك.

نماذج اللون

تقبل CSS اللون بعدّة صيغ. كلها تستطيع وصف البكسل نفسه — تختلف في مدى سهولة التفكير فيها:

color: #3366ff;                 /* hex — مدمج، لكنه غامض للعين البشرية */
color: rgb(51 102 255);         /* أحمر/أخضر/أزرق، 0–255 (أو %) */
color: rgb(51 102 255 / 0.5);   /* + alpha بعد الشرطة المائلة */
color: hsl(225 100% 60%);       /* صبغة، تشبّع، إضاءة — ودود للبشر */
color: hsl(225 100% 60% / 0.5); /* hsl مع alpha */
color: oklch(58% 0.22 264);     /* موحّد إدراكيًّا — الافتراضي الحديث */

• hex / rgb — عالميّ، لكنك لا تستطيع تقدير "اجعل هذا أفتح 10%" بالنظر.
• hsl — مقروء (أدِر الصبغة، ارفع الإضاءة)، ولهذا كان المرجع لتوليد التنويعات. ضعفه: أرقام الإضاءة المتساوية لا تبدو متساوية الإضاءة عبر الصبغات.
• oklch — فضاء موحّد إدراكيًّا (إضاءة، كروما، صبغة). تغيّر إضاءة 10% يبدو 10% في كل مكان، فالألواح المشتقّة منه متساوية ومتوقّعة. كما يصل ألوانًا زاهية على الشاشات الحديثة لا يبلغها sRGB. هذا الافتراضي الموصى به للعمل الجديد (مشروح بعمق في CSS الحديثة).

لاحظ الصيغة الحديثة المفصولة بمسافات (rgb(51 102 255 / 0.5)) — صيغة الفواصل القديمة (rgba(51,102,255,0.5)) ما زالت تعمل، لكن الجديدة توحّد rgb/rgba في دالّة واحدة مع / alpha اختياري.

الشفافية وcurrentColor

كلمتان مفتاحيتان وقيمة تقلّل قدرًا مفاجئًا من التكرار:

.overlay { background: rgb(0 0 0 / 0.4); }   /* أسود 40% */
.divider { border-color: rgb(255 255 255 / 0.15); }

.icon { fill: currentColor; }   /* خذ قيمة `color` الخاصة بالعنصر */
.btn  { color: white; }
.btn .icon { /* تلقائيًّا أبيض، لأن currentColor يتبع color */ }

currentColor هو رمز التصميم الأصلي: يُحلّ إلى color المحسوب للعنصر، فتستطيع أيقونة SVG أو حدّ أو ظلّ صندوق أن تتبع لون النصّ تلقائيًّا — غيّر color مرّة فتتبعها كلها. و**transparent** هو مجرّد rgb(0 0 0 / 0) ولا يُقدَّر بثمن في التدرّجات (أدناه).

اشتقاق الألوان بـ color-mix()

بدل انتقاء درجة تمرير أو صبغة يدويًّا، امزج الألوان داخل CSS — فتُشتقّ لوحة كاملة من متغيّر أساس واحد:

:root { --brand: oklch(58% 0.22 264); }

.btn        { background: var(--brand); }
.btn:hover  { background: color-mix(in oklch, var(--brand), black 12%); } /* أغمق */
.badge      { background: color-mix(in oklch, var(--brand), white 80%); } /* صبغة فاتحة */
.muted-text { color: color-mix(in srgb, currentColor 60%, transparent); } /* تلاشٍ */

هذا يحلّ محلّ دوال ألوان Sass التي كانت الفرق تعتمد عليها — درجات التمرير والصبغات والظلال والمتغيّرات الشفّافة كلها مشتقّة من رمز واحد، بلا خطوة بناء. (المزيد في CSS الحديثة.)

التدرّجات

التدرّج صورة تولّدها CSS، فيذهب حيثما تذهب صورة — غالبًا background. وله ثلاثة أنواع.

خطّي — انتقال لون على خطّ بزاوية:

.hero {
  background: linear-gradient(to right, #6a11cb, #2575fc);
}
.sky {
  background: linear-gradient(180deg, #87ceeb 0%, #ffffff 100%);  /* من الأعلى للأسفل */
}

شعاعي — لون يشعّ خارجًا من نقطة:

.spotlight {
  background: radial-gradient(circle at 30% 20%, #fff, #ddd 60%, #999);
}

مخروطي — لون يكنس حول مركز، كعجلة ألوان أو رسم دائري:

.pie {
  background: conic-gradient(#e11 0 40%, #1a1 40% 75%, #14e 75% 100%);
}

محطّات اللون والمحطّات الحادّة

الأرقام بعد كل لون هي المحطّات — حيث "يحطّ" ذلك اللون. ضع لونين في الموضع نفسه فيصير المزج خطًّا حادًّا، وهكذا ترسم خطوطًا بلا صور:

/* شريط ثلاثي الألوان سلس */
background: linear-gradient(90deg, red 0%, gold 50%, green 100%);

/* محطّات حادّة → خطوط صلبة (لاحظ المواضع المكرّرة) */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #f4f4f4 0 10px,        /* لون من 0 إلى 10px */
    #e0e0e0 10px 20px      /* اللون التالي من 10 إلى 20px — حافّة حادّة */
  );
}

repeating-linear-gradient (وأشقّاؤه الشعاعي/المخروطي) يبلّط النمط تلقائيًّا — مثالي للخطوط والتظليل وأشرطة التقدّم.

التطبيق: الخلفيات المتعدّدة وbackground-clip

عنصر واحد يستطيع تكديس خلفيات متعدّدة، الأولى المذكورة في الأعلى، لكلٍّ حجمها وموضعها:

.card {
  background:
    linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),  /* حجاب تعتيم في الأعلى */
    url("/photo.jpg") center / cover no-repeat;            /* الصورة تحته */
}

نمط الحجاب-فوق-الصورة (تدرّج مطبَّق فوق صورة) هو الطريقة المعيارية لإبقاء النصّ المتراكب مقروءًا. وbackground-clip: text يرسم تدرّجًا عبر الحروف نفسها:

.gradient-text {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

الوضع الداكن بـ prefers-color-scheme

احترم سمة نظام تشغيل المستخدم. ابنِ ألوانك على الخصائص المخصّصة وبدّلها في استعلام وسائط — وبقية CSS لا تتغيّر:

:root {
  --bg: white;
  --text: oklch(20% 0 0);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(18% 0.01 264);
    --text: oklch(92% 0 0);
  }
}
body { background: var(--bg); color: var(--text); }

ولأن كل لون يُقرأ من متغيّر، فالوضع الداكن مجرّد مجموعة قيم ثانية — بلا قواعد مكرّرة. أضف color-scheme: light dark على :root كي تتسمّى عناصر التحكّم الأصلية (حقول النماذج، أشرطة التمرير) بشكل صحيح أيضًا.

التباين والوصولية

هذا الجزء غير اختياري. يجب أن يبرز النصّ عن خلفيته بما يكفي لذوي ضعف البصر (وأيّ أحد في شمس ساطعة) كي يقرؤوه. عتبات WCAG:

• 4.5:1 كحدّ أدنى لنصّ المتن العادي،
• 3:1 للنصّ الكبير (≈24px، أو 18.66px غامق) والواجهة/الأيقونات ذات المعنى.

تفقّده في DevTools (منتقي اللون يُظهر النسبة ويعلّم الإخفاقات) قبل النشر. عادتان عمليّتان:

• لا تعتمد على اللون وحده لنقل معنى — "خطأ" أحمر يحتاج أيضًا أيقونة أو نصًّا، لمستخدمي عمى الألوان.
• اختبر وضعك الداكن منفصلًا — لوحة تنجح في الوضع الفاتح قد تفشل عند العكس.

الأخطاء الشائعة

• تثبيت hex في كل مكان بدل البناء على الخصائص المخصّصة، ما يجعل التنسيق والوضع الداكن مؤلمين.
• شحن نصّ يفشل في حدّ التباين 4.5:1 — أكثر عيوب الوصولية شيوعًا.
• توليد الصبغات/الظلال في hsl والحصول على خطوات غير متساوية — oklch موحّد إدراكيًّا.
• نقل حالة بـ اللون وحده (أحمر/أخضر) بلا أيقونة أو تسمية — غير مرئيّ لمستخدمي عمى الألوان.
• تكرار لون على الأيقونات والحدود والظلال بدل استخدام currentColor.
• نسيان color-scheme على :root، فتبقى عناصر النماذج الأصلية فاتحة في الوضع الداكن.
• تراكب نصّ على صورة مزدحمة بلا تدرّج حجاب، ما يجعله غير مقروء على المناطق الفاتحة.
• استخدام rgba()/hsla() بالعادة — صيغة rgb(... / a) / hsl(... / a) الموحّدة هي الشكل الحالي.

تمارين

جرّب كلًّا منها قبل فتح الحل.

تمرين 1 — حجاب شفّاف

عتّم أي خلفية بنسبة 40% كي يبقى النصّ الأبيض فوقها مقروءًا، باستخدام صيغة اللون الحديثة.

.scrim { background: rgb(0 0 0 / 0.4); }

تمرين 2 — اشتقّ درجة تمرير

بمعطى --brand، اجعل خلفية :hover أغمق 15% دون التصريح بلون ثانٍ.

.btn:hover {
  background: color-mix(in oklch, var(--brand), black 15%);
}

تمرين 3 — خطوط بـ CSS فقط

أنشئ خلفية بخطوط قطرية بلا صورة، باستخدام رماديّين.

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #f0f0f0 0 12px,
    #e2e2e2 12px 24px
  );
}

تمرين 4 — وضع داكن قابل للتسمية

أنشئ متغيّري --bg/--text ينقلبان تلقائيًّا للمستخدمين الذين نظامهم في الوضع الداكن.

:root { color-scheme: light dark; --bg: #fff; --text: #1a1a1a; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #161616; --text: #ededed; }
}
body { background: var(--bg); color: var(--text); }

النموذج الذهني الذي تحتفظ به

صِف اللون بالنموذج الذي يناسب المهمّة: hex/rgb للقيم الثابتة، لكن الجأ إلى oklch حين تريد ألواحًا تتحجّم بتساوٍ وألوانًا حديثة زاهية. قلّل التكرار بـ currentColor، والشفافية عبر صيغة rgb(... / a) الموحّدة، واشتقّ درجات التمرير/الصبغات/الظلال بـ color-mix() من رمز أساس واحد. التدرّجات صور تولّدها CSS — خطّية، شعاعية، مخروطية — حيث تصنع مواضع المحطّات المشتركة خطوطًا حادّة الحواف، وتستطيع تكديس عدّة خلفيات (حجاب فوق صورة) على عنصر واحد. ابنِ كل شيء على الخصائص المخصّصة كي يكون الوضع الداكن مجرّد مجموعة قيم ثانية خلف prefers-color-scheme. ولا تغفل أبدًا عن غير القابل للتفاوض: التباين — 4.5:1 لنصّ المتن — لأن لونًا لا يُقرَأ ليس تصميمًا، بل زخرفة.