شرح فضاء ألوان OKLCH — لماذا اعتمدته Tailwind v4

افتح المصدر لأي نظام تصميم من حقبة 2025 — shadcn/ui، أو Radix Themes، أو لوحة Tailwind v4 الافتراضية — فأوّل ما يلفت النظر هو الألوان. لا أكواد HEX، ولا ثلاثيات hsl()، بل دالة لم يتحدّث عنها أحد قبل ثلاث سنوات: oklch(). تشحن Tailwind v4 لوحتها الافتراضية بأكملها كقيم OKLCH حرفية. وتولّد shadcn الآن سمات تُصدِر خصائص CSS مخصّصة بصيغة OKLCH. وأعاد نظام تصميم Vercel بناء نفسه حوله في 2024.

هذا ليس مجاراةً للموضة. ثمّة سبب رياضي محدّد جعل كل نظام تصميم جادّ يبدّل نماذجه اللونية بهدوء، وحين تراه لن تستطيع تجاهل لماذا كان HSL دائماً الخيار الخاطئ لما كنّا نستخدمه فيه.

تستعرض هذه التدوينة هذا السبب من المبادئ الأولى، وتنتهي بتحويل عملي من رمز HEX إلى OKLCH، وتقدّم وصفةً لترحيل لوحتك الخاصة.

حين انكسرت فضاءات الألوان

لأنظمة التصميم وظيفة درجيّة. يحوم الزرّ فوقها بسطوع أفتح قليلاً من حالة الراحة. تجلس البطاقة الباهتة بدرجة واحدة أغمق من السطح المحيط بها. وتحتاج حلقة التركيز أن تكون أسطع بصرياً من زخارف الواجهة المحايدة خلفها. القيام بذلك جيداً على نطاق واسع يتطلّب أن يحمل «الأفتح» و«الأغمق» المعنى ذاته عبر كل درجة لون في لوحتك.

كان من السهل تجاهل هذا الاشتراط حين كانت اللوحات تتألّف من ثمانية ألوان وثلاث حالات. وصار غير مريح حين بدأت الفرق تشحن تدرّجات من 11 خطوة (50-950 في عُرف Tailwind)، وثمانية ألوان دلالية، ومتغيّرات فاتحة وداكنة، ولكنات علامة لا بدّ من تعايشها مع ألوان النظام في iOS وAndroid والويب. فجأةً صار سؤال «هل teal-500 هذا بسطوع blue-500 ذاته؟» مشكلةً هندسيةً حقيقية، لا ترفاً في التوجيه الفني.

ولم يكن HSL — حصان العمل منذ CSS 3 — قادراً على الإجابة. لونان من HSL بقيمتَيْ L متطابقتَيْن قد يبدوان مختلفَيْن دراماتيكياً في السطوع المُدرَك. يبدو الأصفر HSL الصافي عند lightness: 50% أسطع بكثير من أزرق HSL الصافي عند السطوع ذاته. لا تُدرك عينك الأصفر والأزرق بالتساوي؛ صُمِّم HSL ليكون بَدَهيّاً لمنتقيات اللون، لا موحّداً إدراكياً للتدرّجات. وبحلول 2023، كان كل نظام تصميم تخطّى حفنةً من الألوان يرقّع حوله بسكربتات خلط مخصّصة أو تجاوزات مضبوطة يدوياً.

ما كنّا نحتاجه نموذج ألوان تعني فيه L فعلاً «السطوع المُدرَك الذي قد يُبلِّغ عنه إنسان»، وحيث لا يغيّر دوران درجة اللون أو تقليل الإشباع السطوعَ كأثر جانبي خفي. كان هذا النموذج موجوداً في علم الألوان الأكاديمي — لكنه لم يصل إلى CSS بعد.

مشكلة HSL بالملموس

أنزل هذه في متصفح وانظر إليها جنباً إلى جنب:

.a { background: hsl(60 100% 50%); }   /* yellow */
.b { background: hsl(240 100% 50%); }  /* blue */
.c { background: hsl(120 100% 50%); }  /* green */

