رنگ‌های HSL در CSS (HSL Colors)
HSL مخفف Hue (رنگ)، Saturation (اشباع) و Lightness (روشنی) است.
مقدار HSL (HSL Value)
در CSS، یک رنگ می‌تواند با استفاده از رنگ، اشباع و روشنایی (HSL) به صورت زیر مشخص شود:
hsl(hue, saturation, lightness)- Hue (رنگ): درجه‌ای بر روی چرخه رنگ از 0 تا 360. 0 قرمز، 120 سبز و 240 آبی است.
- Saturation (اشباع): یک مقدار درصدی. 0% به معنای سایه‌ای از خاکستری و 100% رنگ کامل است.
- Lightness (روشنی): همچنین یک درصد است. 0% مشکی، 50% نه روشن و نه تیره و 100% سفید است.
ترکیب رنگ‌های HSL:
مثال:
hsl(0, 100%, 50%) /* قرمز */
hsl(240, 100%, 50%) /* آبی */
hsl(147, 50%, 47%) /* سبز تیره */
hsl(300, 76%, 72%) /* بنفش روشن */
hsl(39, 100%, 50%) /* زرد */
hsl(248, 53%, 58%) /* آبی مایل به بنفش */اشباع (Saturation)
اشباع به عنوان شدت رنگ توصیف می‌شود.
- 100% رنگ خالص است، بدون سایه‌های خاکستری.
- 50% رنگ با 50% خاکستری، اما رنگ هنوز قابل مشاهده است.
- 0% کاملاً خاکستری است و دیگر نمی‌توان رنگ را مشاهده کرد.
مثال:
hsl(0, 100%, 50%) /* قرمز خالص */
hsl(0, 80%, 50%) /* قرمز روشن‌تر */
hsl(0, 60%, 50%) /* قرمز کمرنگ */
hsl(0, 40%, 50%) /* قرمز خیلی کمرنگ */
hsl(0, 20%, 50%) /* قرمز با سایه خاکستری */
hsl(0, 0%, 50%) /* خاکستری خالص */روشنی (Lightness)
روشنی رنگ می‌تواند به عنوان میزان نوری که می‌خواهید به رنگ بدهید توصیف شود، که 0% به معنای عدم نور (مشکی)، 50% به معنای 50% نور (نه تیره و نه روشن) و 100% به معنای روشنی کامل (سفید) است.
مثال:
hsl(0, 100%, 0%) /* مشکی */
hsl(0, 100%, 25%) /* قرمز تیره */
hsl(0, 100%, 50%) /* قرمز */
hsl(0, 100%, 75%) /* قرمز روشن */
hsl(0, 100%, 90%) /* قرمز خیلی روشن */
hsl(0, 100%, 100%) /* سفید */طیف‌های خاکستری (Shades of Gray)
طیف‌های خاکستری معمولاً با تنظیم Hue و Saturation به 0 و تنظیم روشنایی از 0% تا 100% به دست می‌آیند:
مثال:
hsl(0, 0%, 0%) /* مشکی */
hsl(0, 0%, 24%) /* خاکستری تیره */
hsl(0, 0%, 47%) /* خاکستری متوسط */
hsl(0, 0%, 71%) /* خاکستری روشن */
hsl(0, 0%, 94%) /* خاکستری خیلی روشن */
hsl(0, 0%, 100%) /* سفید */مقدار HSLA (HSLA Value)
مقادیر رنگ HSLA یک گسترش از مقادیر رنگ HSL با یک کانال آلفا است که شفافیت رنگ را مشخص می‌کند.
مقدار رنگ HSLA به صورت زیر مشخص می‌شود:
hsla(hue, saturation, lightness, alpha)Alpha: عددی بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً غیر شفاف) است.
ترکیب رنگ‌های HSLA:
مثال:
hsla(9, 100%, 64%, 0) /* کاملاً شفاف */
hsla(9, 100%, 64%, 0.2) /* 20% شفاف */
hsla(9, 100%, 64%, 0.4) /* 40% شفاف */
hsla(9, 100%, 64%, 0.6) /* 60% شفاف */
hsla(9, 100%, 64%, 0.8) /* 80% شفاف */
hsla(9, 100%, 64%, 1) /* کاملاً غیر شفاف */
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام