الرياضيات وراء تحويل OKLCH إلى RGB

مقدمة

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

في هذه المقالة، سنستكشف الرحلة الرياضية لتحويل لون OKLCH إلى مساحة sRGB القياسية التي تستخدمها معظم أجهزة الويب.

المحول التفاعلي

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

خط أنابيب التحويل

تحويل OKLCH إلى RGB ليس خطوة واحدة؛ إنه ينطوي على سلسلة من التحويلات عبر مساحات ألوان مختلفة.

الخطوة 1: OKLCH إلى OKLab

أولاً، نحتاج إلى تحويل إحداثيات OKLCH الأسطوانية (السطوع، الصفاء، تدرج اللون) مرة أخرى إلى إحداثيات OKLab الديكارتية (L, a, b).

• L يبقى كما هو.
• a (أخضر-أحمر) يتم حسابه باستخدام جيب التمام: $a = C \times \cos(H)$
• b (أزرق-أصفر) يتم حسابه باستخدام الجيب: $b = C \times \sin(H)$

(ملاحظة: تأكد من أن H بالراديان لهذه الحسابات.)

الخطوة 2: OKLab إلى RGB الخطي (Linear RGB)

بعد ذلك، ننتقل من مساحة OKLab الإدراكية إلى مساحة RGB "خطية". يحدث هذا التحويل في ثلاث خطوات فرعية:

2.1 OKLab إلى LMS (استجابة المخروط)

نقوم أولاً بتحويل إحداثيات L, a, b إلى مجال LMS وسيط باستخدام مصفوفة محددة:

$$\begin{bmatrix} L' \\ M' \\ S' \end{bmatrix} = \begin{bmatrix} 1 & 0.3963377774 & 0.2158037573 \\ 1 & -0.1055613458 & -0.0638541728 \\ 1 & -0.0894841775 & -1.2914855480 \end{bmatrix} \begin{bmatrix} L \\ a \\ b \end{bmatrix}$$

2.2 لا خطية LMS

يستخدم نموذج OKLab لا خطية الجذر التكعيبي. للعودة إلى شدة الضوء الخطية، يجب أن نكعب قيم LMS الناتجة:

$$\begin{aligned} L_{lin} &= (L')^3 \\ M_{lin} &= (M')^3 \\ S_{lin} &= (S')^3 \end{aligned}$$

2.3 LMS إلى RGB الخطي

أخيراً، نقوم بتحويل قيم LMS الخطية هذه إلى RGB خطي باستخدام تحويل مصفوفة آخر:

$$\begin{bmatrix} R_{lin} \\ G_{lin} \\ B_{lin} \end{bmatrix} = \begin{bmatrix} 4.0767416621 & -3.3077115913 & 0.2309699292 \\ -1.2684380046 & 2.6097574011 & -0.3413193965 \\ -0.0041960863 & -0.7034186147 & 1.7076147010 \end{bmatrix} \begin{bmatrix} L_{lin} \\ M_{lin} \\ S_{lin} \end{bmatrix}$$

الخطوة 3: RGB الخطي إلى sRGB (تصحيح جاما)

أخيراً، تتطلب معظم الشاشات إشارات "مصححة جاما". وذلك لأن العيون البشرية أكثر حساسية للظلال الداكنة من الظلال الفاتحة.

يستخدم تحويل sRGB القياسي وظيفة نقل:

1. إذا كانت القيمة صغيرة جداً ($\le 0.0031308$)، اضرب في 12.92.
2. بخلاف ذلك، ارفع إلى القوة $(1/2.4)$ وقم بتطبيق إزاحات التحجيم.

$$V_{sRGB} = 1.055 \times V_{linear}^{(1/2.4)} - 0.055$$

تمنحنا هذه الخطوة الأخيرة قيم 0-255 المألوفة (بعد التحجيم) للأحمر والأخضر والأزرق.

مثال للحساب

دعنا نتتبع oklch(60% 0.15 250) عبر هذا الخط:

1. إلى OKLab:

   • $L = 0.6$
   • $H = 250^\circ \approx 4.36 \text{ rad}$
   • $a = 0.15 \times \cos(4.36) \approx -0.051$
   • $b = 0.15 \times \sin(4.36) \approx -0.141$

2. إلى RGB الخطي (بعد تحويل المصفوفة):

   • $R_{lin} \approx 0.021$
   • $G_{lin} \approx 0.229$
   • $B_{lin} \approx 0.667$

3. إلى sRGB (بعد تصحيح جاما):

   • $R \approx 39$
   • $G \approx 132$
   • $B \approx 213$
   • الرمز السداسي: #2784D5

خاتمة

يسلط فهم هذه التحويلات الضوء على التعقيد الخفي وراء إعلان لون CSS بسيط. بينما تتعامل المتصفحات الحديثة مع هذا تلقائياً، فإن معرفة الرياضيات تمنحنا تقديراً أعمق لدقة علم الألوان الرقمي.