ثلاثتها بـL: 50%. لا يبدو أيٌّ منها بسطوع الآخر. الأصفر يكاد يحرق العين؛ الأزرق يُقرأ شبهَ أسود مقابل صفحة بيضاء؛ والأخضر يجلس بينهما. إن بنيت حالة تحويم بإضافة 10% إلى L، فإن تحويم الأصفر بالكاد يُرى بينما تحويم الأزرق إزاحة دراماتيكية. ويغدو تنميق التفاعلات مرهوناً بأي درجة لون بدأ منها المصمّم.

ليس هذا خللاً في HSL. صُمِّم HSL عام 1978 لمنتقيات الألوان من نوع «لوّن بالأرقام»، حيث يتعامل المستخدمون مع درجة اللون والإشباع و«السطوع» — المُعرَّف بـ(max(R,G,B) + min(R,G,B)) / 2 — للوصول إلى لون. الرياضيات بلا أي مفهوم للإدراك البشري. السطوع في HSL منتصف هندسي لقنوات sRGB، لا شيء أكثر.

عرفت لجنة CIE — الهيئة الدولية لمعايير قياس الألوان — بهذه المشكلة منذ السبعينيات. ونشرت فضاءَيْن موحّدَيْن إدراكياً، CIELAB وCIELUV، يعرّفان السطوع كشيء أقرب لما تفعله الرؤية البشرية فعلاً. وبحلول التسعينيات، صار CIE LAB المعيار في الطباعة والتصوير وإدارة الألوان. لكن تحويله إلى RGB وَعِر، ولم تتبنَّه CSS على نطاق واسع. واصل مطوّرو الويب استخدام HSL لا لأنه صحيح بل لأنه موجود.

CIE LAB / LCH: الإصلاح الأكاديمي بمشكلاته الخاصة

يأخذ CIELAB قيمة XYZ ثلاثية المنبّه (نموذج لاستجابة المخاريط البشرية للضوء) ويُمرّرها عبر جذر تكعيبي ودوران ثنائي البُعد لإنتاج ثلاث قنوات: L* (السطوع، 0-100)، وa* (أخضر ↔ أحمر)، وb* (أزرق ↔ أصفر). وLCH هو الفضاء ذاته معبَّراً عنه قطبياً: L*، وC* (chroma، المسافة عن المحايد)، وH* (زاوية درجة اللون).

هذان الفضاءان موحّدان إدراكياً بمعنى قابل للقياس. تقابل ΔE بقيمة 1 — خطوة وحدة في أي اتجاه في فضاء LAB — تقريباً أصغر فرق لوني يستطيع مراقب مدرَّب اكتشافه. وقد عملت سير الطباعة والتجهيز للطباعة على LAB وLCH منذ عقود.

فلماذا لم تتبنَّ CSS LCH ومضت في حالها؟

سببان. أوّلاً، عُوير CIE LAB مقابل شرط مشاهدة محدّد (مراقب قياسي بزاوية 2° تحت إضاءة D50) مُحسَّن لانعكاس الأسطح، لا للشاشات الباعثة. على الشاشات، ينجرف توحيده الإدراكي — فالألوان «متساوية السطوع» في LAB لا تبدو دائماً متساوية السطوع على الهاتف. ثانياً، نطاق LCH اللوني محرج. ثمّة ألوان مرئية يصفها LAB جيداً لكنها تقع خارج النطاقات الشائعة للشاشات، وانعكاس LCH إلى sRGB يُنتج أحياناً إزاحات في درجة اللون (أزرقك يميل قليلاً نحو الأرجواني حين تُنقص chroma الخاص به). لعمل أنظمة التصميم، كلاهما عائق نهائي.

وأضافت CSS Color 4 فعلاً lab() وlch() في 2021، وهما يعملان في المتصفحات الحديثة. لكن لمشكلة بناء التدرّجات الدرجيّة المتسقة على الشاشات الباعثة تحديداً، واصل المجتمع البحث.

OKLAB / OKLCH: استبصار Ottosson في 2020

