Lesson 15 / الدرس 15

Colors / الألوان

Set text and background colors with names, hex, rgb() and hsl() — plus currentColor, transparent, and how to check a color pair is actually readable.

اضبط ألوان النص والخلفية بالأسماء و hex و rgb() و hsl() — إضافة إلى currentColor و transparent، وكيف تتحقق أن ألوانك مقروءة فعلاً.

CSS gives you two main color properties: color for the text, and background-color for the area behind it. A third, opacity, fades the whole element instead. Each accepts the same value formats — a name, a hex code, or a function like rgb() or hsl().

تعطيك CSS خاصيتين أساسيتين للألوان: color للنص، و background-color للمساحة خلفه. أما الثالثة، opacity، فتُخفي العنصر كله بدلًا من ذلك. وكلها تقبل نفس صيغ القيمة: اسم، أو كود hex، أو دالة مثل rgb() أو hsl().

p {
    color: white;
    background-color: navy;
}

Color names are the simplest start. CSS understands about 140 of them, but a real project soon needs more precision.

Hex codes give you every color

A hex code starts with # then six characters: two for red, two for green, two for blue. #ff0000 is pure red, #000000 black, #ffffff white. When the pairs repeat, shorten it to three characters — #f00 means the same as #ff0000.

كود hex يبدأ بـ # ثم ستة أحرف: اثنان للأحمر، اثنان للأخضر، اثنان للأزرق. #ff0000 أحمر خالص، و#000000 أسود، و#ffffff أبيض. وحين يتكرر كل زوج، اختصره إلى ثلاثة أحرف — #f00 تعني نفس #ff0000.

h1 { color: #4f8cff; }
p  { color: #9aa3b6; }

Change the six characters and watch the color change. #4f8cff reads as blue only once you already know it does.

غيّر الأحرف الستة وشاهد اللون يتغير. #4f8cff لا تُقرأ كأزرق إلا إن كنت تعرف ذلك مسبقًا.

hsl() — a color you can actually reason about

hsl() describes color the way people think about it: hue, 0 to 360 on the wheel (0 red, 120 green, 240 blue); saturation, 0% gray to 100% vivid; and lightness, how close to black or white, 50% the purest hue. Darkening hex means recomputing six digits by trial and error; in hsl() you just lower the lightness and leave hue and saturation alone. hsla() adds the same alpha as rgba().

الدالة hsl() تصف اللون بالطريقة التي يفكر بها الإنسان فعلاً: الصبغة (hue) من 0 إلى 360 على العجلة (0 أحمر، 120 أخضر، 240 أزرق)؛ والتشبع (saturation) من 0% رمادي إلى 100% زاهٍ؛ والإضاءة (lightness) مدى قربه من الأسود أو الأبيض، و50% أنقى صورة للصبغة. تغميق hex يعني إعادة حساب ستة أحرف بالتجربة والخطأ؛ أما في hsl() فتكتفي بتخفيض الإضاءة وتترك الصبغة والتشبع دون لمس. وتضيف hsla() نفس alpha الموجودة في rgba().

.btn {
    background-color: hsl(210, 90%, 45%);
}

.btn:hover {
    background-color: hsl(210, 90%, 35%);
}

Hover the button. Only the lightness moved, from 45% to 35% — the same blue, just darker, with no hex digits to recompute.

rgb() takes three numbers, 0 to 255, for red, green and blue; rgba() adds a fourth, 0 to 1, for transparency — the same alpha as hsla(). Do not confuse alpha with opacity: alpha fades one color; opacity fades the whole element, text and children together. Two more values help: currentColor points at the element's own color, handy on a border so it always matches the text; transparent is a fully see-through color, useful for hiding a border without losing its space.

الدالة rgb() تأخذ ثلاثة أرقام، من 0 إلى 255، للأحمر والأخضر والأزرق؛ وتضيف rgba() قيمة رابعة، من 0 إلى 1، للشفافية — نفس alpha في hsla(). لا تخلط بين alpha وخاصية opacity: alpha تُخفي لونًا واحدًا، أما opacity فتُخفي العنصر كله، بنصه وأبنائه معًا. وهناك قيمتان مفيدتان: currentColor تشير إلى قيمة color الخاصة بالعنصر، مفيدة على border لتبقى مطابقة للنص؛ وtransparent لون شفاف تمامًا، مفيد لإخفاء حدود دون فقد مساحتها.

div {
    color: #1f5fd0;
    background-color: rgba(79, 140, 255, 0.15);
    border: 2px solid currentColor;
}

The border uses currentColor: change color above and both update together. Lower the last number in rgba() to fade the background further.

الحدود تستخدم currentColor: غيّر color أعلاها ويتحدث الاثنان معًا. قلّل الرقم الأخير في rgba() لتُخفي الخلفية أكثر.

النص منخفض التباين إخفاق في إتاحة الوصول يمكنك قياسه لا تخمينه بالعين. تحدد WCAG نسبة تباين دنيا قدرها 4.5:1 بين النص وخلفيته (و3:1 للنص الكبير الغامق)؛ والرمادي الفاتح (#999) على الأبيض يفشل في ذلك بشدة، حتى لو بدا جيدًا على شاشة ساطعة. أي أدوات مطوّر في المتصفح، أو موقع مجاني لفحص التباين، تعطيك النسبة الدقيقة خلال ثوانٍ — تحقق منها قبل نشر أي زوج ألوان لست متأكدًا منه.

Format	Example	Notes
Name	tomato	About 140 available
Hex	#4f8cff	Most common in real projects
Short hex	#f00	Only when pairs repeat
rgb()	rgb(255, 0, 0)	Numbers 0–255
rgba()	rgba(255, 0, 0, .5)	Last value is transparency (alpha)
hsl()	hsl(0, 100%, 50%)	Hue 0–360, saturation and lightness in %
hsla()	hsla(0, 100%, 50%, .5)	Same alpha as rgba()
currentColor	border: 2px solid currentColor	Reuses the element's own color value
transparent	background-color: transparent	Fully see-through, valid wherever a color is expected

Every way to write a color in CSS.

Try it live / جرّب بنفسك

<div class="card">
    <h2>Warning</h2>
    <p>Change my colors.</p>
</div>

.card {
    padding: 1rem;
    /* add your colors here */
}

Preview / المعاينة

Check yourself / اختبر نفسك

1. Which property sets the text color?

2. In hsl(210, 90%, 45%), which value do you lower to get a darker shade of the exact same color?

3. In rgba(0, 0, 0, 0.5), what does 0.5 control?

Your task / مهمتك

Style a small "warning card": a heading and a paragraph, with a colored background, readable text color, and a semi-transparent border color using rgba(). Write at least one color with hsl() instead of hex, and try using currentColor for the border.

صمّم "بطاقة تحذير" صغيرة: عنوان وفقرة، بخلفية ملونة، ولون نص مقروء، ولون حدود شبه شفاف باستخدام rgba(). اكتب لونًا واحدًا على الأقل بـ hsl() بدل hex، وجرّب استخدام currentColor للحدود.

Uses a hex color at least once تستخدم لون hex مرة واحدة على الأقل
Uses rgba() at least once تستخدم rgba() مرة واحدة على الأقل
Uses hsl() or currentColor at least once تستخدم hsl() أو currentColor مرة واحدة على الأقل
The text is easy to read on the background النص سهل القراءة على الخلفية