تبدیل HEX به HSL
کد رنگ HEX را به فام، اشباع و روشنایی تبدیل کنید؛ نمادگذاری‌ای که ساختن نسخه‌های مختلف یک رنگ را ساده می‌کند.
تبدیل رنگ‌های HEX به HSL
کدهای HEX فشرده‌اند، اما فکر کردن درباره‌شان دشوار است: هیچ‌کس با نگاه به #0A84FF نمی‌داند چطور آن را ۱۰ درصد تیره‌تر کند. HSL همان رنگ را به همان شکلی توصیف می‌کند که ما به رنگ فکر می‌کنیم؛ برای همین حالت hover، حالت غیرفعال یا نسخه حالت تاریک فقط با تغییر یک عدد ساخته می‌شود.
این صفحه مبدل رنگ را با ورودی HEX و یک نمونه بارگذاری‌شده باز می‌کند.
خواندن یک مقدار HSL
| بخش | بازه | در hsl(210, 100%, 52%) |
|---|---|---|
| فام (Hue) | ۰ تا ۳۶۰ درجه | ۲۱۰ درجه: آبی‌ای میان فیروزه‌ای (۱۸۰ درجه) و آبی خالص (۲۴۰ درجه) |
| اشباع (Saturation) | ۰ تا ۱۰۰٪ | ۱۰۰٪: تا حد ممکن زنده، بدون هیچ خاکستری |
| روشنایی (Lightness) | ۰ تا ۱۰۰٪ | ۵۲٪: کمی بالاتر از نقطه میانی سیاه و سفید |
HEX چطور به HSL تبدیل می‌شود
مبدل ابتدا کد HEX را به RGB تبدیل می‌کند و سپس هر کانال را به بازه ۰ تا ۱ می‌برد. روشنایی میانگین بزرگ‌ترین و کوچک‌ترین کانال است. اشباع به فاصله این دو، نسبت به روشنایی، بستگی دارد. فام از اینکه کدام کانال بزرگ‌تر است و دو کانال دیگر در مقایسه با هم چطورند به دست می‌آید. برای #0A84FF نتیجه ۲۱۰٫۱ درجه، ۱۰۰٪ و ۵۱٫۹۶٪ است که به hsl(210, 100%, 52%) گرد می‌شود.
ساختن نسخه‌های رنگ با HSL
- حالت hover یا فشرده: روشنایی را ۵ تا ۱۰ واحد کم کنید.
- حالت غیرفعال: اشباع را کم و روشنایی را زیاد کنید.
- رنگ‌های روشن برای پس‌زمینه: فام و اشباع را نگه دارید و روشنایی را روی ۹۰ تا ۹۷٪ بگذارید.
- حالت تاریک: روشنایی را بالا ببرید تا رنگ روی سطح‌های تیره خوانا بماند.
زبانه پالت این کار را با طیفی یازده‌مرحله‌ای از ۵۰ تا ۹۵۰ خودکار می‌کند و هارمونی‌های زیر آن فام را می‌چرخانند تا رنگ‌های مکمل و همجوار را پیدا کنند.
یک نکته درباره ادراک رنگ
روشنایی HSL همان روشنایی‌ای نیست که چشم درک می‌کند: یک زرد و یک آبی با روشنایی ۵۰٪ از نظر درخشندگی بسیار متفاوت دیده میشوند. وقتی کنتراست مهم است، ترکیب واقعی را در بررسی کنتراست رنگ بسنجید یا از مقدار OKLCH که مبدل نشان می‌دهد استفاده کنید. برای مقدارهای ساده کانال‌ها، تبدیل HEX به RGB را ببینید.