في ديسمبر 2020، نشر Björn Ottosson — مهندس ألوان سويدي — ورقةً بعنوان «فضاء ألوان إدراكي لمعالجة الصور». كانت الورقة صغيرة: ثلاث مصفوفات قصيرة، وخطوة جذر تكعيبي، بلا جداول معايرة، وبلا بيانات مرجعية محميّة بحقوق نشر. أخذ Ottosson نموذجَيْ IPT وCAM16-UCS القائمَيْن — فضاءَيْن أكاديميَّيْن بخصائص جيدة لكن برياضيات سيئة — واشتقّ فضاءً أبسط يُقارب سلوكهما الإدراكي باستخدام عمليات ضرب مصفوفات اعتيادية على قيم XYZ ثلاثية المنبّه ذات الضوء الخطّي.

سمّاه OKLAB. والصيغة القطبية هي OKLCH.

ما يجعل OKLCH مميّزاً ليس الجِدّة — بل الملاءمة للغرض. ثلاث خصائص مجتمعة:

1. السطوع في OKLCH إدراكي حقيقي. يبدو أصفر صرف عند L: 0.7 وأزرق صرف عند L: 0.7 بالسطوع ذاته على شاشة معايَرة. تنتج حالات التحويم المُعرَّفة بـL + 0.05 إزاحات متكافئة بصرياً عبر اللوحة بأكملها.
2. درجة اللون محفوظة تحت تغيّرات chroma. إن خفّضت قيمة C في oklch(0.7 0.2 30) إلى oklch(0.7 0.1 30)، تبقى درجة اللون في مكانها. في LCH، تُدخل العملية ذاتها كثيراً إزاحةً مرئيةً في درجة اللون. في OKLCH، يمكنك تسطيح chroma لبناء متغيّر باهت من لون علامة دون أن ينجرف عرضاً نحو درجة لون مختلفة.
3. الرياضيات رخيصة. عمليتا ضرب مصفوفات وجذر تكعيبي واحد. قابلة للتنفيذ في دالّة JavaScript من 30 سطراً. بلا جداول بحث، وبلا معايرة لكل جهاز، وبلا هواجس ترخيص.

التركيبة هي ما جعل OKLCH قابلاً للاستخدام في CSS الواقعية. أضافت W3C دالّة oklch() إلى CSS Color 4 في 2022. وشحن Chrome 111 الدعم في 2023. ودعمته كل المتصفحات دائمة التحديث بحلول منتصف 2024. وجعلته Tailwind v4 صيغة اللوحة الافتراضية في العام ذاته.

الرياضيات: تحويل عملي من HEX إلى OKLCH

لنمشِ مع #3b82f6 — blue-500 من Tailwind — إلى OKLCH. هذه هي الرياضيات ذاتها التي تجريها أداة محوّل الألوان وفرع HEX إلى OKLCH عند كل ضغطة مفتاح. ومعرفة ما يحدث تحت الغطاء ستجعل المزالق في القسم التالي أكثر منطقية.

الخطوة 1: Hex إلى sRGB. قسّم HEX ذا الستة أرقام إلى ثلاثة أزواج واقسم كلاً منها على 255.

const r = 0x3b / 255; // 0.231
const g = 0x82 / 255; // 0.510
const b = 0xf6 / 255; // 0.965

هذه قيم sRGB مُرمَّزة بـgamma: قيم القنوات كما يخزّنها ملف صورتك، مع منحنى غير خطّي مخبوز في الداخل للتعويض عن كيفية بعث الشاشات للضوء.

الخطوة 2: sRGB إلى sRGB خطّي. أزل منحنى gamma ليصبح لدينا قيم قنوات بضوء خطّي. التحويل المتقطّع القياسي من CSS Color 4 §11.2:

const linear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const [lr, lg, lb] = [r, g, b].map(linear);
// lr ≈ 0.045, lg ≈ 0.220, lb ≈ 0.923

الخطوة 3: sRGB خطّي إلى XYZ D65. ضرب مصفوفات قياسي، مُعرَّف في CSS Color 4 §15.1:

const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;
// x ≈ 0.265, y ≈ 0.231, z ≈ 0.927

هذا هو التمثيل XYZ ثلاثي المنبّه القانوني — صيغة «ما الأطوال الموجية لهذا اللون، بدلالة استجابة المخاريط البشرية».

الخطوة 4: XYZ إلى LMS. تَسِم مصفوفة Ottosson الأولى XYZ إلى فضاء أساسيات مخاريط طويلة/متوسطة/قصيرة مضبوط لـOKLAB:

