CSS: ألوان CSS

آخر تحديث: 2026-10-13

✅ نوصي بـ HSL: HSL ودية جداً للمصممين — عند تعديل الألوان، تحتاج فقط لتغيير قيمة اللون (H) مع الحفاظ على التشبع والسطوع ثابتين للحصول على درجات مختلفة من نفس عائلة الألوان.

📌 حالة استخدام: قناة A (ألفا) في RGBA تتيح لك التحكم في الشفافية، مثالية للأقنعة المتراكبة والخلفيات شبه الشفافة. مثلاً، rgba(0, 0, 0, 0.5) هي طبقة سوداء شفافة بنسبة 50%.

💡 نصيحة: #FF0000 يمكن اختصاره إلى #F00 — عندما يكون كل زوج في الأرقام الستة متماثلاً، يمكن ضغطه إلى ثلاثة أرقام. كذلك #aabbcc تصبح #abc. يستحق حفظ القيم السداسية عشرية للألوان الشائعة: #fff (أبيض)، #000 (أسود)، #f00 (أحمر).

الألوان هي أحد العناصر البصرية الأكثر أساسية في تصميم الويب. CSS يوفر طرقاً متعددة لتمثيل الألوان، من أسماء الألوان البسيطة إلى HSL المرنة، لكل منها حالات استخدامها المناسبة.

مرجع سريع لقيم الألوان

التنسيق	مثال	الوصف
اسم اللون	`red`، `blue`، `tomato`، `skyblue`	بديهي لكن محدود (~140 لون)
HEX	`#ff0000`، `#333`، `#e3f2fd`	التنسيق الأكثر شيوعاً، 6 أو 3 أرقام مختصرة
RGB	`rgb(255, 0, 0)`، `rgb(51, 51, 51)`	قيم أحمر، أخضر، أزرق 0-255
RGBA	`rgba(255, 0, 0, 0.5)`	RGB + شفافية (ألفا: 0-1)
HSL	`hsl(0, 100%, 50%)`	لون(0-360) + تشبع(0-100%) + سطوع(0-100%)
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL + شفافية
`opacity`	`0.5`، `1`، `0.25`	شفافية شاملة (تؤثر على جميع المحتوى بما في ذلك الأبناء)

خصائص هذا القسم: opacity

1. أسماء الألوان

CSS يدعم أكثر من 140 اسم لون مُعرَّف مسبقاً، الأكثر بديهية في الاستخدام.

▶ مثال

▶ جرّب الكود

أسماء الألوان الشائعة تشمل: red، blue، green، black، white، gray، orange، purple، yellow، pink، gold، navy، teal، coral، tomato، skyblue، violet، brown، cyan، magenta، lime، olive، silver.

📌 نصيحة: أسماء الألوان بسيطة وبديهية، رائعة للنمذجة السريعة. لكن في بيئات الإنتاج، أسماء الألوان لديها خيارات محدودة وتفتقر إلى الدقة — يُنصح بالتدوين السداسي عشري أو RGB.

2. سداسي عشري (HEX)

الألوان السداسية عشرية تبدأ بـ #، التنسيق #RRGGBB حيث RR هو أحمر، GG هو أخضر، BB هو أزرق، النطاق 00 إلى FF (سداسي عشري).

▶ مثال

▶ جرّب الكود

قواعد الاختصار:

#FF0000 → #F00 (أحمر)
#00FF00 → #0F0 (أخضر)
#0000FF → #00F (أزرق)
#aabbcc → #abc

3. RGB و RGBA

RGB يستخدم قيماً عشرية 0-255 لقنوات الأحمر والأخضر والأزرق. RGBA يضيف شفافية ألفا (0-1).

▶ مثال

▶ جرّب الكود

4. HSL و HSLA

HSL يستخدم اللون (0-360)، التشبع (0-100%)، السطوع (0-100%). HSLA يضيف شفافية ألفا.

▶ مثال

▶ جرّب الكود

5. خاصية opacity

خاصية opacity تتحكم في شفافية العنصر الشاملة (0-1)، مؤثرة على جميع المحتوى بما في ذلك الأبناء.

▶ مثال

▶ جرّب الكود

خصائص هذا القسم: opacity

❓ أسئلة شائعة

س ما الفرق بين ألوان HEX و RGB؟

ج كلاهما يمثل نفس اللون، فقط بتنسيقات مختلفة. HEX يستخدم 6 أرقام سداسية عشرية (0-9، A-F)، RGB يستخدم ثلاثة أرقام عشرية (0-255). HEX أكثر إيجازاً (مثلاً #ff0000)، RGB أكثر بديهية لفهم القيم (مثلاً rgb(255, 0, 0)). في الممارسة، HEX يُستخدم بشكل أكثر شيوعاً.

س متى أستخدم RGBA مقابل opacity؟

ج RGBA تتحكم في شفافية خاصية محددة (مثل الخلفية)، بينما opacity تتحكم في شفافية العنصر بأكمله بما في ذلك جميع الأبناء. إذا أردت شفافية الخلفية فقط without التأثير على النص، استخدم RGBA. إذا أردت العنصر كاملاً شفافاً، استخدم opacity.

س ما ميزة HSL على RGB؟

ج HSL أكثر بديهية للمصممين. يمكنك بسهولة إنشاء تنويعات ألوان بتعديل اللون فقط مع الحفاظ على التشبع والسطوع ثابتين. RGB يتطلب تعديل ثلاث قيم في وقت واحد. HSL تجعل من الأسهل إنشاء مخططات ألوان متناسقة وفهم العلاقات بين الألوان.

📖 ملخص

CSS يوفر طرقاً متعددة لتمثيل الألوان: أسماء، HEX، RGB/RGBA، HSL/HSLA
HEX هو التنسيق الأكثر استخداماً، HSL هو الأكثر ودية للمصممين
RGBA و HSLA يضيفان التحكم في الشفافية لـ RGB و HSL
opacity تؤثر على العنصر بأكمله بما في ذلك الأبناء
اختر التنسيق الذي يناسب سير عملك وحالتك

📝 تمارين

أنشئ لوحة ألوان باستخدام 5 طرق مختلفة لتمثيل الألوان على الأقل.
أنشئ تأثير تراكب شفاف باستخدام RGBA.
أنشئ مخطط ألوان باستخدام HSL ب변_valor فقط قيمة اللون.
قارن بين opacity: 0.5 وbackground: rgba(0,0,0,0.5).

فريق Web-Tutorial التقني

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

من نحن