ألوان في CSS - شرح مبسّط

النهارده هنتكلم عن الألوان في CSS: ازاي بنحددها، وخصوصًا الطرق الحديثة زي lab() وoklch().

1. يعني إيه لون؟

مفيش حاجة اسمها "لون" في العالم الفيزيائي. اللون هو تجربة بصرية بتتكون في المخ بعد ما العين تستقبل موجات الضوء.

2. Color spaces – مجالات الألوان

المجالات دي خرائط ثلاثية الأبعاد بتمثل الألوان. مثال:

• sRGB: المجال الافتراضي في أغلب الشاشات.
• CIELAB وOklab: مجالات بتدي نتائج ألوان أكثر انتظامًا للعين.
• color(display‑p3 ...): بتدعم ألوان أوسع على الشاشات الحديثة.

3. Color models – أنماط الألوان

زي RGB أو HSL، اللي هما بس طريقه رياضية لتمثيل اللون. بدون المجال (color space)، الوظيفة بتبقى مش واضحة.

4. Color gamut – مجال الألوان المتاح

هو مدى الألوان اللي المجال يقدر يمثلها. لو الشاشة مش قادرة على لون معين، بنقول عليه out-of-gamut.

5. Color functions – دوال الألوان في CSS

• rgb(), hsl(), hwb(): للألوان التقليدية في sRGB.
• lab(), lch(): للألوان في مجال CIELAB.
• oklab(), oklch(): للألوان في مجال Oklab.
• color(), color-mix(): للوصول لأي مجال زي display‑p3، rec2020، وغيره.

مثال كود:

.box-srgb {
  background: rgb(255, 100, 50);
}
.box-oklab {
  background: oklab(70% 0.05 -0.10);
}
.box-display-p3 {
  background: color(display-p3 1 0.2 0.3);
}

ملخص سريع (TL;DR)

• Color space = المجال اللي بيمثل الألوان.
• Color model = تمثيل رقمي بدون مجال.
• Color gamut = مدى الألوان المتاحة.
• الدوال الحديثة بتخلينا نستخدم مجالات ألوان حديثة على الويب.