const lms = [
  0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z,
  0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z,
  0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z,
];

الخطوة 5: الجذر التكعيبي لقيم LMS. هذه خطوة الضغط الإدراكي — مشابهة للجذر التكعيبي في CIE LAB:

const lms_ = lms.map(Math.cbrt);

الخطوة 6: LMS’ إلى OKLAB. مصفوفة Ottosson الثانية:

const L = 0.2104542553 * lms_[0] + 0.7936177850 * lms_[1] - 0.0040720468 * lms_[2];
const a = 1.9779984951 * lms_[0] - 2.4285922050 * lms_[1] + 0.4505937099 * lms_[2];
const b_ = 0.0259040371 * lms_[0] + 0.7827717662 * lms_[1] - 0.8086757660 * lms_[2];
// L ≈ 0.629, a ≈ -0.022, b_ ≈ -0.191

هذا هو OKLAB. قناة السطوع L ≈ 0.629 هي ما تُدركه العين بوصفه «سطوعاً بنسبة 60%» لهذا الأزرق تحديداً.

الخطوة 7: OKLAB إلى OKLCH (ديكارتي إلى قطبي).

const C = Math.sqrt(a * a + b_ * b_);           // 0.193
const H = (Math.atan2(b_, a) * 180 / Math.PI + 360) % 360; // 263.4
// → oklch(0.629 0.193 263.4)

إذن #3b82f6 هو oklch(0.629 0.193 263.4). السطوع 0.629، وchroma 0.193، ودرجة اللون 263.4°.

إن بنيت تدرّج 50-950 من هذا اللون بتدريج L وحدها (0.95 نزولاً إلى 0.15 في 11 خطوة)، مع تثبيت C وH، تحصل على لوحة كل درجة فيها بدرجة اللون ذاتها بصرياً، تتلاشى في السطوع بانتظام. افعل الشيء ذاته في HSL فتنزاح الدرجات الداكنة نحو الأرجواني بينما تذهب الفاتحة نحو الرمادي. تلك هي الغنيمة.

Display P3 + Rec2020: لماذا يفتح OKLCH النطاق الواسع

OKLCH غير محدود. على عكس HSL (المسقوف بـsRGB) وحتى LCH (المعايَر للأسطح العاكسة)، ليس لـOKLCH نطاق ضمني. يمكنك كتابة oklch(0.7 0.25 30) فينتج أحمر زاهٍ يقع داخل حجم ألوان Display P3 لكن خارج sRGB. على iPhone أو MacBook حديث، يُعرَض. وعلى شاشة أقدم، يلتقطه المتصفح تلقائياً إلى أقرب تمثيل في sRGB.

يهمّ هذا لأن Apple وSamsung وW3C أمضت أواخر عقد 2010 في شحن أجهزة واسعة النطاق. تشحن MacBook Pro 14” / 16” بـmini-LED نطاق P3 افتراضياً. ويعرض iPhone 15 Pro نطاق Display P3 في Safari. وتشحن هواتف Android الرائدة شاشات Rec2020. بحلول 2025، نسبة معتبرة من حركة أنظمة التصميم على عتاد واسع النطاق قادر على عرض ألوان لا يستطيع HSL/sRGB ببساطة التعبير عنها.

يتيح OKLCH كتابة تلك الألوان دون تثبيت تصريح @media (color-gamut: p3) منفصل. يتولّى المتصفح الاحتياط. ويحصل نظام تصميمك على «استخدم أزهى أحمر يستطيع الجهاز عرضه» جاهزاً من الصندوق.

ولهذا أيضاً يُعدّ OKLCH الصيغة الصحيحة لرموز التصميم. متغيّر --brand بصيغة OKLCH هو وصف مستقلّ عن الجهاز للقصد. يَستنتج المتصفح ما يجب عرضه على أي شاشة يملكها المستخدم، ويصبح كودك قابلاً للنقل عبر CSS، وSwiftUI (الذي يدعم Display P3 Color أصلياً)، وAndroid Compose (المُدرِك لـRec2020)، وFlutter.

Tailwind v4 وثورة رموز التصميم

