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

يونيو 26, 2025

ألوان في 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 = مدى الألوان المتاحة.
  • الدوال الحديثة بتخلينا نستخدم مجالات ألوان حديثة على الويب.

المدونة

إزاي تستخدم Web Components ببساطة وذكاء

يوليو 06, 2025

إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...

تجاوز $fillable بأمان باستخدام forceFill() في Laravel

يوليو 02, 2025

تجاوز $fillable بأمان باستخدام forceFill() في Laravel جربت تستخدم create() في Laravel ولاقيت إن حقول زي role أو status مش بتتحفظ؟ ده بسبب حماية Larav...

نظرة معمقة على Laravel Context: تسجيل وتحليل السياق البرمجي باحترافية

يوليو 20, 2025

في Laravel 12، تم تقديم Laravel Context كأداة قوية بتخلي تتبع الطلبات، تسجيل الأخطاء، وتحليل سلوك الوظائف الخلفية أسهل وأدق من أي وقت فات. وده بيحصل ع...

مكونات واجهة المستخدم والتفاعل الأساسية في React Native

يوليو 01, 2025

مكونات واجهة المستخدم والتفاعل الأساسية في React Native React Native بتوفرلك مجموعة قوية من المكونات الجاهزة اللي تقدر تستخدمها لبناء تطبيقات موباي...

إزاي OAuth بيشتغل

يونيو 29, 2025

إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...

هل لارافيل بطيء؟ تحسين أداء الاستعلامات والفهارس بأمثلة

يوليو 20, 2025

دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...