كيف تستخدم الألوان في CSS؟

أهلاً بك يا صديقي المبرمج في رحلتك المستمرة لتعلّم تطوير الويب. بعد أن وضعنا حجر الأساس وفهمنا كيفية أختيار العناصر في CSS باستخدام Selectors في الجزء السابق، حان الوقت لنعطي الروح الي هذه الصفحات ونجعلها جذابة بصرية وتخطف الأنظار. وكل هذا سيبدأ بفهم كيفية التعامل مع الألوان في CSS.

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

جدول الـ 140 لوناً المدعومة عالمياً

#

الألوان في CSS

#

هل سألت نفسك يوماً: “كيف يفهم الكمبيوتر أن هذا اللون هو ‘أزرق’ بينما الآخر ‘أخضر’؟”

هذه السلسلة مصممة خصيصاً لك، سواء كنت:

• مبتدئاً تماماً في عالم التنسيق (Styling) وتريد فهم الأساسيات العلمية.

• مصمماً لديه خبرة سابقة ويريد معرفة الفرق الدقيق بين أنظمة الألوان المختلفة (RGB, HEX, HSL).

• مطوراً يسعى لتحويل تصميمات (Figma) أو (Adobe XD) إلى أكواد CSS دقيقة بنسبة 100%.

أعدك أنك بنهاية هذا المقال، لن تتعامل مع الألوان كمجرد “أكواد منقولة”، بل ستفهم المنطق البرمجي والفيزيائي خلف كل بكسل يظهر على الشاشة.

كيف تُعرّف لوناً في لغة CSS؟

#

أول خطوة في طريق الاحتراف هي معرفة طريقة كتابة اكواد CSS الخاصة بالألوان. في لغة CSS، نحن لا نلون النصوص فقط، بل نتحكم في ألوان الخلفيات، الحدود (Borders)، الظلال، وحتى التدرجات.

1. الكلمات المفتاحية (Color Keywords)

#

هي أبسط طريقة؛ حيث توفر CSS حوالي 140 اسماً للألوان الجاهزة التي يفهمها المتصفح مباشرة مثل red أو blue أو darkgreen. وطبعاً سوف تجدهم جدول أعلي المقال به جميع تلك الألوان.

مثال:

h1 {
  color: tomato; /* استخدام اسم اللون مباشرة */
}

2. نظام الـ HEX (التمثيل الست عشري)

#

هو النظام الأكثر شيوعاً بين المصممين، ويبدأ دائماً بعلامة # متبوعة بـ 6 أرقام أو حروف.

مثال:

h1 {
  color: #ff0000; /* اللون الأحمر */
}

ده اللون الأحمر، وبيتكتب بست أرقام أو حروف.  أول اتنين للأحمر، الاتنين اللي بعدهم للأخضر، وآخر اتنين للأزرق.

ميزة الـ HEX إنها مختصرة وقصيرة. لكن صعب تفهم اللون بعينك.

3. نظام RGB - RGBA (الضوء)

#

يعتمد على فكرة أن شاشتك هي في الأصل “ضوء”، ويمزج ثلاث قيم (الأحمر، الأخضر، الأزرق) لإنتاج أي لون تتخيله.

مثال:

h1 {
  color: rgb(255, 0, 0);
}

نفس اللون الأحمر. بس متقسم أرقام من 0 لـ 255.

ممكن كمان نضيف شفافية:

h1 {
  color: rgba(255, 0, 0, 0.5);
}

وده بيعطيك red نصف شفاف.

• RGB: اختصار لـ Red, Green, Blue.
• RGBA: حرف الـ A هنا يعني (Alpha)، وهو المسؤول عن الشفافية. وتكون قيمته بين 0 (شفاف تماماً) و 1 (معتم تماماً).

ميزة RGB إنها منطقية أكتر من HEX.   بس برضه مش الأسهل لو عايز تعمل تدرجات ألوان.

4. نظام HSL - المفضل من المطورين

#

إذا كنت تريد نظاماً “يفهمه البشر” أكثر من الآلات، فـ HSL هو اختيارك. هو يعتمد على الطريقة التي نرى بها الألوان في الواقع.

