دنیای رنگارنگ CSS 🌈

رنگ‌ها روح طراحی وب هستن. CSS راه‌های مختلفی برای تعریف رنگ داره.

۱. رنگ‌های نامی (Named Colors)

CSS حدود ۱۴۰ نام رنگ داره که می‌تونید مستقیماً استفاده کنید:

h1 {
  color: red;
  background-color: lightblue;
  border-color: #F1F5F9;
}

رنگ‌های رایج: red, blue, green, yellow, orange, purple, pink, black, white, gray, brown...

۲. رنگ‌های هگز (Hexadecimal)

محبوب‌ترین روش! با # شروع میشه و ۶ کاراکتر داره:

#RRGGBB
 ││││││
 ││││└└─ Blue (آبی)
 ││└└─── Green (سبز)  
 └└───── Red (قرمز)

body {
  background-color: #f5f5f5; /* خاکستری خیلی روشن */
  color: #f8fafc;            /* خاکستری تیره (تقریباً مشکی) */
}

.button-primary {
  background-color: #F1F5F9; /* آبی استاندارد Bootstrap */
}

.success {
  color: #F1F5F9;            /* سبز موفقیت */
}

.danger {
  color: #dc3545;            /* قرمز خطر */
}

۳. RGB (Red, Green, Blue)

هر رنگ رو با ترکیب قرمز، سبز و آبی (از ۰ تا ۲۵۵) می‌سازید:

rgb(255, 0, 0)     /* قرمز خالص */
rgb(0, 255, 0)     /* سبز خالص */
rgb(0, 0, 255)     /* آبی خالص */
rgb(255, 255, 0)   /* زرد (قرمز + سبز) */
rgb(128, 128, 128) /* خاکستری */

۴. RGBA (با شفافیت!)

مثل RGB ولی یک پارامتر چهارم داره: Alpha (میزان کدری، از ۰ تا ۱)

rgba(255, 0, 0, 1.0)   /* قرمز کاملاً مات */
rgba(255, 0, 0, 0.5)   /* قرمز نیمه‌شفاف */
rgba(255, 0, 0, 0.1)   /* قرمز تقریباً شفاف */
rgba(0, 0, 0, 0.8)     /* سایه مشکی شیک */

.overlay {
  background-color: rgba(0, 0, 0, 0.7); /* پس‌زمینه مشکی شفاف روی عکس */
}

.glass-effect {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px); /* افکت شیشه‌ای */
}

۵. HSL (Hue, Saturation, Lightness)

روشی شهودی‌تر برای انتخاب رنگ:

• ▹Hue (رنگ فام): از ۰ تا ۳۶۰ (مثل چرخ رنگ) - ۰=قرمز، ۱۲۰=سبز، ۲۴۰=آبی
• ▹Saturation (اشباع): از ۰٪ تا ۱۰۰٪ - ۰٪=خاکستری، ۱۰۰٪=رنگ خالص
• ▹Lightness (روشنایی): از ۰٪ تا ۱۰۰٪ - ۰٪=سیاه، ۵۰٪=عادی، ۱۰۰٪=سفید

hsl(0, 100%, 50%)     /* قرمز خالص */
hsl(120, 100%, 50%)   /* سبز خالص */
hsl(240, 100%, 50%)   /* آبی خالص */
hsl(0, 100%, 75%)     /* قرمز روشن */
hsl(0, 50%, 50%)      /* قرمزکم‌رنگ */

--primary: hsl(210, 80%, 50%);   /* آبی اصلی */
--primary-light: hsl(210, 80%, 70%);  /* آبی روشن */
--primary-dark: hsl(210, 80%, 30%);   /* آبی تیره */

<button class="btn-gradient">کلیک کنید</button>

.btn-gradient {
  background-color: #10b981;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

.btn-gradient:hover {
  background-color: #F1F5F9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}