خصائص الألوان في CSS — دليل شامل لمطوري الويب

أهم خاصيتين للألوان في CSS هما color (للنص) وbackground-color (لخلفيات العناصر). تقبلان أي قيمة لون CSS صالحة. خاصية color تحدد لون المقدمة للعنصر. خاصية background-color تملأ كامل منطقة المحتوى والحشو للعنصر.

تطور CSS إلى ما هو أبعد من rgb() وhsl() الأساسية: دالة rgb() تدعم الآن الصيغة الحديثة: rgb(255 0 0). شفافية ألفا تستخدم الشرطة المائلة: rgb(255 0 0 / 50%). hsl() تعمل بالمثل. HSL مفيدة لإنشاء تنويعات لونية. دالة color-mix() تمزج لونين. oklch() وoklab() توفران فضاءات لونية موحدة إدراكيًا.

تدرجات CSS تنشئ انتقالات لونية سلسة: التدرجات الخطية تتدفق في خط مستقيم: background: linear-gradient(to right, #ff0000, #0000ff). التدرجات الدائرية تشع من نقطة مركزية: background: radial-gradient(circle, red, blue). التدرجات المخروطية تدور حول نقطة مركزية. ممتازة لإنشاء عجلات الألوان.

يوفر CSS طرقًا متعددة للتحكم في الشفافية: خاصية opacity تؤثر على العنصر بالكامل وجميع أبنائه. قنوات ألفا في قيم الألوان تؤثر فقط على الخاصية المحددة. الكلمة المفتاحية transparent تساوي rgba(0, 0, 0, 0). currentColor ترث لون النص الحالي.

الخصائص المخصصة في CSS هي أساس أنظمة الألوان الحديثة. تحدد الألوان مرة واحدة وتعيد استخدامها في كامل ورقة الأنماط. للوضع الداكن، ببساطة أعد تعريف المتغيرات. أداة منتقي الألوان لدينا تولد قيم الألوان بجميع تنسيقات CSS فوريًا.