1. Hue (الدرجة): هي مكان اللون على عجلة الألوان (من 0 إلى 360 درجة).
2. Saturation (التشبع): مدى قوة اللون (0% رمادي، 100% لون فاقع).
3. Lightness (الإضاءة): مدى قربه من الأبيض أو الأسود (0% أسود، 100% أبيض).

إزاي “تتلاعب” بالألوان في CSS وتطوعها لمزاجك؟ (Color Manipulation)

#

بص يا سيدي، زمان كان المبرمج عشان يغير درجة لون يروح يفتح الـ Photoshop أو الـ Figma ويقعد يختار درجة أفتح شوية أو أغمق شوية، لكن الـ CSS دلوقتي بقت “صايعة” تقنياً، ووفرت لنا دوال (Functions) بتخليك تعدل في الألوان وأنت واقف في مكانك جوه ملف التنسيق، وده بيديك مرونة جبارة في التصميم.

1. دوال الألوان (Color Functions)

#

تخيل إن عندك لون أساسي وعايز تطلع منه “كولكشن” كامل؟ الـ CSS وفرت لك دوال بتعمل ده في ثانية:

• دوال الـ lighten() والـ darken(): دي وظيفتها تخلي اللون “ينور” أو “يضلم”. بتديها اللون ونسبة مئوية، وهي تقوم بالواجب.

مثال:

 لو عندك برجراف لونه أخضر، وعايز تخلي العناوين أفتح بنسبة 30%، الكود هيحسبها لوحده ويطلع لك درجة متناسقة بدل ما توجع دماغك.

p {
  color: green;
}

h2 {
  color: lighten(green, 30%);
}

• دوال الـ saturate() والـ desaturate(): هنا بقى بنلعب في “زهزهة” اللون. لو عايز اللون يبقى فاقع وشبعان (Vibrant) أو مطفي وهادي شوية، الدوال دي هي الحل.

مثال:

 زرار لونه أورانج، لما المستخدم ييجي بالماوس عليه (Hover)، ممكن تخليه “مطفي” شوية بـ desaturate عشان تدي تأثير بصري شيك.

button {
  background-color: hsl(30, 80%, 60%);
}

button:hover {
  background-color: desaturate(hsl(30, 80%, 60%), 30%);
}

2. الألوان النسبية (Relative Colors)

#

دي بقى ميزة “رايقة” جداً ولسه جديدة في الـ CSS. فكرتها إنك بتقول للمتصفح: “خد اللون ده من (from) اللون الأساسي ده، بس عدل لي في جيناته شوية”.

• بتشتغل إزاي؟ بتستخدم كلمة from وبعدها اللون الأساسي، وبعدين تبدأ تلعب في قيم الـ (r, g, b, a) براحتك.

• مثال صايع: لو غيرت لون الموقع الأساسي من أزرق لأخضر، كل الألوان “النسبية” اللي معتمدة عليه هتتغير لوحدها أوتوماتيك وتحافظ على التناسق. كأنك رابطهم ببعض بـ “حبل سري”.

.header-title {
  color: blue;
}

.header-title-highlight {
  color: from blue lighten(r, 30%) saturate(g, 60%);
}

3. تحديثات CSS3.. المستقبل وصل!

#

الـ CSS3 مبطلتش ابتكار، وطلعت لنا شوية حاجات تخلي المبرمجين “يدلعوا” التصميم:

• نظام HWB: اختصار لـ (Hue, Whiteness, Blackness)، وده نظام “بشري” جداً، بتقول فيه أنا عايز الدرجة دي وعايز أزود بياض قد كذا وسواد قد كذا. أسهل بكتير في التخيل!

• أنظمة Lab و LCH: دي بقى للناس اللي بتدور على الدقة المتناهية، لأنها بتعتمد على طريقة رؤية العين البشرية الحقيقية للألوان مش مجرد أرقام ديجيتال.

• دالة color-mix(): دي بقى الخلاط بتاع الـ CSS. بتقدر تخلط لونين مع بعض بنسب معينة، زي ما بتعمل بالضبط في برامج تعديل الصور.