كانت Tailwind v4 — الصادرة عام 2024 — نقطة الانعطاف التي حوّلت OKLCH من بحث إلى معيار صناعي. اتخذ مؤلّفو Tailwind ثلاثة قرارات حازمة:

1. اللوحة الافتراضية بصيغة OKLCH. كل لون من Slate، وgray، وzinc، وneutral، وstone — كل لون في Tailwind مُعرَّف بـoklch() في المصدر. وتدرّجات 50-950 موحّدة بالسطوع الإدراكي بحكم البناء.
2. السمات المخصّصة تستخدم كتل @theme مع قيم OKLCH حرفية. تُعرَّف ألوان العلامة كرموز oklch()؛ وتُولَّد المرافق التابعة (bg-brand-500، وtext-brand-300).
3. لا حاجة لمراسم احتياط. المتصفحات بلا دعم OKLCH أدنى من خطّ Tailwind v4 الأساسي المُوثَّق.

كان القرار الأخير هو ما جعل التبنّي خياراً خالياً من الأضرار. حديثاً عام 2023، اضطرّ المصمّمون إلى شحن نسختَيْ oklch() وhsl() من كل لون كي لا تنكسر إصدارات Safari الأقدم. مع Tailwind v4، الخطّ الأساسي هو متصفحات 2023 فما بعد، وOKLCH يعمل في كل مكان.

يتّبع مولّد سمات shadcn/ui النمط ذاته: أدخل لون علامتك، فتخرج تدرّج OKLCH. يستخدم نظام تصميم Vercel OKLCH لألوانه الدلالية. وتدرّجات ألوان Radix Themes مُعرَّفة بـOKLCH. تقاربَ المجتمع.

ترحيل عملي: لوحة HEX → لوحة OKLCH

إن كانت لديك لوحة قائمة على HEX اليوم، فالترحيل ميكانيكي. إليك الوصفة:

1. قرّر بنية تدرّجك. يُعدّ تدرّج 50-950 الخاص بـTailwind (11 محطّة) الافتراضَ الفعلي ويستحقّ الاتباع ما لم يكن لديك سبب محدّد للعدول. تعطي المحطّات عند L = 0.97, 0.93, 0.86, 0.76, 0.63, 0.50, 0.42, 0.34, 0.26, 0.18, 0.10 تدرّجاً إدراكياً ناعماً.

2. حوّل HEX علامتك إلى OKLCH. استخدم أداة محوّل الألوان أو HEX إلى OKLCH. ستحصل على ثلاثية مثل oklch(0.629 0.193 263.4). لاحظ قيمة H — هذه درجة لون علامتك.

3. ثبّت C وH؛ نوِّع L. ابنِ التدرّج بإصدار:

--brand-50:  oklch(0.97 0.193 263.4);
--brand-100: oklch(0.93 0.193 263.4);
...
--brand-950: oklch(0.10 0.193 263.4);

4. اضبط المحطّات الطرفية. عند L منخفض جداً (≤ 0.20) وL مرتفع جداً (≥ 0.95)، تقع قيم chroma العالية خارج sRGB. خفّض C لتلك المحطّات، أو اقبل الالتقاط التلقائي للمتصفح. تخفّض افتراضات Tailwind chroma نحو الطرفَيْن — انسخ ذلك النمط.

5. عرّف الأسماء المستعارة الدلالية. --surface: var(--brand-50)، و--surface-elevated: var(--brand-100)، و--text-primary: var(--brand-900)، وهكذا. الآن تُقرأ رموز تصميمك بوصفها قصداً، لا ألواناً.

6. تحقّق من التباين. استخدم APCA Lc أو نسب تباين WCAG 2 للتأكّد من أن كل زوج --text-* مقابل كل زوج --surface-* يفي بسقفك في إمكانية الوصول. ولأن L في OKLCH إدراكي، تكون رياضيات التباين أوثق ممّا قد تكون عليه في HSL.

عادةً ما يهبط فريق يدير هذا الترحيل على لوحة قديمة من 60 لوناً عند لوحة OKLCH أصغر وأكثر توحّداً من 30-40 رمزاً في فترة بعد ظهر واحدة. تُشحن اللوحة الجديدة أصغر، وتولّد CSS أصغر، وتنتج حركة درجيّة أفضل بصرياً في حالات التحويم وحالات التعطيل دون أي ضبط إضافي.

