تحويل HEX إلى OKLCH

OKLCH صار صيغة مفضلة لأنظمة التصميم في CSS لأنه يسمح بتفتيح اللون أو تغميقه دون أن تنحرف صبغته.

جارٍ تحميل الأداة…

المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.

طريقة الاستخدام

  1. أدخل رمز اللون HEX.
  2. تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
  3. انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.

طريقة الحساب

تُفك ترميز كل قناة من 0 إلى 1 حسب IEC 61966-2-1: إذا كانت c ≤ 0.04045 فالخطية = c / 12.92، وإلا ((c + 0.055) / 1.055)^2.4. من RGB الخطي: l = ∛(0.4122·R + 0.5363·G + 0.0514·B)، m = ∛(0.2119·R + 0.6807·G + 0.1074·B)، s = ∛(0.0883·R + 0.2817·G + 0.6300·B)، ثم L = 0.2105·l + 0.7936·m − 0.0041·s، a = 1.9780·l − 2.4286·m + 0.4506·s، b = 0.0259·l + 0.7828·m − 0.8087·s (مصفوفات Ottosson الكاملة بعشر خانات). C = √(a² + b²)، h = atan2(b, a) بالدرجات من 0 إلى 360.

مثال

المدخلات: رمز اللون HEX = #FF5733. النتيجة: صيغة CSS: oklch(0.6804 0.21 33.69)، الإضاءة L (من 0 إلى 1): 0.6804، الكروما C: 0.21.

#FF5733
oklch(0.6804 0.21 33.69)

الحدود والملاحظات

  • يفترض أن HEX وRGB في فضاء sRGB؛ ألوان Display P3 أو Adobe RGB تحتاج ملف ICC خاصا بها.
  • للرماديات الكروما قرابة الصفر والصبغة غير معرفة، فتظهر 0.

أسئلة شائعة عن هذه الأداة

ما مدى الكروما في OKLCH؟

ألوان sRGB تصل إلى قرابة 0.32، أما الشاشات الأوسع مثل P3 فتسمح بقيم أعلى قليلا.

كيف أصنع درجات أفتح من نفس اللون؟

غيّر L فقط مع إبقاء C وH كما هما، وقد تحتاج خفض C قليلا للدرجات الفاتحة جدا حتى تبقى داخل sRGB.

هل صبغة OKLCH مثل صبغة HSL؟

لا، الزوايا مختلفة. الأحمر النقي مثلا يقع عند 29 تقريبا في OKLCH وعند 0 في HSL.