{"id":"l-css-3-3","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"عرّف الألوان بـ oklch() لتكون الإضاءة متوقّعة، واشتقّ الدرجات الفاتحة بـ color-mix()، وابنِ حالات المرور والتعطيل من لون أساسي واحد بصيغة الألوان النسبية.","html":"

اختيرت ألوان المسارات الأربعة في Waypoint واحدًا تلو الآخر في أداة تصميم، كأكواد hex. بدا وردي Design صاخبًا، وأخضر Accessibility باهتًا، ونجح النص الأبيض في الشارات في اختبار التباين على مسارين وفشل على الآخرَين. وحين احتاج الفريق إلى درجة فاتحة لخلفية شارة كل مسار، ولّد أحدهم ثمانية أكواد hex أخرى بالعين. ثم جاءت حالات المرور. عشرون لونًا، بلا نظام، ولا أحد يستطيع أن يقول لماذا #0891b2 هو اللون الصحيح.

\n

ألوان CSS الحديثة تتيح لك تعريف لون أساسي واحد لكل مسار، واشتقاق كل ما عداه بقواعد.

\n

لماذا oklch()

\n

hex وrgb() وhsl() كلها تصف الألوان في فضاء sRGB، المنظّم حول طريقة إطلاق الشاشات للضوء، لا طريقة رؤية العين له. و«الإضاءة» في HSL أسوأ المذنبين: hsl(60 100% 50%) (الأصفر) وhsl(240 100% 50%) (الأزرق) يدّعيان الإضاءة نفسها، لكن الأصفر مبهر والأزرق داكن. وأيّ لوحة ألوان تُبنى بتدوير درجة اللون في HSL تنتهي بتباين متفاوت بشدّة.

\n

oklch() مبنية على نموذج OKLab، المصمّم لتتبع الأرقامُ الإدراكَ:

\n\n
tokens.css
:root {\n  --track-design: oklch(62% 0.19 350);\n  --track-perf:   oklch(62% 0.19 220);\n  --track-a11y:   oklch(62% 0.19 150);\n  --track-platform: oklch(62% 0.19 280);\n}
\n

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

\n\n

الدرجات الفاتحة والداكنة بـ color-mix()

\n

تمزج color-mix() لونين في فضاء ألوان تختاره:

\n
CSS
.badge {\n  background: color-mix(in oklch, var(--track) 15%, white);\n  color: color-mix(in oklch, var(--track) 70%, black);\n}\n.session-card.is-cancelled {\n  background: color-mix(in oklch, var(--track), transparent 85%);\n}
\n

النسبة المئوية تخصّ اللون الذي تليه؛ واللون الآخر يأخذ الباقي. لذا فإن var(--track) 15%, white أبيض في معظمه مع لمحة من لون المسار: خلفية شارة. والمزج مع transparent يُنتج نسخة شبه شفافة، دون الحاجة إلى token منفصل للشفافية.

\n

فضاء الألوان يغيّر النتيجة. مزج الأزرق والأصفر in srgb يمرّ برمادي موحل؛ أما in oklch فتنتقل درجة اللون حول العجلة وتبقى حيوية. ولدرجات الواجهة الفاتحة تعطي oklch أو oklab أكثر الخطوات انتظامًا. وcolor-mix() ضمن Baseline 2023.

\n\n

الألوان النسبية: عدّل قناة واحدة

\n

صيغة الألوان النسبية تفكّ اللون الأساسي إلى قنواته، وتتيح لك تغيير أيٍّ منها، ثم تعيد تركيبه:

\n
CSS
.session-card {\n  --track: var(--track-design);\n  border-inline-start: 6px solid var(--track);\n\n  &:hover,\n  &.is-active {\n    border-color: oklch(from var(--track) calc(l - 0.15) c h);\n  }\n\n  &.is-past {\n    border-color: oklch(from var(--track) l 0.03 h);   /* nearly grey, same hue */\n  }\n\n  & .badge-soft {\n    background: oklch(from var(--track) l c h / 20%);  /* same color, 20% alpha */\n  }\n}
\n

بعد from var(--track) تحمل الكلمات المفتاحية l وc وh قنوات اللون الأساسي كأرقام، وتستطيع استخدامها في calc(). لاحظ أن l هنا رقم من 0 إلى 1، لذا فطرح 0.15 يُغمق اللون 15 نقطة. وكل حالة مشتقّة تتبع الآن اللون الأساسي تلقائيًا: أضف مسارًا خامسًا، وستوجد أشكال المرور والماضي والدرجة الناعمة الخاصة به لحظة تعريف لونه الأساسي.

\n

الألوان النسبية ضمن Baseline 2024، في Chrome وEdge وFirefox وSafari. وإن كان عليك دعم متصفّحات أقدم، فلا تعتمد على تصريح احتياطي ثابت تكتبه قبلها: هذه القيم تحتوي على var()، فيقبلها المتصفّح القديم وقت التحليل، ثم يقع في فخّ «غير صالح في وقت حساب القيمة» الذي رأيته في درس الـ Custom Properties و@property، فيضيع البديل أيضًا. بدلًا من ذلك غلّف الحالات المشتقّة بـ @supports (color: oklch(from red l c h)) { … }، فتحتفظ المتصفّحات القديمة بالقاعدة الأساسية.

\n\n

دورك الآن

\n

لبطاقة التمرين قيم hex مكتوبة يدويًا لدرجة الشارة الفاتحة وللحدّ في الحالة النشطة. استبدلها بدرجة فاتحة بـ color-mix() وحالة نشطة بلون نسبي، وأضف مسار Performance يطابق مسار Design في الإضاءة والتشبّع. تقرأ الفحوصات قنوات OKLCH المحسوبة. وبعدها ستنقل لوحة الألوان هذه إلى الوضع الداكن باستخدام color-scheme وlight-dark().

\n","toc":[{"id":"sec-1","text":"لماذا oklch()","level":2},{"id":"sec-2","text":"الدرجات الفاتحة والداكنة بـ color-mix()","level":2},{"id":"sec-3","text":"الألوان النسبية: عدّل قناة واحدة","level":2},{"id":"sec-4","text":"دورك الآن","level":2}],"takeaways":["oklch(L C H) تفصل الإضاءة المُدرَكة (lightness) عن التشبّع اللوني (chroma) وعن درجة اللون (hue)، فيبدو لونان لهما L نفسها بالإضاءة نفسها، وهذا ما لا تستطيع HSL أن تعد به.","لوحة ألوان بإضاءة وتشبّع ثابتين ودرجات لون متغيّرة تعطي كل فئة الوزن البصري نفسه وتباينًا متقاربًا.","color-mix(in oklch, var(--track) 15%, white) تصنع درجة فاتحة من أيّ لون أساسي، وفضاء الألوان الذي تمزج فيه يغيّر النتيجة.","صيغة الألوان النسبية، مثل oklch(from var(--track) calc(l - 0.15) c h)، تشتقّ لون الحالة بتعديل قناة واحدة من اللون الأساسي."],"further":[{"title":"oklch() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch"},{"title":"color-mix() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix"},{"title":"Using relative colors (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors"}],"quiz":[{"q":"

للونين hsl(60 100% 50%) وhsl(240 100% 50%) قيمة الإضاءة نفسها. لماذا يُقرأ النص الأبيض جيدًا على أحدهما وسيئًا على الآخر؟

","options":[{"text":"لأن إضاءة HSL ليست إدراكية؛ الأصفر الصافي يبدو أفتح بكثير من الأزرق الصافي عند L نفسها.","why":"صحيح. HSL إعادة ترتيب هندسية لـ RGB. أما L في OKLCH فمصمّمة لتطابق الإضاءة المُدرَكة، فتعني L المتساوية تباينًا متقاربًا."},{"text":"لأن المتصفّح يرسم الأصفر بسطوع إضافي على معظم الشاشات.","why":"الشاشات ترسم اللونين كما حُدّدا؛ الفرق في الإدراك البشري، الذي لا تمثّله HSL."},{"text":"لأن إضاءة 50% خارج نطاق sRGB اللوني للأزرق.","why":"ألوان hsl() داخل sRGB دائمًا؛ النطاق اللوني (gamut) ليس المشكلة هنا."}],"answer":0},{"q":"

ما الذي تُنتجه color-mix(in oklch, var(--track) 20%, white) حين تكون --track لونًا ورديًا مشبعًا؟

","options":[{"text":"ورديًا بشفافية 20% فوق ما يقع خلفه.","why":"المزج مع الأبيض يُنتج لونًا معتمًا. الشفافية تأتي من المزج مع transparent."},{"text":"ورديًا أغمق، لأن 20% كمية قليلة من الأبيض.","why":"الـ 20% تخصّ الوردي؛ والأبيض يأخذ الـ 80% المتبقية، فتكون النتيجة أفتح بكثير."},{"text":"درجة وردية باهتة، 20% وردي و80% أبيض، ممزوجة في OKLCH.","why":"صحيح. النسب المئوية تخصّ اللون الذي تليه، واللون الآخر يأخذ الباقي."},{"text":"خطأ، لأن الـ custom properties لا يمكن استخدامها داخل color-mix().","why":"var() تعمل داخل color-mix() كما تعمل في أيّ مكان آخر؛ وتُستبدل قبل تقييم الدالة."}],"answer":2},{"q":"

أيّ تصريح يعطي حالة المرور لونًا أغمق من --track بمقدار 0.1 مع التشبّع ودرجة اللون نفسيهما، أيًّا كانت --track؟

","options":[{"text":"filter: brightness(0.9)","why":"filter تُعتّم العنصر كله، بما فيه النصوص والصور، وتعمل في فضاء RGB، فقد تنزاح درجة اللون."},{"text":"background: oklch(from var(--track) calc(l - 0.1) c h)","why":"صحيح. صيغة الألوان النسبية تفكّ اللون الأساسي إلى l وc وh، وتتيح لك تعديل قناة واحدة، ثم تعيد تركيبه."},{"text":"background: oklch(calc(var(--track) - 0.1))","why":"لا يمكنك الطرح من لون كامل؛ ودون from تتوقّع oklch() ثلاث قيم منفصلة للقنوات."}],"answer":1},{"q":"

ألوان المسارات لديك مكتوبة بالشكل oklch(62% 0.25 150)، وعلى حاسوب محمول قديم بشاشة sRGB يبدو الأخضر مختلفًا قليلًا عنه على شاشة P3 لدى المصمّم. ماذا حدث؟

","options":[{"text":"رفض المتصفّح اللون واستخدم البديل الاحتياطي.","why":"اللون صالح. الألوان خارج النطاق لا تُرفض؛ بل تُنقل إلى ما تستطيع الشاشة عرضه."},{"text":"OKLCH غير مدعومة على ذلك الحاسوب.","why":"الدعم يعتمد على المتصفّح لا على الشاشة، وكل المتصفّحات الحالية تدعم oklch()."},{"text":"شاشة P3 غير معايَرة جيدًا.","why":"الفرق متوقّع: التشبّع أعلى مما تستطيع شاشات sRGB عرضه."},{"text":"اللون خارج نطاق sRGB، فنقله المتصفّح إلى أقرب لون تستطيع الشاشة عرضه.","why":"صحيح. تستطيع oklch() وصف ألوان أكثر حيوية من sRGB. الشاشات واسعة النطاق تعرضها؛ والبقية تحصل على أقرب لون قابل للعرض."}],"answer":3}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Designing in oklch()

\n Design\n
\n
\n

The Cost of a Frame

\n Performance\n
","css":".track-design { --track: oklch(62% 0.19 350); }\n\n.session-card {\n margin-block-end: 12px;\n padding: 12px 16px;\n border-radius: 12px;\n border-inline-start: 6px solid var(--track, #94a3b8);\n}\n.session-card h3 { margin: 0 0 8px; }\n.badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n}\n\n/* Hand-picked values: replace them with rules derived from --track */\n.badge { background: #fce7f3; }\n.session-card.is-active { border-inline-start-color: #9d174d; }\n\n/* Add the Performance track here */\n"},"solution":{"html":"
\n

Designing in oklch()

\n Design\n
\n
\n

The Cost of a Frame

\n Performance\n
","css":".track-design { --track: oklch(62% 0.19 350); }\n\n.session-card {\n margin-block-end: 12px;\n padding: 12px 16px;\n border-radius: 12px;\n border-inline-start: 6px solid var(--track, #94a3b8);\n}\n.session-card h3 { margin: 0 0 8px; }\n.badge {\n display: inline-block;\n padding: 0.1em 0.6em;\n border-radius: 999px;\n}\n\n.track-perf { --track: oklch(62% 0.19 220); }\n\n.badge { background: color-mix(in oklch, var(--track) 15%, white); }\n.session-card.is-active {\n border-inline-start-color: oklch(from var(--track) calc(l - 0.15) c h);\n}\n"},"checks":[{"id":"badge-tint","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#design .badge', 'background-color')); return !!c && near(c[0], 0.943, 0.01) && near(c[1], 0.0285, 0.006) && near(c[2], 350, 2);"},{"id":"active-darker","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#design', 'border-left-color')); return !!c && near(c[0], 0.47, 0.01) && near(c[1], 0.19, 0.01) && near(c[2], 350, 1);"},{"id":"perf-track","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#perf', 'border-left-color')); return !!c && near(c[0], 0.62, 0.01) && near(c[1], 0.19, 0.01) && near(c[2], 220, 1);"},{"id":"perf-badge-follows","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const c = ok(style('#perf .badge', 'background-color')); return !!c && near(c[0], 0.943, 0.01) && near(c[2], 220, 2);"},{"id":"derived-for-new-tracks","test":"const ok = (s) => { const m = /oklch\\(([\\d.]+) ([\\d.]+) ([\\d.]+)/.exec(s); return m ? m.slice(1).map(Number) : null; }; const near = (a, b, t) => Math.abs(a - b) <= t; const card = $('#perf'); card.classList.add('is-active'); await tick(16); const c = ok(style(card, 'border-left-color')); card.classList.remove('is-active'); await tick(16); return !!c && near(c[0], 0.47, 0.01) && near(c[2], 220, 1);"}],"title":"اشتقّ ألوان المسارات","prompt":"

اللون الأساسي لمسار Design هو --track: oklch(62% 0.19 350)، لكن درجة شارته الفاتحة وحدّه في الحالة النشطة أكواد hex مختارة يدويًا. استبدلها بقواعد تعمل مع أيّ مسار:

\n
    \n
  1. خلفية الشارة: امزج 15% من --track مع الأبيض، في oklch.
    2. \n
  2. حدّ البطاقة النشطة (.is-active): لون المسار بإضاءة أقل بمقدار 0.15، مع التشبّع ودرجة اللون نفسيهما، باستخدام صيغة الألوان النسبية.
    3. \n
  3. أضف class اسمه .track-perf تكون فيه --track بإضاءة Design وتشبّعه نفسيهما، ودرجة لون 220.
    4. \n
\n

تقرأ الفحوصات قيم OKLCH المحسوبة، وتُفعّل بطاقة Performance أيضًا لتتأكّد من أن قواعدك ليست خاصة بمسار واحد.

\n","hints":["color-mix(in oklch, A 15%, B) تعطي 15% من A و85% من B.","الصيغة النسبية تبدأ بـ from: oklch(from var(--track) … c h). والقناة l رقم من 0 إلى 1.",".badge { background: color-mix(in oklch, var(--track) 15%, white); } و.is-active { border-inline-start-color: oklch(from var(--track) calc(l - 0.15) c h); } و.track-perf { --track: oklch(62% 0.19 220); }."],"explanation":"

لونا الحالتين يقرآن الآن --track عند العنصر الذي يُستخدمان فيه، فيحصل كل مسار على درجته الفاتحة وحدّه النشط من قيمة أساسية واحدة. color-mix(in oklch, var(--track) 15%, white) تنتقل بالإضاءة والتشبّع نحو الأبيض مع الحفاظ على درجة اللون، فتعطي درجة فاتحة باهتة (L ≈ 0.94). والصيغة النسبية تفكّ --track إلى l وc وh، وتطرح 0.15 من الإضاءة وتعيد التركيب، فيكون الحدّ النشط الوردي نفسه، لكن أغمق. ولأن مسار Performance يشارك Design في L وC، تحمل ألوانه الوزن البصري نفسه.

\n","checkLabels":{"badge-tint":"شارة Design درجة فاتحة بنسبة 15% من لون المسار","active-darker":"الحدّ النشط أغمق من لون المسار بمقدار 0.15","perf-track":"لمسار Performance قيمتا L وC نفسيهما ودرجة لون 220","perf-badge-follows":"درجة شارة Performance الفاتحة تتبع مسارها هي","derived-for-new-tracks":"بطاقة Performance النشطة تحصل على حدّ أغمق خاص بها"}},"words":709,"readMinutes":4}