مبدل RGB به HSL

ابزار تبدیل RGB به HSL: چرا این صفحه برای طراحان و توسعه‌دهندگان ضروری است

ابزار تبدیل RGB به HSL در این صفحه، رنگ‌ها را از قالب بومی نمایشگرها (RGB) به قالبی مبتنی بر ادراک انسان (HSL) ترجمه می‌کند. شما سه عدد بین ۰ تا ۲۵۵ برای قرمز، سبز و آبی وارد می‌کنید و فوراً معادل آن را در HSL (فام بر حسب درجه، اشباع و روشنایی به درصد) می‌بینید. همچنین مقادیر HEX، HSV، CMYK و LAB نیز نمایش داده می‌شود. تمام تبدیل‌ها در مرورگر شما انجام می‌شود و هیچ داده‌ای آپلود نمی‌شود. این صفحه دقیقاً به این دلیل طراحی شده است که مدل HSL بر خلاف RGB به شما اجازه می‌دهد روشنایی را مستقل از فام تنظیم کنید – قابلیتی که برای ساخت پالت‌های رنگی، تم‌ها و تغییرات کنتراست دسترس‌پذیر حیاتی است.

RGB چیست و چگونه رنگ را روی صفحه نمایش تولید می‌کند

مدل RGB بر پایه‌ی ترکیب افزایشی (additive) نور کار می‌کند. هر پیکسل روی صفحه‌ی نمایش از سه زیرپیکسل قرمز، سبز و آبی تشکیل شده که با شدت‌های متفاوت روشن می‌شوند. شدت هر کانال با یک عدد ۸ بیتی (۰ تا ۲۵۵) مشخص می‌شود. ۰ یعنی خاموش کامل و ۲۵۵ یعنی حداکثر روشنایی. با ترکیب این سه کانال، میلیون‌ها رنگ قابل نمایش هستند. فضای رنگی پیش‌فرض در وب sRGB است که طیف قابل نمایش اکثر نمایشگرها را تعریف می‌کند.

اما مشکل RGB برای کارهای طراحی این است که تغییر یک کانال – مثلاً افزایش قرمز – اغلب فام درک‌شده را تغییر می‌دهد. برای ساختن یک نسخه‌ی روشن‌تر از یک رنگ در RGB باید هر سه کانال را به نسبت‌های دقیقی تنظیم کرد که کار را دشوار و غیرشهودی می‌کند. به همین دلیل است که ابزارهای حرفه‌ای معمولاً از مدل‌های ادراکی مانند HSL استفاده می‌کنند.

مدل HSL و تفاوت اساسی آن با RGB

مدل HSL رنگ را به سه مؤلفه تقسیم می‌کند: فام (Hue) بر حسب درجه روی یک دایره‌ی رنگی (۰ تا ۳۶۰)، اشباع (Saturation) به درصد (۰ تا ۱۰۰) که خلوص رنگ را نشان می‌دهد، و روشنایی (Lightness) به درصد (۰ تا ۱۰۰) که میزان روشن یا تیره بودن رنگ را مشخص می‌کند. این ساختار با نحوه‌ی ادراک انسان از رنگ همخوانی بیشتری دارد. وقتی می‌گوییم «این رنگ را کمی تیره‌تر کن» در ذهن ما همان فام با روشنایی کمتر است. در HSL به سادگی مقدار Lightness را کاهش می‌دهیم بدون اینکه فام تغییر کند. در RGB برای همین هدف باید هر سه کانال را کاهش دهیم و نسبت‌هایشان را حفظ کنیم – کاری که در عمل نیاز به محاسبه دارد.

همین ویژگی باعث می‌شود HSL انتخاب اول برای تولید پالت‌های رنگی، تم‌های روشن/تاریک و گرادیان‌های یکنواخت باشد. طراحان رابط کاربری از آن برای ساخت رنگ‌های مکمل (مثلاً با اضافه کردن ۱۸۰ درجه به Hue) استفاده می‌کنند. توسعه‌دهندگان فرانت‌اند نیز در CSS از تابع hsl() و hsla() بهره می‌برند که اجازه می‌دهد رنگ‌ها را به صورت پویا و با جاوااسکریپت تغییر دهند.

تبدیل RGB به HSL: ریاضیات پشت پرده

تبدیل از RGB به HSL شامل چند مرحله‌ی ساده اما دقیق است. ابتدا مقادیر قرمز، سبز و آبی از دامنه‌ی ۰ تا ۲۵۵ به دامنه‌ی ۰ تا ۱ نرمالیزه می‌شوند (تقسیم بر ۲۵۵). سپس:

• مقدار روشنایی (L) برابر با (max + min) / 2 است که max و min بزرگترین و کوچکترین مقدار بین سه کانال نرمالیزه‌شده است.
• اشباع (S) به صورت زیر محاسبه می‌شود:
  • اگر max و min برابر باشند (رنگ خاکستری)، اشباع صفر است.
  • در غیر این صورت:
    • اگر L ≤ 0.5: S = (max – min) / (max + min)
    • اگر L > 0.5: S = (max – min) / (2 – max – min)
• فام (H) بر اساس اینکه کدام کانال بیشترین مقدار را دارد محاسبه می‌شود:
  • اگر max برابر قرمز: H = (G – B) / (max – min) (اصلاح بعدی)
  • اگر max برابر سبز: H = 2 + (B – R) / (max – min)
  • اگر max برابر آبی: H = 4 + (R – G) / (max – min) سپس H در ۶۰ ضرب می‌شود تا درجه به‌دست آید. اگر H منفی باشد، ۳۶۰ به آن اضافه می‌شود.

این فرمول‌ها تضمین می‌کنند که هر رنگ RGB معادل منحصربه‌فردی در HSL داشته باشد. ابزار این صفحه این محاسبات را در لحظه انجام می‌دهد و نتیجه را به همراه قالب‌های دیگر نمایش می‌دهد. اگر شما خودتان مقدار HSL را ویرایش کنید، ابزار تبدیل معکوس (HSL به RGB) را نیز به کار می‌گیرد و همه‌ی فیلدها را به‌روز می‌کند.

کاربردهای عملی در طراحی و توسعه وب

۱. ایجاد پالت‌های دسترس‌پذیر
ساده‌ترین راه برای تضمین نسبت کنتراست کافی (مثلاً WCAG AA با نسبت ۴.۵:۱) تغییر روشنایی (L) یک رنگ پایه بدون تغییر فام است. با افزایش L برای رنگ زمینه و کاهش آن برای متن، می‌توان کنتراست را کنترل کرد بدون اینکه هویت بصری رنگ از دست برود.

۲. طراحی تم‌های روشن و تاریک
در یک تم تاریک، کافی است Lightness تمام رنگ‌های پایه را تا یک مقدار ثابت (مثلاً ۲۰٪) کاهش دهید. فام و اشباع ثابت می‌مانند و هماهنگی تم حفظ می‌شود.

۳. مقیاس‌های رنگی برای داده‌نمایی
برای نمودارهای متوالی (sequential) که نیاز به تغییر تدریجی روشنایی دارند، مدل HSL به طراح اجازه می‌دهد با گام‌های یکسان L را از ۱۰۰ به ۰ تغییر دهد. هرچند توجه کنید که HSL یکنواخت ادراکی نیست (بیشتر در ادامه).

۴. استفاده در CSS
با hsl(243, 75%, 59%) می‌توان مستقیماً رنگی مانند rgb(79, 70, 229) را تعریف کرد. مزیت این است که می‌توانید با متغیرهای CSS و جاوااسکریپت به راحتی مقدار روشنایی را تغییر دهید: --lightness: 59% و سپس color: hsl(243, 75%, var(--lightness)).

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

HSL یکنواخت ادراکی نیست. زرد روشن و آبی تیره در یک مقدار روشنایی (مثلاً L=50%) از نظر چشم انسان بسیار متفاوت به نظر می‌رسند. زرد بسیار درخشان‌تر و آبی بسیار تاریک‌تر احساس می‌شود. برای کارهای دقیق بصری (مانند مقیاس‌های رنگی علمی) بهتر است از مدل‌های یکنواخت‌تر مانند LAB استفاده کنید. ابزار این صفحه خروجی LAB را نیز نمایش می‌دهد تا بتوانید مقایسه کنید.

خروجی CMYK تخمینی است. اگرچه ابزار مقادیر CMYK را محاسبه می‌کند، اما این مقادیر بر اساس مدل روی‌نمایش (sRGB به CMYK) تخمین زده می‌شوند و نباید برای چاپ حرفه‌ای بدون تأیید مستقیم استفاده شوند. برای چاپ، باید از پروفایل‌های ICC دقیق استفاده کرد.

ورود مقادیر نامعتبر. اگر RGB را به صورت سه عدد صحیح جدا شده با ویرگول یا فاصله وارد نکنید (مانند 79, 70, 229)، ابزار پیغام خطا نشان می‌دهد: «Enter RGB as three numbers 0–255, like 79, 70, 229.» برای HSL نیز باید «fahm 0-360 و دو درصد» مانند 243, 75%, 59% وارد کنید.

خارج از محدوده‌ی رنگ. اگر مقداری از LAB یا CMYK وارد کنید که در فضای sRGB قابل نمایش نباشد (خارج از گاموت)، ابزار آن را به نزدیک‌ترین رنگ قابل نمایش تنظیم می‌کند. دقت داشته باشید که تبدیل برگشتی این رنگ ممکن است اندکی جابجایی ایجاد کند.

پرسش‌های متداول (FAQ)

۱. چرا هنگام تغییر RGB، مقادیر HSL به‌روز نمی‌شوند؟
مطمئن شوید که RGB را به صورت سه عدد بین ۰ تا ۲۵۵ و جدا شده با ویرگول یا فاصله وارد کرده‌اید. اگر خطایی رخ دهد، ابزار پیغام نمایش می‌دهد و تغییرات اعمال نمی‌شود.

۲. آیا می‌توانم مستقیم HSL را وارد کنم و معادل RGB را ببینم؟
بله. هر فیلد (RGB، HSL، HEX و غیره) قابل ویرایش است. با تغییر هر کدام، همه‌ی فیلدهای دیگر به‌روز می‌شوند. برای HSL باید فام ۰ تا ۳۶۰، اشباع و روشنایی به درصد (مثلاً 243, 75%, 59%) وارد شود.

۳. چرا مقادیر CMYK با خروجی چاپگر من تفاوت دارد؟
چون ابزار از یک تبدیل ساده و تخمینی استفاده می‌کند که برای نمایش روی صفحه طراحی شده است. برای چاپ واقعی باید از پروفایل رنگی مختص چاپگر و نرم‌افزارهای مدیریت رنگ استفاده کنید.

۴. آیا این ابزار از فضای رنگی DCI-P3 یا Adobe RGB پشتیبانی می‌کند؟
خیر. ابزار در فضای sRGB کار می‌کند که رایج‌ترین فضای رنگی برای وب است. اگر از نمایشگر گسترده‌تری استفاده می‌کنید، رنگ‌ها ممکن است متفاوت دیده شوند.

۵. چطور می‌توانم با استفاده از HSL یک پالت مکمل بسازم؟
فام اصلی را پیدا کنید (مثلاً ۲۴۳ برای آبی-بنفش). برای رنگ مکمل ۱۸۰ درجه اضافه کنید: ۲۴۳ + ۱۸۰ = ۴۲۳ → ۴۲۳ - ۳۶۰ = ۶۳ درجه (نارنجی-زرد). اشباع و روشنایی را یکسان نگه دارید تا هماهنگی حفظ شود.

۶. آیا می‌توانم از این ابزار در حالت آفلاین استفاده کنم؟
بله. تمام محاسبات در مرورگر انجام می‌شود؛ پس از بارگذاری اولیهٔ صفحه، نیازی به اینترنت ندارید. می‌توانید صفحه را ذخیره کنید و به صورت محلی اجرا کنید.