محوّل HEX إلى OKLCH

ما محوّل HEX إلى OKLCH؟

// sRGB hex → OKLCH per W3C CSS Color 4 + Ottosson 2020
// References: https://www.w3.org/TR/css-color-4/#color-conversion-code
//             https://bottosson.github.io/posts/oklab/
// Worked example: #3b82f6 (Tailwind blue-500) → oklch(0.629 0.193 263.4)
function hexToOklch(hex) {
  const h = hex.trim().replace(/^#/, '');
  const srgb = [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16) / 255);
  // sRGB → linear-sRGB (CSS Color 4 §11.2 piecewise gamma)
  const lin = srgb.map(v => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4));
  const [lr, lg, lb] = lin;
  // linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
  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;
  // XYZ D65 → LMS (Ottosson 2020), cube-root, → OKLAB
  const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
  const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
  const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLAB → OKLCH (Cartesian to polar)
  const C = Math.sqrt(a * a + b * b);
  const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
  return `oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`;
}
console.log(hexToOklch('#3b82f6')); // → oklch(0.629 0.193 263.4)

أبرز الميزات

بدائل محوّل HEX إلى OKLCH

أمثلة على HEX إلى OKLCH

#3b82f6

#FF5733

#FF1744

#0f172a

#3b82f6

تحويلات HEX → OKLCH الشائعة (Tailwind v4)

جدول مرجعي لـ10 درجات متوسّطة شائعة من اللوحة الافتراضية لـTailwind v4 مع مكافئات HEX وOKLCH. تطابق القيم الدقّة المنشورة في لوحة Tailwind v4 (ثلاث منازل عشرية على L وC، وعدد صحيح أو منزلة عشرية واحدة على H).

كيفية استخدام محوّل HEX إلى OKLCH

1. 1

   الصق رمز HEX في حقل HEX

   أنزل أي قيمة HEX في إدخال HEX — مع `#` الافتتاحية أو بدونها، باختصار ثلاثة أرقام (`#F73`)، أو شكل كامل من ستة (`#3b82f6`)، أو اختصار alpha من أربعة (`#F738`)، أو شكل كامل من ثمانية مع alpha (`#FF573380`). يُطبّع المحلّل كل الأشكال الخمسة إلى اللون الداخلي ذاته قبل اشتقاق OKLCH. لا يهمّ حجم الأحرف (`#3b82f6` و`#3B82F6` يُحلَّلان بصورة متطابقة). تنتج الأحرف غير الصالحة أو الأعداد الخاطئة من الأرقام خطأً سطرياً صامتاً؛ ويُحدِّث HEX الصالح كل حقل صيغة أخرى في الزمن الحقيقي، بما في ذلك OKLCH.

2. 2

   اقرأ ثلاثية OKLCH من حقل OKLCH

   يُسطِّح حقل OKLCH القيمة بالشكل الحديث لـCSS Color 4: `oklch(0.629 0.193 263.4)` للون معتم، و`oklch(0.629 0.193 263.4 / 0.5)` للون ذي alpha. تُقرَّب L إلى ثلاث منازل عشرية (تطابق الدقّة المنشورة في Tailwind v4)، وC إلى ثلاث منازل عشرية، وH إلى درجة عشرية واحدة. يعني المرجع الأصلي الداخلي بـOKLCH في الأداة أن دقّة الفاصلة العائمة الأساسية تُحفَظ عبر كل حقل آخر — تبقى رحلات العودة إلى HEX مستقرّة على مستوى البِت، على عكس المحوّلات الإرثية التي تمرّ عبر HSL وتنجرف بدرجة أو درجتَيْن في كل رحلة.

3. 3

   انقر «نسخ» لالتقاط سلسلة OKLCH

   لكل بطاقة صيغة زرّ «نسخ» على اليمين. نقرة واحدة فتنزل القيمة على حافظتك — يومض نصّ الزرّ بسرعة بكلمة «نُسخت!» لإعلامك. السلسلة المنسوخة هي صياغة CSS Color 4 القانونية (`oklch(0.629 0.193 263.4)`)، جاهزة للإسقاط في كتلة `@theme` في Tailwind v4 أو تعريف متغيّر CSS في shadcn/ui. لإخراج خاصّ بمنصّة محدّدة (خاصّية CSS مخصّصة، ورمز Tailwind v4، وSwiftUI، وCompose، وFlutter)، استخدم قسم «نسخ كرمز» تحت المنتقي — تُصدِر تلك المقتطفات الصيغة التي تتوقّعها كل منصّة أصلياً.

4. 4

   تحقّق من شارتَيْ نطاق Display P3 / Rec.2020

   تعرض ثلاث شارات نطاق (sRGB، وDisplay P3، وRec.2020) ما إذا كان اللون الحالي يندرج داخل المدى القابل للإنتاج لكل فضاء. إذا تحوّلت شارة sRGB إلى الحمراء لكن P3 خضراء، فاللون OKLCH واسع النطاق يُعرَض مُشبَعاً على عتاد Apple (iPhone، وiPad، وMacBook من 2017 فما بعد) لكنه يُخفَّف الإشباع على شاشة 24-بِت قديمة. يستخدم زرّ **«تثبيت على sRGB»** تقليص chroma الثنائي (خوارزمية CSS Color 4 §13 الإعلامية) لتقليص اللون إلى داخل sRGB مع الحفاظ على L وH، منتجاً احتياط HEX تستطيع شحنه عبر `@supports not (color: oklch(0 0 0))`.

5. 5

   ظاهرة أيضاً: RGB، وHSL، وOKLAB، وHSV، وHWB، وCMYK، واسم اللون

   يُضيء HEX ذاته الذي تلصقه حقول الصيغ الثمانية الأخرى أيضاً — RGB لاستدعاءات canvas والعتاد، وHSL لمتغيّرات CSS الإرثية، وOKLAB لرياضيات اللوحات ومصفوفات عمى الألوان، وHSV وHWB لمسارات منتقي ألوان المصمّمين، وCMYK لتقديرات الطباعة، وأقرب لون CSS مُسمّى لنثر التوثيق. أنت غير مقيّد بـHEX → OKLCH فقط. يقود المنتقي (مربّع SL + منزلق درجة اللون + منزلق alpha) كل التسعة في آن واحد، وعلى متصفحات Chromium يأخذ زرّ EyeDropper عيّنة من أي بكسل على الشاشة، بما في ذلك خارج المتصفح.

أخطاء HEX / OKLCH الشائعة

Set OKLCH C = 0.3 expecting "30% saturation":
oklch(0.7 0.3 250) → may exceed sRGB gamut for blues
Wide-gamut color renders desaturated on legacy displays.

Treat C as absolute chroma, check gamut badges:
oklch(0.7 0.15 250) → comfortably in sRGB for this L+H pair
Use the badges to find the max C that fits the target gamut.

Copy HSL L percentages into OKLCH directly:
hsl(220 50% 30%) ported as oklch(0.30 0.10 220)
The two colors look noticeably different in brightness.

Re-derive OKLCH from the original hex, don't port HSL:
hex source → OKLCH conversion → oklch(0.34 0.08 254)
The perceptual L stays correct; the palette feels even.

Ship oklch(0.7 0.4 30) without checking sRGB gamut:
P3 displays render saturated red; sRGB displays render desaturated
Brand color looks inconsistent across user hardware.

Check sRGB gamut badge, Snap to sRGB if needed, layer with @supports:
@supports (color: oklch(0 0 0)) { --primary: oklch(0.7 0.4 30); }
@supports not (color: oklch(0 0 0)) { --primary: #ef6b50; }
P3 hardware gets the wide-gamut value; sRGB hardware gets the snapped fallback.

Define brand color in OKLCH only:
:root { --primary: oklch(0.629 0.193 263.4); }
IE 11 and old iOS Safari render no color at all.

Layer with @supports for graceful fallback:
:root { --primary: #3b82f6; }
@supports (color: oklch(0 0 0)) { :root { --primary: oklch(0.629 0.193 263.4); } }
Modern browsers get OKLCH; legacy browsers get the hex fallback.

Substitute lch() for oklch() expecting same result:
lch(60% 50 240) ≠ oklch(0.6 0.15 240) — different colors entirely
Copy-pasted across spaces, the value is silently wrong.

Pick one space and stay in it:
oklch(0.629 0.193 263.4) for modern design systems
or lch(60% 50 240) — but don't swap function names without re-converting

من يستخدم HEX إلى OKLCH

مطوّرو الواجهة الأمامية يرحّلون إلى رموز OKLCH في Tailwind v4

توحّدت Tailwind v4 على OKLCH للوحتها الافتراضية في يناير 2025. يعني ترحيل قاعدة كود v3 بألوان علامة قائمة على HEX تحويل كل HEX إلى OKLCH وإسقاط النتيجة في كتلة `@theme` الجديدة. الصق كل HEX هنا، وانسخ قيمة `oklch()`، وعرّف `--color-primary: oklch(0.629 0.193 263.4)` وأمثاله. تُعلِم شارات النطاق الحيّة أي ألوان تتجاوز sRGB فتقرّر إن كنت تحتفظ بالقيمة واسعة النطاق لمستخدمي Display P3 أو تثبّت على sRGB.

مؤلّفو سمات shadcn/ui يبنون لوحات مخصّصة

تستخدم سمة shadcn/ui القائمة على متغيّرات CSS OKLCH لكل رمز (`--background`، و`--foreground`، و`--primary`، إلخ). تشتقّ السمات المخصّصة من HEX علامة أساسي بالتحويل إلى OKLCH ثم تحريك L لمتغيّرات الوضع الفاتح/الداكن. الصق HEX العلامة، اقرأ ثلاثي OKLCH، ابنِ بقيّة السمة بتدريج L مع تثبيت C وH. يطابق سير عمل shadcn القانوني تماماً.

مؤلّفو أنظمة التصميم يولّدون تدرّجات موحّدة إدراكياً

ولّد تدرّج 50/100/200/.../900 بتدريج قناة L بزيادات OKLCH متساوية مع تثبيت C وH. تبدو الفجوة البصرية بين كل خطوتَيْن متجاورتَيْن مطابقة عبر كل درجة لون — وهو ما تحتاجه لوحة ألوان العلامة فعلاً. تستخدم Tailwind v4 هذا البناء بالضبط للوحتها الافتراضية، وتعكسها shadcn/ui. الصق كل HEX علامة، اقرأ OKLCH، ولّد التدرّج خوارزمياً أو عبر لوحة التدرّجات الفاتحة/الداكنة/المحايدة تحت المنتقي.

مهندسو الوصولية يتحقّقون من التباين في فضاء OKLCH

يُبلِّغ تباين WCAG 2.1 وAPCA مقابل لون sRGB المُحَلّ، لا ثلاثي OKLCH — لكن معرفة L الخاصّة بـOKLCH للون علامة تجعل ضبط التباين قابلاً للتنبؤ: ارفع L بـ0.1 لاجتياز AA مقابل الأبيض، وأنقصها بـ0.1 لاجتياز AA مقابل الأسود. تجعل النظرة المتزامنة لـOKLCH + WCAG + APCA العلاقة مرئية. الصق HEX العلامة، راقب شارات التباين، اضبط L في OKLCH (أكثر قابلية للتنبؤ من HSL) حتى يجتاز الزوج كلا المقياسَيْن.

مطوّرو الويب يبنون رموز ألوان واسعة النطاق للشاشات الحديثة

تعرض معظم أجهزة Apple منذ 2017 (وكثير من أجهزة Android الحديثة) Display P3 أصلياً. يتيح تعريف ألوان لكنة العلامة في OKLCH عنونة الأحمر والأخضر المُشبَع لـP3 فقط الذي لا يستطيع أي رمز HEX ترميزه. الصق HEX موجوداً لقراءة OKLCH الخاصّ به، ثم ادفع قناة C فوق سقف sRGB للمطالبة بالإشباع الإضافي لـP3. تؤكّد شارات النطاق أن القيمة الجديدة تندرج في P3 (وتسقط بسلاسة على الشاشات لـsRGB فقط عبر ضغط chroma الذي يطبّقه المتصفح).

المعلّمون يدرّسون السطوع الإدراكي مقابل الهندسي

تجعل النظرة المتزامنة لـOKLCH + HSL الفرق بين السطوع الإدراكي والهندسي واضحاً. الصق أخضر مُشبَعاً وأزرق مُشبَعاً عند L ذاتها في HSL = 50%؛ تختلف قيم L في OKLCH اختلافاً ملحوظاً لأن OKLCH يقيس السطوع الإدراكي الفعلي. اسحب منزلق درجة اللون في HSL وراقب L في OKLCH تتذبذب بينما تثبّت L في HSL — المنحنى هو غرابة gamma مُمَثَّلة بصرياً. عرض جاهز لقاعة درس لشرح لماذا رحّلت أنظمة التصميم إلى OKLCH.

مشرفو المصادر المفتوحة يحدّثون توثيق الرموز

تسرد توثيقات أنظمة التصميم الأقدم ألوان العلامة كرموز HEX فقط عادةً. يعني التحديث إلى OKLCH عرض اللون ذاته في كلا الفضاءَيْن — HEX لتوافق كتلة الكود، وOKLCH لجدول المواصفة وتعريف الرمز الحديث. الصق كل HEX، وانسخ إخراج OKLCH، وحدِّث التوثيق. تتيح تجزئة URL القابلة للمشاركة أيضاً للمساهمين الإشارة إلى اللون الدقيق قيد النقاش في قضيّة GitHub دون التباس.

رياضيات HEX إلى OKLCH وخطّ الأنابيب

HEX → OKLCH خطّ أنابيب من 7 خطوات

يمرّ التحويل عبر خمسة تمثيلات وسيطة: HEX → sRGB صحيح → sRGB مُطبَّع (0-1) → linear-sRGB (مفكوك gamma) → CIE XYZ D65 → OKLAB → OKLCH. كل خطوة مصفوفة أو دالّة قطاعية محدّدة من مصدر أصلي. تجري الأداة خطّ الأنابيب الكامل عند كل ضغطة مفتاح؛ والرياضيات سريعة بما يكفي (ميكروثوانٍ) فلا حاجة إلى أي تأخير. يعني تسطيح ثلاثي RGB الوسيط إلى جانب OKLCH أنك تستطيع تنقيح قيمة OKLCH غير متوقّعة بفحص قنوات RGB.

دالّة gamma في CSS Color 4 §11.2

يستخدم تحويل sRGB → linear-sRGB دالّة CSS Color 4 §11.2 القطاعية: `v ≤ 0.04045 ? v/12.92 : ((v + 0.055) / 1.055)^2.4`. يتجنّب الشكل القطاعي (مع مقطع خطّي صغير قرب الصفر) عدم الاستقرار العددي لشكل الأس الصرف عند الألوان شديدة الظلمة. هذه الدالّة ذاتها التي تستخدمها ملفّات ICC لترميز sRGB والدالّة ذاتها التي تستخدمها المتصفحات داخلياً عند عرض رموز HEX. تطبّق المعكوسة من أجل OKLCH → HEX الدالّة ذاتها عكسياً: `v ≤ 0.0031308 ? v * 12.92 : 1.055 * v^(1/2.4) - 0.055`.

مصفوفة CSS Color 4 §15.1: linear-sRGB ↔ XYZ D65

تحوّل المصفوفة من CSS Color 4 §15.1 linear-sRGB إلى CIE XYZ تحت نقطة بياض D65: `X = 0.4124564 R + 0.3575761 G + 0.1804375 B`، و`Y = 0.2126729 R + 0.7151522 G + 0.0721750 B`، و`Z = 0.0193339 R + 0.1191920 G + 0.9503041 B`. يعطي صفّ Y صيغة سطوع sRGB. المصفوفة ذاتها المستخدمة في كل مكتبة إدارة ألوان، بما في ذلك ICC، ومحرّك ألوان Adobe، وخطّ أنابيب LCMS المفتوح المصدر. تطبّق المصفوفة المعكوسة من أجل OKLCH → HEX معكوس §15.1.

مصفوفات Ottosson 2020 لـOKLAB وخطوة الجذر المكعّب

يستخدم تحويل XYZ D65 → OKLAB مصفوفتَيْن وخطوة جذر مكعّب نُشرت في ورقة OKLAB الخاصّة بـBjörn Ottosson لعام 2020. تحوّل المصفوفة الأولى XYZ إلى فضاء استجابة مخروط LMS (مُنمذَج تقريبياً على حسّاسيات مخاريط L/M/S البشرية). خذ الجذر المكعّب لكل قناة لضغط المدى الديناميكي لاخطّياً (الخطوة المُصحِّحة للتوحيد الإدراكي). تحوّل المصفوفة الثانية LMS المُكَعَّب الجذر إلى إحداثيات L/a/b في OKLAB. تستخدم العمليات الثلاث كلّها القيم الدقيقة المنشورة في التنفيذ المرجعي للورقة؛ لا إعادات اشتقاق أو تقريب. تطبّق المعكوس من أجل OKLCH → HEX هذه المصفوفات بصورة معكوسة.

OKLAB ↔ OKLCH ديكارتي إلى قطبي

يشكّل محورا `a` و`b` في OKLAB مستوى chroma عمودياً على محور L. يرمّز OKLCH ذلك المستوى قطبياً: `C = sqrt(a² + b²)` (المسافة الإقليدية من الرمادي)، و`H = atan2(b, a) * 180 / π` (الزاوية بالدرجات، ملفوفة إلى 0-360°). المعكوس: `a = C * cos(H * π / 180)`، و`b = C * sin(H * π / 180)`. يُفضَّل الشكل القطبي على OKLAB لتخزين رمز التصميم لأن درجة اللون محور مستقرّ — لا يعبر تدوير درجة اللون فجأة عبر الرمادي بالطريقة التي قد يفعلها تدوير `a` أو `b` في OKLAB.

كشف النطاق عبر فحص مدى القناة

يُعدّ اللون داخل النطاق لفضاء هدف (sRGB، أو Display P3، أو Rec.2020) إذا وقعت كل قناة داخل `[-ε, 1 + ε]` بعد التحويل إلى أوّليات ذلك الفضاء، حيث `ε = 1e-7` لامتصاص ضوضاء دقّة الفاصلة العائمة حول الحدود. تتحوّل شارة النطاق لكل فضاء إلى الحمراء حين تتجاوز أي قناة المدى. OKLCH غير محدود في النطاق — `oklch(0.7 0.4 30)` إحداثية صالحة لكنها قد تتجاوز فضاء sRGB ذي البايت 256-لكلّ-قناة. يجري الفحص عند كل ضغطة مفتاح؛ وبالاقتران مع «تثبيت على sRGB»، يلتقط هذا أكثر فخاخ التبنّي شيوعاً (OKLCH واسع النطاق لا يُعرَض بصورة صحيحة على الشاشات الإرثية).

تقليص chroma ثنائي لـ«تثبيت على sRGB»

تطابق «تثبيت على sRGB» خوارزمية تخطيط النطاق الإعلامية في CSS Color 4 §13: ثبّت L وH عند القيم الحالية، وابحث ثنائياً عن C ∈ `[0, currentC]` للحصول على أكبر C يبقى تحويل sRGB الخاصّ به داخل النطاق. يجري البحث في 30 تكراراً على الأكثر (دقّة نحو 10⁻⁹)، وهو أكثر من كافٍ للدقّة البصرية. الحفاظ على L وH يعني أن اللون المُثبَّت يُقرَأ بوصفه عائلة درجة اللون ذاتها بالسطوع ذاته — يفقد الإشباع فقط. لا نقصّ قنوات RGB مباشرةً لأن ذلك يشوّه درجة اللون بشكل ملحوظ (خاصّة في الأزرقات، التي تُقصّ نحو الأرجواني).

أفضل الممارسات لسير عمل HEX / OKLCH

استخدم OKLCH صيغة الرمز القانونية في الكود الجديد

لأي نظام تصميم يُشحَن في 2025 أو ما بعد، عرّف ألوان العلامة وتدرّجات اللوحة في OKLCH. يعطي محور L تدرّجات موحّدة إدراكياً تلقائياً؛ ويستطيع محور chroma عنونة ألوان واسعة النطاق لا يستطيع HEX ترميزها. احتفظ باحتياط HEX للمتصفحات الأقدم عبر `@supports not (color: oklch(0 0 0))` أو PostCSS وقت البناء، لكن اجعل OKLCH المرجع الأصلي في مخزن رموزك. تشحن Tailwind v4 وshadcn/ui بهذه الطريقة؛ تستطيع المشاريع الجديدة اتباع قيادتهما بلا احتكاك.

ولّد التدرّجات بتدريج L مع تثبيت C وH

بناء تدرّج OKLCH القانوني: ثبّت C وH، وحرّك L بزيادات متساوية. ينتج تدرّج من 9 خطوات `oklch(L 0.15 263)` لـL = 0.1، و0.2، …، و0.9 تباعداً موحّداً بصرياً عبر كل خطوة. هذا بالضبط ما تفعله Tailwind v4 داخلياً. لا تحرّك C إلى جانب L ما لم ترد أن تتفاوت كثافة التدرّج اللونية عمداً (نادر). لا تحرّك H عبر الخطوات — حتى انحراف 5° يجعل التدرّج يبدو مشوّشاً.

طابق دقّة Tailwind v4: 3 منازل عشرية لـL+C، ومنزلة عشرية واحدة لـH

تنشر لوحة Tailwind v4 الافتراضية قيم OKLCH بثلاث منازل عشرية على L وC، ومنزلة عشرية واحدة على H — `oklch(0.629 0.193 263.4)` لـblue-500. مطابقة هذه الدقّة في رموزك يعني أن سير عمل اللصق في الإعداد ينتج قيماً مطابقة لتلك التي تشحنها Tailwind، ولن تُعلِم أدوات الفرق فروقاً زائفة. يتبع التقريب الافتراضي في الأداة هذا الاصطلاح؛ النسخ-اللصق في كتلة `@theme` دقيق على مستوى البِت.

شغّل OKLCH واسع النطاق عبر فحص نطاق Display P3

إذا كنت تستهدف عتاد Apple الحديث (iPhone، وiPad، وMacBook من 2017 فما بعد) أو تشحن محتوى واعياً بـHDR، تتيح شارات النطاق دفع C فوق سقف sRGB للمطالبة بإشباع P3 الإضافي. يحفظ ضغط chroma الذي يطبّقه المتصفح اللون من القصّ على الشاشات لـsRGB فقط. لا تثبّت مسبقاً على sRGB افتراضياً ما لم تعلم أن جمهورك بأكمله على شاشات إرثية — يفقد ذلك أكثر من 30% من الإشباع الذي يستطيع عتاد P3 عرضه.

قدّم احتياط HEX عبر `@supports` لمتصفحات ما قبل 2023

رغم أن دعم المتصفح دائم التحديث لـ`oklch()` يبلغ الآن 94%+، فإن الذيل الطويل (IE 11، وAndroid Chrome القديم، وwebviews المضمّنة) ما زال يحتاج احتياطاً. لفّ الرموز في `@supports (color: oklch(0 0 0))` وقدّم متغيّر HEX في الفرع البديل. إخراج «تثبيت على sRGB» هو ذلك الاحتياط بالضبط — مُولَّداً تلقائياً من ثلاثي OKLCH الحالي مع الحفاظ على L وH. تستطيع إضافات PostCSS وقت البناء مثل `postcss-oklab-function` أيضاً تضمين تقريب sRGB وقت التجميع.

وثّق كلّاً من OKLCH وHEX المصدر في رموزك

حين تشحن متغيّر CSS مثل `--color-primary: oklch(0.629 0.193 263.4)`، ضمّن تعليقاً بـHEX المصدر: `/* source: #3b82f6 (Tailwind blue-500) */`. بعد ستة أشهر، حين يحتاج أحدهم إلى اشتقاق تدرّج داكن مرتبط أو فحص القيمة مقابل ملفّ PDF لإرشادات العلامة، يحفظ HEX المصدر مسار المنشأ الكامل. OKLCH وحده ذو معنى لكنه أصعب تمييزاً بالعين؛ وHEX المصدر هو المعرّف الذي سيبحث عنه معظم زملاء الفريق أوّلاً.

استخدم تجزئة URL لمشاركة قرارات الألوان حيّة

يُحدِّث كل تغيير لون تجزئة URL بصيغة `#hex=3b82f6` أو `#oklch=...` تلقائياً. انسخ URL إلى محادثة Slack أو قضيّة GitHub فمن يفتحه ينزل على اللون ذاته بثلاثي OKLCH ذاته. هذا أوثق من لصق سلسلة OKLCH في الدردشة — أحياناً يخطئ المستلمون في كتابة المنازل العشرية أو يلفّون دقّة خاطئة — ويتيح لمحادثة مراجعة تصميم الإشارة إلى لون دقيق بدلاً من «الأزرق العلامة الذي ناقشناه الثلاثاء». لا تُنقَل التجزئة أبداً إلى الخادم.

الأسئلة الشائعة