ما هو OKLCH ولماذا يجب أن أستخدمه بدلاً من HEX أو HSL؟

OKLCH (الإضاءة، التشبع، الصبغة) هو فضاء ألوان إدراكي موحد مبني على نموذج Oklab. على خلاف HEX أو HSL، تُنتج التغييرات الرقمية المتساوية في OKLCH فروقاً إدراكية متساوية. هذا يجعله مثالياً لتصميم لوحات ألوان شاملة، وإنشاء تدرجات سلسة، وتوليد مقاييس ألوان متناسقة لـ Tailwind v4.

كيف أحوّل HEX إلى OKLCH؟

الصق قيمة HEX (مثل #3b82f6) في حقل إدخال HEX وسيتحدث حقل OKLCH فوراً بالتدوين المكافئ oklch(0.6 0.18 250). تتزامن جميع التنسيقات الأخرى أيضاً في نفس الوقت — OKLab و RGB و HSL — مما يوفر عليك الحاجة إلى إجراء تحويلات متعددة يدوياً.

ماذا يعني 'خارج نطاق sRGB' وما الذي يحدث للون؟

بعض ألوان OKLCH — ولا سيما ذات التشبع العالي — تتجاوز فضاء ألوان sRGB الذي تستخدمه معظم الشاشات. عند حدوث ذلك، تطبّق الأداة خوارزمية toGamut الخاصة بـ CSS Color 4 للعثور على أقرب لون sRGB قابل للعرض. تظهر لافتة تحذير بلون العنبر تُظهر القيمة الأصلية الخارجة عن النطاق إلى جانب النتيجة المُعيَّنة.

كيف يعمل مولّد لوحة ألوان Tailwind v4 OKLCH؟

يستخدم المولّد جدول إضاءة Tailwind v4 الرسمي (50=0.971، 100=0.945، حتى 950=0.238) مطبقاً على صبغتك وتشبعك الحاليين. يُنتج 11 خطوة لونية من الفاتح إلى الداكن ويُصدّرها كمقطع كود ‎@theme { --color-brand-50: oklch(...); }‎ جاهز للصق مباشرة في ملف CSS.

لماذا يبدو تدرج OKLCH أفضل من HSL للتدرجات اللونية؟

يعمل HSL على إحداثيات أسطوانية لا تتطابق مع الإدراك البشري، مما يُسبب كثيراً انخفاضات رمادية أو تحولات صبغة غير متوقعة في منتصف التدرج. في المقابل، يتدرج OKLCH في فضاء Oklab الإدراكي الموحد، فتتحول الإضاءة والتشبع بسلاسة دون أي انعكاسات لونية غير متوقعة، مما يمنحك تدرجات أكثر جمالاً وطبيعية.

هل محوّل OKLCH هذا مجاني وخاص؟

نعم. الأداة مجانية تماماً وتعمل بالكامل في متصفحك باستخدام مكتبة culori. لا يتم رفع أي قيم ألوان إلى خادم، وجميع عمليات الحساب والتحويل تجري محلياً على جهازك.

هل يعمل CSS Color 4 OKLCH في جميع المتصفحات؟

نعم، يدعم بناء جملة لون OKLCH ‎(oklch())‎ جميع المتصفحات الحديثة اعتباراً من عام 2023، بما في ذلك Chrome 111 فأحدث، وFirefox 113 فأحدث، وSafari 15.4 فأحدث، وEdge 111 فأحدث. للمتصفحات القديمة، استخدم قيم HEX أو RGB الاحتياطية التي يوفرها هذا المحوّل.

أدوات الألوان

محوّل OKLCH – CSS Color 4 ومولّد لوحة ألوان Tailwind v4

محوّل OKLCH مجاني مع مزامنة فورية بين OKLCH و OKLab و RGB و HSL و HEX. يشمل شرائح L/C/H/alpha وتعيين نطاق CSS Color 4 وتصدير لوحة ألوان Tailwind v4.

OKLCH (الإضاءة، التشبع، الصبغة) هو فضاء ألوان إدراكي موحد مبني على نموذج Oklab وتم اعتماده رسمياً في CSS Color Level 4. على خلاف RGB أو HSL، يحافظ OKLCH على ثبات الإضاءة المُدرَكة عبر الصبغات المختلفة، مما يجعله مثالياً لأنظمة الألوان الشاملة ولوحات Tailwind v4 والتدرجات السلسة.

كيفية استخدام محوّل ألوان OKLCH

1
أدخل قيمة اللون
اكتب أو الصق قيمة بأي تنسيق مدعوم: oklch(0.6 0.18 250)، أو #3b82f6، أو rgb(59, 130, 246)، أو hsl(217deg 91% 60%)، أو oklab(0.6 -0.056 -0.169). تتم مزامنة جميع التنسيقات الأخرى فوراً.
2
ضبط دقيق عبر شرائح L/C/H/Alpha
اسحب شرائح الإضاءة (L) أو التشبع (C) أو الصبغة (H) أو الشفافية (Alpha). يُظهر شريط التشبع علامة حدود نطاق sRGB حتى تعرف دائماً متى يتجاوز اللون نطاق الشاشة القياسي.
3
تحقق من تحذير النطاق إذا ظهر
إذا كان لون OKLCH خارج نطاق sRGB، تظهر لافتة تحذير بلون العنبر تُظهر القيمة الأصلية ونتيجة تعيين CSS Color 4 toGamut المستخدمة للعرض.
4
توليد لوحة ألوان Tailwind v4
يُولّد قسم لوحة ألوان Tailwind v4 OKLCH تلقائياً خطوات الألوان من 50 إلى 950 لصبغتك الحالية، وفقاً لجدول إضاءة Tailwind الرسمي. انقر فوق نسخ للصق كتلة @theme مباشرة في ملف CSS.

المراجع

W3C CSS Color Level 4 – oklch()
مواصفة W3C التي تُعرّف تدوين لون OKLCH وخوارزميات تعيين النطاق.
Culori – مكتبة JavaScript للألوان
المكتبة مفتوحة المصدر التي تُشغّل تحويل OKLCH وتعيين toGamut والتدرج الإدراكي في هذه الأداة.
Evil Martians – OKLCH في CSS: لماذا نتخلى عن RGB و HSL؟
دليل شامل يشرح مزايا OKLCH على RGB و HSL في العمل بالألوان الحديث.
Tailwind CSS v4 – لوحة الألوان الافتراضية
توثيق لوحة ألوان Tailwind الرسمية، بما في ذلك قيم إضاءة OKLCH المستخدمة في مولّد هذه اللوحة.

أدوات ذات صلة

محوّل الألوان

تحويل بين RGB و RGBA و HEX و HSL و HSV و CMYK مع مزامنة فورية ثنائية الاتجاه.

مصغّر CSS

تصغير ملفات CSS التي تستخدم قيم ألوان OKLCH.

عارض SVG

معاينة وفحص رسومات SVG التي تستخدم قيم OKLCH للتعبئة والحدود.

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

ما هو OKLCH ولماذا يجب أن أستخدمه بدلاً من HEX أو HSL؟: OKLCH (الإضاءة، التشبع، الصبغة) هو فضاء ألوان إدراكي موحد مبني على نموذج Oklab. على خلاف HEX أو HSL، تُنتج التغييرات الرقمية المتساوية في OKLCH فروقاً إدراكية متساوية. هذا يجعله مثالياً لتصميم لوحات ألوان شاملة، وإنشاء تدرجات سلسة، وتوليد مقاييس ألوان متناسقة لـ Tailwind v4.
كيف أحوّل HEX إلى OKLCH؟: الصق قيمة HEX (مثل #3b82f6) في حقل إدخال HEX وسيتحدث حقل OKLCH فوراً بالتدوين المكافئ oklch(0.6 0.18 250). تتزامن جميع التنسيقات الأخرى أيضاً في نفس الوقت — OKLab و RGB و HSL — مما يوفر عليك الحاجة إلى إجراء تحويلات متعددة يدوياً.
ماذا يعني 'خارج نطاق sRGB' وما الذي يحدث للون؟: بعض ألوان OKLCH — ولا سيما ذات التشبع العالي — تتجاوز فضاء ألوان sRGB الذي تستخدمه معظم الشاشات. عند حدوث ذلك، تطبّق الأداة خوارزمية toGamut الخاصة بـ CSS Color 4 للعثور على أقرب لون sRGB قابل للعرض. تظهر لافتة تحذير بلون العنبر تُظهر القيمة الأصلية الخارجة عن النطاق إلى جانب النتيجة المُعيَّنة.
كيف يعمل مولّد لوحة ألوان Tailwind v4 OKLCH؟: يستخدم المولّد جدول إضاءة Tailwind v4 الرسمي (50=0.971، 100=0.945، حتى 950=0.238) مطبقاً على صبغتك وتشبعك الحاليين. يُنتج 11 خطوة لونية من الفاتح إلى الداكن ويُصدّرها كمقطع كود ‎@theme { --color-brand-50: oklch(...); }‎ جاهز للصق مباشرة في ملف CSS.
لماذا يبدو تدرج OKLCH أفضل من HSL للتدرجات اللونية؟: يعمل HSL على إحداثيات أسطوانية لا تتطابق مع الإدراك البشري، مما يُسبب كثيراً انخفاضات رمادية أو تحولات صبغة غير متوقعة في منتصف التدرج. في المقابل، يتدرج OKLCH في فضاء Oklab الإدراكي الموحد، فتتحول الإضاءة والتشبع بسلاسة دون أي انعكاسات لونية غير متوقعة، مما يمنحك تدرجات أكثر جمالاً وطبيعية.
هل محوّل OKLCH هذا مجاني وخاص؟: نعم. الأداة مجانية تماماً وتعمل بالكامل في متصفحك باستخدام مكتبة culori. لا يتم رفع أي قيم ألوان إلى خادم، وجميع عمليات الحساب والتحويل تجري محلياً على جهازك.
هل يعمل CSS Color 4 OKLCH في جميع المتصفحات؟: نعم، يدعم بناء جملة لون OKLCH ‎(oklch())‎ جميع المتصفحات الحديثة اعتباراً من عام 2023، بما في ذلك Chrome 111 فأحدث، وFirefox 113 فأحدث، وSafari 15.4 فأحدث، وEdge 111 فأحدث. للمتصفحات القديمة، استخدم قيم HEX أو RGB الاحتياطية التي يوفرها هذا المحوّل.