المزالق وكيف نتعامل معها

بضعة أمور يجب معرفتها قبل البدء:

تحذيرات الخروج عن النطاق. تقع بعض قيم OKLCH خارج Display P3 أو sRGB. تتعامل المتصفحات الحديثة مع الالتقاط إلى أقرب لون صالح تلقائياً، لكن الالتقاط فقّاد: قد تُعرَض oklch(0.7 0.25 30) الخاصّة بك بإشباع أقلّ قليلاً ممّا كتبت. تخبرك أدوات مثل صفّ النطاق اللوني في محوّل الألوان إن كان لونك آمناً في sRGB أو P3 أو Rec2020، وتعرض التقاطاً إلى sRGB بنقرة واحدة حتى يكون ما تكتبه هو ما ترى.

غرابة chroma دون البكسل. chroma في OKLCH غير محدود، لكن المدى المفيد تقريباً من 0 إلى نحو 0.4 للألوان المرئية. القيم فوق 0.4 لا تتحقّق إلا بضوء ليزر أحادي اللون — ليست ألواناً فيزيائية تستطيع شاشة عرضها. لهذا السبب يحدّ محوّل الألوان منزلق chroma عند 0.4؛ القيم فوقه لا تُنتج فرقاً يُحسّ على أي شاشة حقيقية.

دعم المتصفح، بأسلوب 2025. يدعم oklch() أصلياً Chrome 111+، وSafari 15.4+، وFirefox 113+. ولا تدعمه متصفحات ما قبل 2023. إن وجب عليك دعم IE / Edge القديم أو Safari القديم على المحمول (من 1-3% من الحركة حسب جمهورك)، يمكنك إقران تصريح OKLCH باحتياط HEX باستخدام @supports (color: oklch(0 0 0)) — لكن لرموز نظام تصميم تُشحن في 2025، تكلفة الاحتياط كثيراً ما تفوق العائد القديم.

ديمومة رمز HEX. OKLCH لـقصد نظام التصميم. قد ما زال نظام إدارة المحتوى لديك يحتاج قيمة HEX لأسباب قديمة (توقيعات البريد، مستندات Office، قوائم تدقيق أصول العلامة). احتفظ بجدول بحث مُولَّد يُصدِر HEX المُلتقَط إلى sRGB لكل رمز OKLCH، لكن لا تؤلّف بـHEX.

لا تخلط بين OKLCH وOKLAB. OKLAB هو الصيغة المستطيلة (قنوات L وa وb)؛ وOKLCH فضاء الألوان ذاته بصيغة قطبية (L وC وH). تتحوّل بينهما بخطوة ديكارتية↔قطبية واحدة. استخدم OKLCH للرموز (أكثر قراءةً، أسهل في التدرّج)؛ واستخدم OKLAB داخلياً إن احتجت استكمال الألوان أو مزجها.

جرّبها على لوحتك

أسرع طريقة لمعاينة ما وُصف هنا عملياً هي إنزال HEX علامة في محوّل الألوان. اكتب لون علامتك في حقل HEX واقرأ ناتج OKLCH. ثم حرّك المنزلقات في جهة OKLCH وراقب كيف تبقى درجة اللون ذاتها كما هي وأنت تخفّض chroma، وكيف يبقى السطوع ذاته كما هو وأنت تدوّر درجة اللون. بعد بضع دقائق، سيكون لديك حسّ بَدَهيّ بسبب كون HSL دائماً الأداة الخاطئة للتدرّجات الدرجيّة، وسبب انتقال كل نظام تصميم جادّ منه.

للتحويل المخصّص من HEX إلى OKLCH، استخدم HEX إلى OKLCH — الرياضيات ذاتها كهذه المقالة، مع فائدة إضافية واحدة: يعرض لك تصنيف النطاق اللوني (sRGB / Display P3 / Rec2020) لتعرف أيّ ألوان علامتك آمن في كل مكان وأيّها يحتاج جهازاً واسع النطاق ليُعرَض بالكامل.

ذاك هو OKLCH. يستحقّ الترحيل. إن أحسنت تنفيذه، فلن تكتب hsl() أبداً بعد ذلك.