آموزش HTML - رنگ‌های HSL و HSLA

رنگ‌های HSL و HSLA

مقادیر رنگ HSL رنگ‌ها را با استفاده از سه پارامتر تعریف می‌کنند: فام (نوع رنگ)، اشباع (شدت رنگ) و روشنایی (میزان روشن یا تیره بودن). مدل HSLA با افزودن یک پارامتر آلفا به HSL گسترش یافته است که میزان شفافیت یا کدری رنگ را مشخص می‌کند.

کدهای رنگ HSL

HTML از مدل رنگی HSL پشتیبانی می‌کند که مخفف فام (Hue)، اشباع (Saturation) و روشنایی (Lightness) است. این مدل روشی انعطاف‌پذیر و قابل‌درک برای تعریف رنگ‌ها ارائه می‌دهد. نمایش رنگ‌ها با استفاده از HSL به توسعه‌دهندگان اجازه می‌دهد فام رنگ را مشخص کنند، میزان اشباع را تنظیم کنند و روشنایی را کنترل کنند؛ در نتیجه، طیف گسترده‌تری از رنگ‌ها در اختیار آن‌ها قرار می‌گیرد.

• فام (Hue): مقداری برحسب درجه روی چرخه رنگ است که از ۰ تا ۳۶۰ تغییر می‌کند؛ در این چرخه، ۰ نشان‌دهنده رنگ قرمز، ۱۲۰ نشان‌دهنده رنگ سبز و ۲۴۰ نشان‌دهنده رنگ آبی است.
• اشباع (Saturation): مقداری درصدی است که شدت یا زنده بودن رنگ را نشان می‌دهد. مقدار ۰٪ به معنای یک طیف از رنگ خاکستری و مقدار ۱۰۰٪ به معنای رنگ کامل و خالص است.
• روشنایی (Lightness): این مقدار نیز به‌صورت درصد بیان می‌شود و نشان می‌دهد رنگ تا چه اندازه روشن یا تیره است. مقدار ۰٪ نشان‌دهنده رنگ سیاه، مقدار ۵۰٪ نشان‌دهنده حالتی نه روشن و نه تیره و مقدار ۱۰۰٪ نشان‌دهنده رنگ سفید است.

ایجاد رنگ HSL

برای ایجاد رنگ HSL، از تابع hsl() استفاده کنید و مقادیر فام، اشباع و روشنایی را به آن بدهید. در ادامه، ساختار استفاده از تابع hsl() آمده است:

hsl(hue, saturation%, lightness%)

مثال

در ادامه، مثالی از نحوه استفاده از رنگ HSL در HTML مشاهده می‌کنید:

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML HSL Color Example</title>
   <style>
      body {
         font-family: Arial, sans-serif;
         text-align: center;
         padding: 50px;
      }
      .hsl-color-box {
         width: 200px;
         height: 200px;
         margin: 0 auto;
         background-color: hsl(120, 50%, 50%);
         /* HSL representation */
         color: white;
         display: flex;
         align-items: center;
         justify-content: center;
      }
   </style>
</head>
<body>
   <div class="hsl-color-box">
      <p>
         This box has an HSL color background 
      </p>
   </div>
</body>
</html>

در این مثال، ویژگی background-color در کلاس .hsl-color-box با استفاده از نمایش رنگی HSL تنظیم شده است. مقادیر به این صورت هستند:

• فام (H): ۱۲۰ درجه (سبز)

• اشباع (S): ۵۰٪

• روشنایی (L): ۵۰٪

این مقادیر را تغییر دهید تا رنگ‌های مختلف را آزمایش کنید. مدل HSL روشی انعطاف‌پذیرتر برای کار با رنگ‌ها ارائه می‌دهد و تنظیم دقیق و کنترل ظاهر عناصر یک صفحه وب را آسان‌تر می‌کند.

کدهای رنگ HSLA

در HTML، HSLA مخفف فام (Hue)، اشباع (Saturation)، روشنایی (Lightness) و آلفا (Alpha) است. این مدل، نسخه گسترش‌یافته کد رنگ HSL است که یک پارامتر آلفای اختیاری برای تعیین شفافیت دارد. این کانال آلفا مشخص می‌کند که رنگ تا چه اندازه شفاف یا کدر باشد و مقداری بین ۰٫۰ و ۱٫۰ می‌گیرد. در اینجا، مقدار ۰٫۰ به معنای شفافیت کامل و مقدار ۱٫۰ به معنای نداشتن شفافیت است.

ایجاد رنگ HSLA

برای ایجاد رنگ‌های HSLA، از تابع hsla() استفاده کنید و مقادیر فام، اشباع، روشنایی و آلفا را برای تعیین شفافیت به آن بدهید. تابع hsla() را می‌توان در فایل‌های CSS یا درون ویژگی style در HTML به کار برد. در ادامه، ساختار استفاده از تابع hsla() برای ایجاد رنگ HSLA آمده است:

hsla(hue, saturation%, lightness%, alpha)

مثال

در این مثال، رنگ پس‌زمینه و رنگ متن را با استفاده از کد رنگ HSLA تنظیم کرده‌ایم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Colors by HSLA code</title>
</head>
<body style = "width:300px; height:100px;">

   <h2 style = "background-color: hsla(0, 0%, 40%, 0.5);">
      Setting the Background using hsla()
   </h2>

   <p style = "color: hsla(0, 0%, 30%, 1.0);">
      The text color of the paragraph is 
      styled using hsla()
   </p>
</body>
</html>

انتخاب‌گر رنگ HSL

می‌توانید از این انتخاب‌گر رنگ HSL برای ایجاد رنگ دلخواه خود با تنظیم میزان فام، اشباع و روشنایی استفاده کنید: