رنگ‌ها

در HTML می‌تونی برای متن، پس‌زمینه، لینک‌ها و خیلی از عناصر دیگه رنگ تعریف کنی. این کار معمولا با کمک CSS انجام میشه (چه داخل تگ‌ها، چه در فایل جداگانه).

📌 روش‌های استفاده از رنگ در HTML

1. استفاده از نام رنگ‌ها

HTML و CSS صدها نام رنگ پشتیبانی می‌کنن (مثل red, green, blue, black …).

<h1 style="color: red;">این متن قرمز است</h1>
<p style="background-color: yellow;">این متن روی پس‌زمینه زرد است</p>

2. استفاده از کد هگزادسیمال (Hex)

کد رنگ ۶ رقمی به شکل #RRGGBB نوشته میشه.

  • RR = مقدار قرمز (00 تا FF)

  • GG = مقدار سبز (00 تا FF)

  • BB = مقدار آبی (00 تا FF)

<h2 style="color: #00ff00;">این متن سبز است</h2>

3. استفاده از RGB

مقادیر رنگ به صورت rgb(red, green, blue) تعریف میشه. (هر کدوم 0 تا 255).

<p style="color: rgb(0, 0, 255);">این متن آبی است</p>

4. استفاده از RGBA

مثل RGB هست ولی مقدار چهارم alpha شفافیت رو مشخص می‌کنه (بین 0 و 1).

<p style="background-color: rgba(255, 0, 0, 0.3);">
پس‌زمینه قرمز با شفافیت ۳۰٪
</p>

5. استفاده از HSL

hsl(hue, saturation, lightness)

  • hue = درجه رنگ (0=قرمز، 120=سبز، 240=آبی)

  • saturation = میزان اشباع (0% تا 100%)

  • lightness = روشنایی (0% سیاه تا 100% سفید)

<h3 style="color: hsl(240, 100%, 50%);">این متن آبی (HSL) است</h3>

6. استفاده از HSLA (همراه شفافیت)

<div style="background-color: hsla(120, 100%, 50%, 0.4);">
پس‌زمینه سبز روشن با شفافیت ۴۰٪
</div>

📌 جاهایی که میشه رنگ تعریف کرد

  • رنگ متن → color

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

  • رنگ حاشیه → border-color

  • رنگ لینک‌ها (با CSS انتخابگر a:link, a:hover, a:visited, a:active)

✅ مثال کامل:

<!DOCTYPE html>
<html>
<head>
  <title>رنگ‌ها در HTML</title>
</head>
<body>

<h1 style="color: red;">متن قرمز با نام رنگ</h1>
<p style="color: #00ff00;">متن سبز با کد Hex</p>
<p style="color: rgb(0, 0, 255);">متن آبی با RGB</p>
<p style="background-color: rgba(255, 0, 0, 0.3);">
پس‌زمینه قرمز با شفافیت
</p>
<p style="color: hsl(300, 100%, 40%);">
متن بنفش با HSL
</p>

</body>
</html>