كلمة أخيرة: الحاجات الجديدة دي بتخلي شغلك “تقيل” ومحترف، بس دايما خلي عينك على دعم المتصفحات عشان موقعك يظهر مظبوط عند كل الناس.

تقنيات الألوان المتقدمة: إزاي تعمل “ميكس” ألوان احترافي؟ (Gradients)

#

بص يا هندسة، لو عايز تخرج من دائرة الألوان التقليدية “السادة” وتدخل في عالم الألوان المتداخلة اللي بتدي عمق وشياكة للموقع، يبقى لازم تفهم الـ Gradients (التدرجات اللونية). دي مش مجرد ألوان جنب بعض، دي عملية دمج بتخلي العين ترتاح وهي بتشوف التصميم.

في الـ CSS، عندنا كذا نوع من التدرجات، وكل نوع له “هيبته”:

1. التدرج الخطي (Linear Gradients): ماشي في خط مستقيم

#

ده النوع الأكثر استخداماً، وفكرته إن الألوان بتتحرك في خط مستقيم من نقطة لنقطة. إنت اللي بتحدد الاتجاه (يعني تقوله: “يا لون امشي ناحية اليمين” أو “انزل لتحت بزاوية”).

الكود بيقول إيه؟

background: linear-gradient(to right, red, orange, yellow); /* تدرج بيبدأ من الشمال لليمين وبيمر بـ 3 ألوان */

2. التدرج الدائري (Radial Gradients): طالع من المركز

#

تخيل إنك رميت حجر في مية، والألوان بتبدأ تخرج من المركز لبره على شكل دايرة أو شكل بيضاوي. ده ممتاز جداً لو عايز تعمل تأثير “إضاءة” في نص العنصر.

الكود بيقول إيه؟

background: radial-gradient(blue, lightblue); /* تدرج بيبدأ من الأزرق في المركز وبينتهي بالأزرق الفاتح */

3. التدرجات المتكررة (Repeating Gradients): شغل النقشات

#

ده بقى للمحترفين اللي عايزين يعملوا “تخطيط” أو “نقشات” (Patterns) من غير ما يستخدموا صور. إنت بتعمل تدرج صغير وبتقوله: “كرر نفسك لحد ما تملى المساحة”.

الكود بيقول إيه؟

background: repeating-linear-gradient(45deg, black, black 10px, white 10px, white 20px); /* تأثير الخطوط المايلة (زي ورق الزينة) */

نصيحة من “صنايعي” كود: بدل ما تقعد تجرب الأرقام وتتعب قلبك، في مواقع اسمها Gradient Generators بتخليك ترسم التدرج بالماوس وتديك الكود جاهز “على المفتاح”. استخدمها ووفر وقتك للإبداع!

وعندك كمان على موقعنا هنا CSS Gradiant Playground تقدر تلعب فيه شوية وتشوف النتايج اللي هتظهرلك.

إزاي تخلي ألوان موقعك “تتحرك” وترد على المستخدم؟ (Animations & Transitions)

#

بص يا سيدي، الألوان السادة جميلة، بس الألوان اللي بتتحرك بتدي “روح” للموقع وتخلي الزائر يحس إن الموقع بيتفاعل معاه. الـ CSS بتديك طريقتين عشان تعمل الحركة دي:

1. الـ Transitions (النقلة الناعمة)

#

دي بنستخدمها لما نكون عايزين اللون يتغير “بالتدريج” لما يحصل حاجة، زي مثلاً لما المستخدم يقف بالماوس على زرار. بدل ما اللون يقلب فجأة من أزرق لأخضر ويخض العين، بنخليه يتغير في نص ثانية بنعومة.

الكود بيقول إيه؟*

button {
   background-color: blue;
   transition: background-color 0.5s ease-in-out; /* غير اللون في نص ثانية بنعومة */
}

button:hover {
   background-color: green; /* اللون اللي هيتحول له */
}

2. الـ Animations (الحركة المستمرة)

#

هنا بقى إنت بتعمل “فيلم قصير” للون. باستخدام الـ @keyframes بتحدد نقط بداية ونهاية ونقط في النص، واللون بيفضل يلف بينهم.

