HSL رنگ را همانطور توصیف میکند که مردم دربارهاش صحبت میکنند: چه طیفی، چقدر اشباع، و چقدر روشن. تبدیل کد HEX به HSL سریعترین راه برای آوردن رنگ به شکلی است که بتوانی واقعاً تغییرش دهی — روشنترش کنی، تیرهتر یا خاکیاش کنی یا از آن یک مقیاس بسازی.
چطور تبدیل HEX به HSL کار میکند
- کد HEX را به RGB تبدیل کن و هر کانال را بر 255 تقسیم کن تا هر سه عدد بین 0 و 1 قرار بگیرند.
- بیشترین و کمترینِ سه مقدار را پیدا کن. میانگینشان همان روشنی L است.
- پراکندگی بین آنها اشباع S را تعیین میکند: آن را بر (2 − max − min) برای رنگهای روشن یا بر (max + min) برای رنگهای تیره تقسیم کن.
- کانالی که بیشینه را دارد، طیف H را مشخص میکند — قرمز در 0°، سبز در 120°، آبی در 240° — و دو کانال دیگر موقعیت طیف را در آن بخش تعیین میکنند.
مثال عملی
ریاضیات دقیق است، اما معمولاً مقادیر HSL به درجات و درصدهای کامل گرد میشوند. تبدیل دوباره ممکن است یک یا دو گام RGB با اصل فاصله بیندازد — در عمل قابلمشاهده نیست، اما اگر رنگها را چندبار دورِگرد کنی ارزش دانستن را دارد.
HEX و HSL توضیح دادهشده
HEX چیست؟
کد HEX یک عدد ششرقمی هگزا دسیمال است که کانالهای قرمز، سبز و آبی رنگ را پشت یک # پیشرو ذخیره میکند. هر جفت رقم یک کانال را پوشش میدهد، از 00 (هیچ) تا FF (تمام)، که همان 16.7 میلیون رنگِ RGB را در نمادهی کوتاهتری ارائه میدهد. HEX در CSS، ابزارهای طراحی و راهنمای برند پیشفرض است.
- نحو:
- #RRGGBB
- دامنه:
- 00–FF برای هر کانال
- مناسب برای:
- CSS، تحویل طراحی، راهنمای برند
HSL چیست؟
HSL یک رنگ را به هیو (Hue) — 0–360° روی چرخ رنگ — اشباع (Saturation) — میزان رنگی بودن، 0–100% — و روشنایی (Lightness) — میزان روشنایی، 0–100% تقسیم میکند. چون هر بخش همخوانی بیشتری با نحوه توصیف رنگ توسط انسان دارد، HSL آسانترین فرمت برای ساختِ تینتها، شیبها و پالتهای منسجم است — دستی یا در کد.
- نحو:
- hsl(H, S%, L%)
- دامنه:
- 0–360°, 0–100%, 0–100%
- مناسب برای:
- پالتها، تینتها و شیبها، تمسازی
جدول مرجع HEX به HSL
متداولترین رنگهای CSS، تبدیلشده از HEX به HSL.
| رنگ | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |