تعریف

در CSS برای تعیین رنگ متن، پس‌زمینه، حاشیه و … از رنگ‌ها استفاده می‌کنیم.

• پراپرتی color → تغییر رنگ متن

• پراپرتی background-color → تغییر رنگ پس‌زمینه

📍 روش‌های تعریف رنگ در CSS

1. نام رنگ‌ها (Color Names)

بیش از 140 نام رنگ استاندارد در CSS پشتیبانی می‌شود.

مثال:

h1 { color: red; }
p { background-color: green; }

🔹 مثال رنگ‌ها: red, blue, green, brown, coral, aqua

2. کد هگزادسیمال (Hexadecimal)

کد رنگ هگزادسیمال از ۶ رقم تشکیل شده است:

• RR → مقدار قرمز (00–FF)

• GG → مقدار سبز (00–FF)

• BB → مقدار آبی (00–FF)

مثال:

p { color: #00ff00; } /* سبز */

3. مدل رنگی RGB

مدل RGB از سه مقدار (قرمز، سبز، آبی) تشکیل شده که بین 0 تا 255 یا درصدی بیان می‌شوند.

مثال:

h2 { color: rgb(255, 0, 0); }   /* قرمز */
h3 { color: rgb(0, 0, 100%); }  /* آبی */

4. مدل رنگی RGBA (با شفافیت)

مدل RGBA مثل RGB است با یک مقدار اضافه به نام Alpha (شفافیت).

• مقدار Alpha بین 0 (کاملا شفاف) تا 1 (کاملا پررنگ) است.

مثال:

h5 { background-color: rgba(123, 215, 87, 0.2); }

5. مدل رنگی HSL

مدل HSL مخفف:

• Hue → طیف رنگی (0 تا 360)

o 0 = قرمز، 120 = سبز، 240 = آبی

• Saturation → میزان اشباع رنگ (0% تا 100%)

• Lightness → میزان روشنایی رنگ (0% سیاه – 100% سفید)

مثال:

div { color: hsl(120, 100%, 50%); } /* سبز خالص */

6. مدل رنگی HSLA (با شفافیت)

مثل HSL است با یک مقدار Alpha برای شفافیت.

مثال:

div { color: hsla(312, 100%, 60%, 0.4); }

✨ نکات تکمیلی

و رنگ‌ها علاوه بر متن و پس‌زمینه، در ویژگی‌هایی مثل border, outline, box-shadow هم استفاده می‌شوند.

• CSS از gradient (گرادیان) هم پشتیبانی می‌کند (خطی و دایره‌ای).