مثال: زرار “بينبض” (Pulse) بلون أحمر لأصفر عشان يلفت الانتباه.

الـ CSS (Filters): “فوتوشوب” جوه المتصفح

#

من غير ما تفتح برامج تعديل صور، الـ CSS بتقدم لك “فلاتر” جاهزة تغير شكل الصور أو الخلفيات بكلمة واحدة:

• grayscale(): يقلب الصورة أبيض وإسود.
• sepia(): يدي تأثير الصور القديمة (البني).
• blur(): يخلي الصورة “مغلغلة” أو مش واضحة (تمويه).
• hue-rotate(): يلف الألوان على دايرة الألوان ويغيرها تماماً.

المتغيرات (CSS Variables): ذكاء المبرمجين

#

لو موقعك فيه 100 صفحة، وقررت تغير اللون الأساسي من أزرق لأخضر، هل هتمشي على صفحة صفحة؟ طبعاً لأ! هنا بييجي دور المتغيرات (Variables).

• بتشتغل إزاي؟ بتعرف اللون مرة واحدة فوق خالص في الـ :root وتديله اسم سهل (زي --main-color).

• الفايدة؟ لما تحب تغير اللون، بتغيره في مكان واحد بس، والموقع كله بيسمع فيه فوراً.

:root {
  --primary-color: #007bff; /* عرفنا اللون هنا */
}

h1 {
  color: var(--primary-color); /* استخدمناه هنا */
}

نصيحة الزتونة: المتغيرات بتخلي الكود بتاعك “نضيف” ومفهوم لأي حد يقرأه بعدك، وبتسهل عليك جداً لو عايز تعمل “Dark Mode” لموقعك في المستقبل.

كلمة عن الأدوات المساعدة (Sass & Less)

#

فيه حاجات اسمها “Preprocessors” زي Sass، دي بتديك عضلات أكتر في التعامل مع الألوان، زي إنك تعمل عمليات حسابية على الألوان أو تحط متغيرات جوه متغيرات. مش ضرورية في البداية، بس لما مشروعك يكبر، هتكون هي إيدك اليمين.

ما هي أكواد الألوان للتصميم؟ (نصائح عملية)

#

لا يكفي أن تعرف كيف تكتب الكود، بل يجب أن تعرف كيف تختار اللون الصحيح. إليك أهم القواعد التي يتبعها المحترفون:

• قاعدة 60-30-10:
• 60% لون أساسي (غالباً للخلفيات والمساحات الكبيرة).
• 30% لون ثانوي (للعناوين والحدود).
• 10% لون لفت الانتباه (لأزرار الإرسال Submit أو الروابط الهامة).
• التباين (Contrast): تأكد دائماً أن لون النص متباين جداً مع لون الخلفية لسهولة القراءة (Accessibility).

أين تضع أكواد الألوان في صفحة الويب؟

#

كما تعلمنا في أول درس في سلسلة تعلم الـ CSS والذي يسمي 3 طرق لربط CSS بـ HTML.

لدينا عدة أماكن لوضع التنسيقات:

1. داخل ملف CSS خارجي (الأفضل): نربطه بوسم <link> داخل الـ <head>.
2. داخل وسم <style>: في رأس الصفحة مباشرة.
3. تنسيق مباشر (Inline Styling): داخل العنصر نفسه باستخدام خاصية style.

خلاصة الرحلة مع الألوان

#

لقد قطعت شوطاً كبيراً اليوم! تعلمت أن الألوان في CSS ليست مجرد أشكال جمالية، بل هي نظام متكامل من البيانات (Data) التي تتعامل معها المتصفحات ومحركات البحث بدقة.

تذكر دائماً:

• استخدم HEX للثبات والسرعة.
• استخدم RGBA إذا كنت بحاجة للشفافية.
• استخدم HSL إذا كنت تصمم نظام ألوان مرن وسهل التعديل.
• لا تنسَ الوسوم الدلالية (Semantic Tags) لتنظيم هيكلك قبل تلوينه، لضمان أفضل نتائج في السيو.

الأسئلة الشائعة حول ألوان CSS

#