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