هكس مقارنة بريغب مقارنة بهسل مقارنة بـ أوكيإلتش - متى يصبح كل صيغة لون كي إس مناسبة

افتح أي مكتبة كود تم كتابتها من قبل شخص تعلم CSS من W3Schools في عام 2011، وستجد جدارًا من #rrggbb القيم. تظهر HEX في كل مكان — ليس لأنها أفضل صيغة للوظيفة، بل لأنها كانت الصيغة المستخدمة في كل دروس ومحرر الألوان عندما اشتغلنا أول مرة على CSS. تظل مقبولة. لن تختفي. ولكن في عام 2026، استخدام HEX لـ كل شيء مثيل كتابة JavaScript بدون const لأنك تعلمته من مقالة من عام 2009.

توجد أربعة صيغ لون مميزة يجب معرفتها: HEX، RGB، HSL، وOKLCH. كل واحدة تُستخدم في موقف معين، وتعمل بشكل خاطئ في مواقف أخرى. إليك متى تستخدم كل واحدة منها.

HEX (#rrggbb / #rrggbbaa)

تُعبّر HEX عن اللون كأزواج من الأرقام السداسية: اثنان للحمر، اثنان للأخضر، اثنان للأزرق. #ff5733 تُترجم إلى rgb(255, 87, 51) — لون أحمر-أحمر. بدون محرر ألوان مفتوح، لا يمكنك قراءة هذا القيمة؛ يجب أن تعرفه فقط.

هناك اختصار: #f53 تُوسع إلى #ff5533. تعمل فقط عندما تكون الأرقام في كل زوج متطابقة. الشفافية هي الزوج الرابع: #ff5733cc — حيث cc هي قناة الشفافية. هذا يعادل تقريبًا 80% شفافية للذين يحسبون في المنزل (0xCC / 0xFF ≈ 0.8). مقبولة تمامًا، لكنها غير قابلة للقراءة.

عندما يكون HEX مناسبًا

• مُدخلات التصميم من Figma أو Sketch. يُصدر المصممون HEX. تُصقّه. هذا هو المسار. لا تقاومه.
• أي مكان يكون القيمة ثابتة ويُتحكم فيه أدوات بصرية. إذا كان مُحرر لون في VS Code أو أدوات تطوير المتصفح هو الذي يُنتج القيمة، فإن HEX مناسب.
• التكاملات الخارجية التي تقبل فقط مدخلات HEX.

عندما يكون استخدام HEX خطأ

• تعديل الألوان برمجيًا — لا يمكنك إجراء حسابات معقولة على #ff5733
• تعبير عن علاقات التدرج — لا يوجد طريقة منطقية لاستنتاج نسخة أخف أو أثقل
• بناء نظام تصميم مع عناصر معيارية

RGB / RGBA

تُعبّر عن نفس القنوات الحمراء، الخضراء، والأزرق بقيم عادية بسيطة. rgb(255, 87, 51) هي نفس اللون الأحمر-الأحمر كما في #ff5733، لكن القيم في القنوات على الأقل قابلة للقراءة بسهولة. صيغة مستوى لون CSS الحديثة تُزيل الحركات: rgb(255 87 51). تُعبّر الشفافية بعلامة مائلة: rgb(255 87 51 / 50%). الصيغة القديمة rgba(255, 87, 51, 0.5) تظل مقبولة — لم تُحذف المتصفحات ولا ستحذفها.

عندما يكون RGB مناسبًا

• تعديل الألوان في JavaScript. عندما تحتاج إلى تغيير الوضوح من خلال التبادل مع الأبيض: يمكنك إجراء حسابات مباشرة على القيم في القنوات.
• الكانيز والـ WebGL. الواجهات تتعامل مع أعداد من 0 إلى 255 أو أعداد من 0 إلى 1. تُمثّل RGB بشكل مباشر ما تتوقعه أنظمة البكسل.
• عندما تحصل على قيم القنوات من مُشعر أو مكتبة صور وأنك لا تحتاج إلى تحويلها.

عندما يكون استخدام RGB خطأ

• تصميم مجموعات ألوان — لا يوجد نموذج بصري للتفكير في ما يظهره التغييرات الصغيرة في القيم RGB
• إعادة تشكيل التصميم في وضع الظلام — ستحتاج إلى إعادة حساب القنوات الثلاث لتعديل الوضوح

HSL (اللون / التباين / الوضوح)

HSL هي أول صيغة تُعبّر عن كيفية تفكير الإنسان في الألوان. اللون هو زاوية على دوائر الألوان (من 0 إلى 360 درجة)، التباين يتحكم في مدى وضوح اللون (0% = أزرق، 100% = نقي)، والوضوح يتحكم في درجة الوضوح (0% = أسود، 100% = أبيض). hsl(14 100% 60%) هي نفس اللون الأحمر-الأحمر.

الميزة العملية: إذا أردت نسخة أخف من لون معين، قل قيمة الوضوح. نسخة مُخفّفة؟ قل قيمة التباين. يمكنك إنشاء مجموعات تدرج من لون واحد. هذا هو السبب في أن أنظمة متغيرات CSS المبنية على HSL شائعة:

:root {
  --brand-hue: 14;
  --brand-saturation: 100%;

  --brand-400: hsl(var(--brand-hue) var(--brand-saturation) 70%);
  --brand-500: hsl(var(--brand-hue) var(--brand-saturation) 60%);
  --brand-600: hsl(var(--brand-hue) var(--brand-saturation) 50%);
  --brand-700: hsl(var(--brand-hue) var(--brand-saturation) 40%);
}

الشفافية تعمل بنفس الطريقة كما في غيرها: hsl(14 100% 60% / 50%).

هناك محدودية حقيقية في HSL: مقياس الوضوح ليس متماثلًا بصريًا. قد تبدو لونين بقيمة L متماثلة مختلفين في الوضوح — جرب hsl(60 100% 50%) (أحمر) و hsl(240 100% 50%) (أزرق) بجانب بعضهما. يبدو الأحمر أكثر وضوحًا، حتى لو كانت القيمة L = 50% متماثلة. هذا مهم للتصميم المُتاح، وخاصة في التدرجات.

عندما يكون HSL مناسبًا

• أنظمة الألوان والرموز التصميمية. النمط المبني على اللون الواحد أعلاه مريح وقابل للقراءة.
• إعادة تشكيل الوضع الظلامي. أعد قيمة الوضوح، واحتفظ بالباقي. يعمل بشكل ناجح.
• الدرجات والظلال في متغيرات CSS المخصصة — الاستخدام الذي تم تصميمه له.

OKLCH — البدائل الحديثة

OKLCH هي ما كان ينبغي أن تكون عليه HSL. تصف اللون بثلاثة قيم: الوضوح (من 0 إلى 1)، التباين (كالسماكة، تقريبًا من 0 إلى 0.4)، واللون (من 0 إلى 360 درجة). oklch(0.65 0.18 28) هي تقريبًا نفس اللون الأحمر-الأحمر.

الفرق الرئيسي عن HSL هو التوازن البصري. في OKLCH، تبدو الألوان ذات القيمة نفسها للوضوح متساوية في الوضوح للعين البشرية. الأحمر عند L=0.65 والأزرق عند L=0.65 سيبدو أن لهما نفس الوضوح — مقارنة بـ HSL حيث يُظهر الأحمر أكثر. هذا مهم في طريقين محددين:

• التصميم المُتاح. عندما تُحسب نسب التوازن بناءً على القيم L، فإنها تُظهر ما يشعر به المستخدمون — وليس فقط ما تقوله الحسابات.
• التدرجات. تنتقل تدرجات HSL من الأزرق إلى الأحمر من خلال منطقة مُظلمة في المنتصف. أما التدرج في OKLCH فيبقى مُشرقًا طوال الوقت لأن الخطوات الوسطى تبقى بمستوى وضوح متساوي.

دعم المتصفحات في عام 2023: جميع المتصفحات الحديثة (Chrome 111+، Firefox 113+، Safari 15.4+). لا يوجد دعم لـ IE11 — ولا أحد يُطور كودًا جديدًا في عام 2026 يُركز على IE11.

أُدخلت Tailwind v4 إلى كل مكتبة الألوان باستخدام OKLCH. هذا ليس تفصيلًا بسيطًا — إنه إشارة من أقوى إطار لغة CSS أن هذا هو الاتجاه الصحيح للأنظمة المبنية على الألوان.

إذا كنت تُصمم أو تجرب تدرجات HSL أو OKLCH، فإن مُنشئ تدرج الألوان CSS على IO Tools تدعم الصيغتين مباشرة — مفيد لرؤية الفرق في جودة التدرجات بجانب بعضها.

عندما يكون OKLCH مناسبًا

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

اللون نفسه في جميع الصيغ الأربع

إليك rgb(255, 87, 51) — لون أحمر دافئ — مُعبّر في كل صيغة، مع نسخ مُشفّرة بقيمة 50%:

شكل	لون موحد	مُشفّر 50%
عرافة	#ff5733	#ff573380
اللون الأحمر والأخضر والأزرق	rgb(255 87 51)	rgb(255 87 51 / 50%)
اللغة الإنجليزية: HSL	hsl(14 100% 60%)	hsl(14 100% 60% / 50%)
OKLCH	oklch(0.65 0.18 28)	oklch(0.65 0.18 28 / 50%)

لاحظ أي صيغة ستُرغب في تعديلها يدويًا إذا أردت جعل اللون 20% أخف. HEX: ستفتح محرر ألوان. RGB: ستفعل حسابات على القيم الثلاثة. HSL: تغيير قيمة الوضوح من 60% إلى 40%. OKLCH: تغيير قيمة الوضوح من 0.65 إلى 0.45. الصيغتان HSL وOKLCH تُعبّر عن المقصود بشكل مباشر.

المسار العملي للانتقال

لا تُعيد تطوير القيم HEX القائمة. تعمل، ليست مُعطلة، والعائد على هذا التغيير هو تقريبًا صفر. اتركها.

للمشاركة الجديدة، اتبع هذه القواعد:

• الألوان الثابتة من المصممين أو الأدوات التصميمية → HEX. أدخل ما يُقدّمه Figma. لا حاجة لتحويل.
• الألوان التي تُعدلها في JavaScript أو تُرسل إلى كانيز/ويبغل → RGB. الحسابات القائمة تُمثّل بسهولة.
• المتغيرات الجديدة في CSS ورموز التصميم → HSL أو OKLCH. تريد القدرة على إنشاء تدرجات وألوان أخف وأكثر وضوحًا دون إعادة حساب القيم الثلاثة.
• أنظمة تصميم جديدة مبنية من الصفر، أو أعمال ذات تدرجات كثيرة → OKLCH. التوافق البصري يستحق التعلم البسيط للقيم المُتباينة.

نمط عملي لمتغيرات CSS في مشروع جديد:

:root {
  /* Define the base in OKLCH */
  --brand: oklch(0.65 0.18 28);

  /* Derive tonal variants by adjusting L */
  --brand-light: oklch(0.78 0.14 28);
  --brand-dark:  oklch(0.48 0.20 28);
  --brand-muted: oklch(0.65 0.08 28);

  /* Transparency with the slash syntax */
  --brand-ghost: oklch(0.65 0.18 28 / 15%);
}

هذا مُقرأ، قابل للتعديل بدون أداة، ويُنتج تدرجات أفضل من الطرق المماثلة باستخدام HSL.

الخلاصة

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

مُعوقات التحول إلى استخدام HSL أو OKLCH أقل مما يبدو. لا تحتاج إلى تغيير أي شيء — فقط ابدأ باستخدامها في مجموعة الرموز التالية التي تكتبها. المُظهر على IO Tools يُظهر أي لون عبر جميع الصيغ الأربع، وهو مرجع مفيد عند تحويل القيم HEX إلى HSL أو OKLCH لرموز جديدة. منتقي الألوان على IO Tools يُظهر أي لون عبر جميع الصيغ الأربع، وهو مرجع مفيد عند تحويل القيم HEX إلى HSL أو OKLCH لرموز جديدة.

قد يعجبك أيضاً