رنگ‌های HSL CSS
- صفحه قبلی رنگ‌های HEX CSS
- صفحه بعدی زمینه‌های CSS
مقدار HSL
در CSS می‌توان از رنگ اصلی، پرچم و روشنایی (HSL) برای مشخص کردن رنگ استفاده کرد، به این صورت:
hsla(hue, saturation, lightness)
رنگ اصلی (hue） درجه‌ای از حلقه رنگ است که از 0 تا 360 درجه است. 0 قرمز است، 120 سبز است و 240 آبی است.
پرچم (saturation） یک مقادیر درصدی است، 0٪ سایه‌ای از خاکستری است و 100٪ رنگ کامل است.
سطوع (lightness） نیز درصد است، 0٪ سیاه، 50٪ نه روشن و نه تاریک و 100٪ سفید است.
لطفاً از طریق ترکیب مقادیر HSL زیر آزمایش کنید:
HUE
SATURATION
LIGHTNESS
مثال
پرچم
پرچم می‌تواند توضیح داده شود که قدرت رنگ است.
100٪ رنگ خالص است و هیچ سایه‌ای از خاکستری وجود ندارد
50٪ خاکستری 50٪ است، اما شما همچنان می‌توانید رنگ را ببینید.
0٪ خاکستری کامل است و نمی‌توانید رنگ ببینید.
مثال
سطوع
سطوع رنگ می‌تواند توضیح داده شود که چقدر نور به رنگ داده می‌شود، جایی که 0٪ نشان‌دهنده تاریک (سیاه) است، 50٪ نشان‌دهنده 50٪ روشن (نه تاریک و نه روشن) است و 100٪ نشان‌دهنده روشن‌ترین (سفید) است.
مثال
معمولاً برای تعریف سایه‌های خاکستری، با تنظیم رنگ و پرچم به 0 و تنظیم روشنایی از 0٪ تا 100٪ برای دریافت سایه‌های تیره‌تر/ روشن‌تر استفاده می‌شود:
مثال
مقدار HSLA
مقدار رنگ HSLA یک گسترش از مقدار رنگ HSL با کانال آلفا است - که میزان شفافیت رنگ را مشخص می‌کند.
مقدار رنگ HSLA تعیین شده است:
hsla(hue, saturation, lightness, alpha)
alpha پارامترها عددی بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً نیمه‌شفاف) هستند:
لطفاً از ترکیب موارد زیر برای آزمایش HSLA استفاده کنید:
HUE
SATURATION
LIGHTNESS
ALPHA
مثال
- صفحه قبلی رنگ‌های HEX CSS
- صفحه بعدی زمینه‌های CSS
