مبدل HEX به HSL

چرا تبدیل HEX به HSL متفاوت است؟

بسیاری از ابزارهای تبدیل رنگ صرفاً یک کد HEX را به فرمت‌های دیگر ترجمه می‌کنند. صفحه hex‑to‑hsl تمرکز خود را روی مسئله‌ای عمیق‌تر گذاشته است: HEX یک نمایش خام از RGB است و HSL برای ذهن انسان ساخته شده است. شش رقم هگزادسیمال (یا سه رقم خلاصه) مستقیماً مقادیر قرمز، سبز و آبی را در مبنای ۱۶ رمزگذاری می‌کنند. این نماد فشرده و در CSS و ابزارهای طراحی رایج است، اما هیچ سرنخی درباره حس بصری رنگ به شما نمی‌دهد. از سوی دیگر، HSL (فام، اشباع، روشنایی) یک مدل ذهنی شهودی ارائه می‌دهد: فام بر حسب درجه (۰–۳۶۰) روی یک چرخه رنگ، اشباع به صورت درصد (غلظت رنگ) و روشنایی نیز درصد (تیرگی یا روشنی از سیاه تا سفید). با این ساختار می‌توانید روشنایی یا اشباع را بدون تغییر فام تنظیم کنید – کاری که با HEX یا RAW‌RGB بسیار دشوار است.

همین تفاوت بنیادی دلیل وجود این صفحه است. کاربر یک کد HEX (شش رقمی کامل مانند #1E90FF یا سه رقمی خلاصه مانند #abc) وارد می‌کند و صفحه بلافاصله معادل HSL را نمایش می‌دهد. اما کار به همینجا ختم نمی‌شود: تمام فرمت‌های دیگر (HEX، RGB، HSV، CMYK، LAB) نیز به صورت هم‌زمان به‌روز می‌شوند. هیچ الفای شفافیتی در کار نیست – HEX استاندارد اطلاعات شفافیت ندارد و HSL نیز الفا ندارد؛ تبدیل همیشه روی رنگ‌های کاملاً مات انجام می‌شود.

نماد رنگ HEX: از سه رقم تا شش رقم

یک کد HEX شش رقمی مانند #4f46e5 از سه جفت رقم تشکیل شده: دو رقم اول برای قرمز (۴F)، دو رقم بعدی برای سبز (۴۶) و دو رقم آخر برای آبی (E5). هر جفت مقادیری بین ۰۰ (۰) و FF (۲۵۵) را پوشش می‌دهد. نوشتن سه رقمی مانند #abc معادل #aabbcc است: هر رقم دو بار تکرار می‌شود. این شکل خلاصه فقط برای رنگ‌هایی قابل استفاده است که هر جزء شش‌تایی مضرب ۱۷ دارند (مثلاً #f00 برای قرمز خالص).

صفحه فقط کدهای معتبر شش رقمی یا سه رقمی را می‌پذیرد. وجود # در ابتدا اختیاری است – اگر کاربر فقط 4f46e5 تایپ کند، صفحه همان رفتار را نشان می‌دهد. در صورت ورود مقدار نامعتبر، پیام خطا نمایش می‌یابد: "یک کد هگز مانند #4f46e5 یا #abc وارد کنید." این شرط ساده از اشتباهات تایپی رایج جلوگیری می‌کند و تضمین می‌کند که تبدیل همیشه با یک ورودی استاندارد انجام شود.

ساختار HSL: فام، اشباع و روشنایی

HSL در سال ۱۹۷۸ توسط محققان گرافیک رایانه‌ای برای تطبیق بهتر با نحوه درک انسان از رنگ معرفی شد. سه مؤلفه آن عبارتند از:

• فام (Hue) – موقعیت روی چرخه رنگ استاندارد، بر حسب درجه. ۰° قرمز است، ۱۲۰° سبز، ۲۴۰° آبی. بقیه رنگ‌ها به صورت متناوب بین این نقاط قرار می‌گیرند (مثلاً ۶۰° زرد، ۳۰۰° سرخابی).
• اشباع (Saturation) – درصدی از ۰٪ (خاکستری خنثی) تا ۱۰۰٪ (رنگ خالص). اشباع صفر یعنی تمام فام‌ها یکسان به نظر می‌رسند و تنها روشنایی تعیین‌کننده است.
• روشنایی (Lightness) – درصدی از ۰٪ (سیاه مطلق) تا ۱۰۰٪ (سفید مطلق). ۵۰٪ روشنایی مربوط به رنگ خالص با بیشترین شدت است (مثلاً برای قرمز، روشنایی ۵۰٪ برابر با قرمز میانی است).

این ساختار امکان تغییرات هوشمندانه را می‌دهد: برای ایجاد سایه‌های تیره‌تر، می‌توان به سادگی روشنایی را کاهش داد بدون آنکه فام و اشباع دست بخورند. در CSS، تعریف متغیرهای سفارشی با HSL معمول است:

:root {
  --primary-hue: 220;
  --primary: hsl(var(--primary-hue), 80%, 50%);
  --primary-dark: hsl(var(--primary-hue), 80%, 35%);
}

این کار در HEX بسیار طاقت‌فرساتر است – باید مقدار هر جزء RGB را به صورت جداگانه کاهش دهید که معادل ریاضی مشخصی ندارد.

ریاضیات تبدیل: از HEX به HSL و بالعکس

تبدیل HEX به HSL در سه گام انجام می‌شود:

۱. HEX به RGB
هر جفت از کد شش رقمی (یا رقم تکی در حالت سه‌رقمی) به عدد اعشاری بین ۰ تا ۲۵۵ تبدیل می‌شود. برای #4f46e5:

• قرمز: 4F = ۷۹
• سبز: 46 = ۷۰
• آبی: E5 = ۲۲۹

۲. RGB به HSL
معادله استاندارد از فضای سه‌بعدی RGB به مختصات استوانه‌ای HSL تبدیل می‌کند. ابتدا مقادیر ۰–۲۵۵ به بازه ۰–۱ نرمال می‌شوند. سپس:

• بزرگترین و کوچکترین مقادیر RGB شناسایی می‌شوند.
• روشنایی = (max + min) / 2
• اشباع = (max - min) / (1 - |2*lightness - 1|) (برای روشنایی غیرصفر)
• فام = زاویه بر اساس رنگ غالب (قرمز، سبز یا آبی) با فرمول‌های مثلثاتی.

۳. مقیاس‌بندی
فام در ۰–۳۶۰ درجه، اشباع و روشنایی در ۰–۱۰۰٪ ضرب می‌شود.

این تبدیل درون مرورگر کاربر انجام می‌شود – هیچ داده‌ای به سرور ارسال یا ذخیره نمی‌گردد.

چرا HSL برای طراحی و دسترسی بهتر است؟

طراحان و توسعه‌دهندگان روزانه با کارهای زیر سروکار دارند که HSL آنها را ساده‌تر می‌کند:

• تولید پالت‌های رنگی – برای ایجاد یک پالت تک‌رنگ، می‌توان فام را ثابت نگه داشت و فقط اشباع و روشنایی را تغییر داد. برای پالت‌های مکمل، ۱۸۰° به فام اضافه می‌شود. این کار در HEX نیاز به محاسبه معکوس دارد.
• حالت تاریک/روشن – در CSS مدرن، با تعریف lightness برای یک متغیر HSL می‌توان به راحتی بین تم‌ها جابجا شد: --bg-light: hsl(0, 0%, 95%) و --bg-dark: hsl(0, 0%, 10%).
• بررسی تضاد (Contrast) برای WCAG – ابزارهای دسترسی معمولاً از نسب‌تضاد مبتنی بر روشنایی نسبی استفاده می‌کنند. روشنایی در HSL (Lightness) مستقیماً با روشنایی ادراکی ارتباط دارد و تنظیم آن برای رسیدن به نسبت تضاد حداقل ۴.۵:۱ برای متن معمولی (WCAG AA) قابل انجام است.
• تغییر پویا با جاوااسکریپت – کتابخانه‌هایی که رنگ‌ها را در Runtime تغییر می‌دهند (مثلاً برای hover states) با HSL بسیار روان‌تر کار می‌کنند.

همچنین نکته مهم: HSL با HSV متفاوت است. HSV (فام، اشباع، مقدار) اشباع و روشنایی را به گونه دیگری تعریف می‌کند. در HSV، روشنایی (Value) حداکثر مقدار RGB است، در حالی که در HSL روشنایی میانگین است. بنابراین رنگ‌های خالص (مثلاً #ff0000) در HSL روشنایی ۵۰٪ دارند ولی در HSV روشنایی ۱۰۰٪. ابزار این صفحه هر دو مدل را نمایش می‌دهد تا کاربران متوجه تفاوت شوند.

محدودیت‌ها و نکات فنی

• بدون الفا – همانطور که گفته شد، HEX استاندارد شش‌رقمی یا سه‌رقمی حاوی اطلاعات شفافیت نیست. در نتیجه، رنگ‌های نیمه‌شفاف (مانند #ff000080) قابل ورود نیستند و تبدیل فقط برای مات انجام می‌شود.
• خارج از طیف (Out‑of‑gamut) در LAB و CMYK – اگر کاربر به فضای رنگی LAB یا CMYK سوئیچ کند و مقداری وارد کند که در گستره رنگ‌های قابل نمایش روی صفحه قرار نگیرد، رنگ به نزدیک‌ترین رنگ قابل نمایش تنظیم می‌شود. این کار ممکن است باعث تغییر جزئی در مقادیر HEX هنگام بازگشت شود. بنابراین برای تطابق دقیق، باید از فضای مناسب (RGB/HEX) استفاده کرد.
• CMYK فقط برآورد است – مقادیر CMYK که این صفحه نشان می‌دهد یک تخمین روی صفحه است و برای چاپ حرفه‌ای بدون کالیبراسیون مناسب نیست. فرایند چاپ از رنگ‌های اصلی فیروزه‌ای، سرخابی، زرد و سیاه استفاده می‌کند که با فضای افزودنی نمایشگر متفاوت است.
• همه تبدیل‌ها درون مرورگر – هیچ سروری درگیر نیست. حتی وقتی صفحه به آدرس پاسخ می‌دهد، محاسبات با جاوااسکریپت در دستگاه کاربر اجرا می‌شود. این یعنی حریم خصوصی حفظ می‌شود و هیچ رنگی ذخیره نمی‌گردد.

سوالات متداول

۱. چرا کد شش رقمی #abc با #aabbcc برابر است؟
دلیل آن ساده‌سازی است. هر رقم در حالت سه‌رقمی دو بار تکرار می‌شود تا مقادیر RGB بین ۰ تا ۲۵۵ را پوشش دهد. مثلاً #a معادل aa است (۱۷۰ در مبنای ۱۰). بسیاری از طراحان برای رنگ‌های پایه (مثل #fff برای سفید) از این شکل خلاصه استفاده می‌کنند.

۲. آیا می‌توانم از هگز با ۸ رقم (مانند #ff000080) استفاده کنم؟
خیر. صفحه فقط کدهای ۶ یا ۳ رقمی (با یا بدون #) را می‌پذیرد. برای رنگ‌های دارای شفافیت، باید از فضای RGBA یا HSLA در ابزارهای دیگر استفاده کنید.

۳. چرا نمایش LAB و CMYK ممکن است با ورودی متفاوت باشد؟
زیرا فضای رنگی RGB/HEX دارای طیف محدودتری است. مثلاً رنگهای اشباع بسیار بالا در LAB ممکن است خارج از محدوده قابل نمایش باشند. در این موارد صفحه رنگ را به نزدیک‌ترین گزینه قابل نمایش تنظیم می‌کند.

۴. آیا فرمت HSL در همه مرورگرها پشتیبانی می‌شود؟
بله. hsl() از CSS سطح ۲ به بعد بخشی از استاندارد بوده و همه مرورگرهای مدرن و اکثر مرورگرهای قدیمی آن را پشتیبانی می‌کنند.

۵. تفاوت بین HSL و HSV در عمل چیست؟
در HSL، روشنایی (Lightness) از سیاه (۰٪) تا سفید (۱۰۰٪) متغیر است و رنگ خالص در ۵۰٪ روشنایی قرار دارد. در HSV، مقدار (Value) حداکثر رنگ است (۱۰۰٪ برای قرمز خالص) و اشباع کمتر از ۱۰۰٪ باعث ترکیب با سفید می‌شود. برای کارهای مربوط به روشنایی ادراکی، HSL مناسب‌تر است.

۶. اگر کد HEX را اشتباه وارد کنم چه اتفاقی می‌افتد؟
صفحه پیام خطا را نمایش می‌دهد: "یک کد هگز مانند #4f46e5 یا #abc وارد کنید." هیچ رنگی نمایش داده نمی‌شود تا زمانی که ورودی اصلاح شود.