تبدیل HSL به RGB: ابزار دقیق برای ترجمه رنگ از ذهن انسان به پیکسل
معرفی و هدف صفحه تبدیل HSL به RGB
این صفحه یک ابزار آنلاین ساده اما حیاتی است: شما یک رنگ را به صورت HSL وارد میکنید — فام (hue) بر حسب درجه (۰ تا ۳۶۰) و دو درصد برای اشباع (saturation) و روشنایی (lightness) — و بلافاصله معادل RGB (۰ تا ۲۵۵) آن را دریافت میکنید. اما کاربرد واقعی فراتر از یک تبدیل ساده است. این ابزار به شما امکان میدهد از مدل رنگی که برای استدلال انسانی ساخته شده (HSL) به اعداد دقیقی که صفحه نمایش برای تولید نور استفاده میکند (RGB) حرکت کنید. تمامی فیلدهای دیگر شامل HEX، HSV، CMYK و LAB نیز همزمان بهروزرسانی میشوند. هیچ دادهای به سرور ارسال نمیشود؛ تمام محاسبات در مرورگر شما انجام میگیرد.
چه چیزی این صفحه را از دیگران متمایز میکند
بسیاری از ابزارهای مشابه صرفاً یک تبدیل عددی انجام میدهند. اما این صفحه بر یک واقعیت مهم بنا شده است: HSL برای طرز تفکر انسان درباره رنگ طراحی شده است. وقتی شما روشنایی (lightness) را در HSL تغییر میدهید، فام (hue) دستنخورده باقی میماند. این ویژگی دقیقاً همان چیزی است که HSL را برای تولید پالتهای رنگی و تمهای بصری ایدهآل میسازد. در مقابل، RGB مدل کاری ریاضیات رنگ روی صفحه است — سه عدد مشخص برای شدت نور قرمز، سبز و آبی. تغییر یک کانال در RGB بدون تأثیر بر دو کانال دیگر غیرممکن است. بنابراین، تبدیل از HSL به RGB یک عملیات ضروری برای هر طراح یا توسعهدهندهای است که میخواهد با منطق انسانی رنگها را انتخاب کند اما آنها را در کد (CSS، SVG، JavaScript) با واحدهای RGB یا HEX به کار گیرد.
نکته کلیدی دیگر: این تبدیل بیاتلاف است. هر مقدار معتبر HSL دقیقاً به یک سهتایی RGB واحد در بازه قابل نمایش (۰–۲۵۵) نگاشت میشود. بر خلاف تبدیل از LAB یا CMYK به RGB، هیچ برش (clipping) خارج از گاموت رخ نمیدهد. بنابراین وقتی رنگی را از HSL به RGB تبدیل میکنید، اگر دوباره آن RGB را به HSL برگردانید، مقدار اولیه را دقیقاً بازمییابید. هیچ تغییر رنگی در مسیر رفت و برگشت اتفاق نمیافتد.
ورودیها و خروجیها
ابزار دارای یک فیلد ورودی اصلی است: HSL. شما باید آن را به صورت اعداد با قالب مشخص وارد کنید. مثلاً:
243, 75%, 59%
که در آن:
- فام (hue) = ۲۴۳ (یک عدد صحیح بین ۰ تا ۳۶۰)
- اشباع (saturation) = ۷۵٪ (یک درصد)
- روشنایی (lightness) = ۵۹٪ (یک درصد)
بلافاصله پس از ویرایش این فیلد، تمام خروجیهای زیر بهروز میشوند:
| خروجی | محدوده | مثال برای ورودی بالا |
|---|---|---|
| HEX | ۶ کاراکتر هگزادسیمال | #4F46E5 |
| RGB | سه عدد ۰–۲۵۵ | 79, 70, 229 |
| HSL | تکرار مقادیر ورودی | 243°, 75%, 59% |
| HSV | فام ۰–۳۶۰، اشباع و درخشندگی درصد | 242°, 69%, 90% |
| CMYK | چهار درصد (سیان، مژنتا، زرد، مشکی) | 66%, 69%, 0%, 10% |
| LAB | روشنایی ۰–۱۰۰، a و b حدود ±۱۲۸ | 49.9, 39.8, -62.3 |
تمامی فیلدها به صورت زنده و بدون نیاز به دکمه تبدیل جداگانه بهروز میشوند.
قوانین و موارد خاص (Edge Cases)
ابزار قوانین مشخصی برای مدیریت خطا و موارد خاص دارد:
-
اگر کاربر مقدار HSL را به صورت نادرست وارد کند — مثلاً درصد نگذارد، عدد فام خارج از بازه ۰–۳۶۰ بدهد، یا قالب را رعایت نکند — پیام خطای زیر نمایش داده میشود:
«Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»
(این پیام به انگلیسی است و همانطور که در صفحه تعریف شده، تغییر نمیکند.) -
خروجی CMYK که ابزار نشان میدهد یک تخمین نمایشی است و ممکن است با مقادیر مورد استفاده در چاپ حرفهای تفاوت داشته باشد. دلیل آن وابستگی شدید CMYK به پروفایل چاپگر، نوع کاغذ و جوهر است. این ابزار نمیتواند تمام این متغیرها را در نظر بگیرد. بنابراین اگر قصد چاپ دارید، از این اعداد فقط به عنوان راهنما استفاده کنید.
-
همانطور که گفته شد، تبدیل HSL به RGB هرگز دچار برش گاموت نمیشود. دلیل آن این است که فضای رنگی HSL مستقیماً از روی RGB تعریف شده است (مدل sRGB). بنابراین تمام مقادیر HSL معادل RGB معتبری در بازه ۰–۲۵۵ دارند.
روش تبدیل: ریاضیات پشت پرده
در اینجا نیازی به پیادهسازی دستی نیست، اما دانستن منطق اساسی به درک بهتر کمک میکند. تبدیل استاندارد HSL به RGB که در این ابزار به کار رفته، بر اساس روابط ریاضی مشخصی است که در مشخصات CSS (و استاندارد sRGB) تعریف شده است.
فرض کنید مقادیر H (فام بر حسب درجه)، S (اشباع به صورت کسری از ۱)، و L (روشنایی به صورت کسری از ۱) داریم. مراحل:
۱. اگر S = 0 باشد، رنگ خاکستری است: R = G = B = L.
۲. در غیر این صورت، تابع زیر برای یافتن مقادیر موقت کمک میکند:
q = L < 0.5? L * (1 + S): L + S - L * Sp = 2 * L - q
سپس هر کانال با استفاده از یک تابع f(t) که به فام بستگی دارد محاسبه میشود:
R = f(H + 1/3)G = f(H)B = f(H - 1/3)
که در آن f(t) به صورت تعریف میشود:
- اگر
t < 0:t = t + 1 - اگر
t > 1:t = t - 1 - اگر
t < 1/6:return p + (q - p) * 6 * t - اگر
t < 1/2:return q - اگر
t < 2/3:return p + (q - p) * (2/3 - t) * 6 - در غیر این صورت:
return p
۳. سپس مقادیر R, G, B که بین ۰ و ۱ هستند، در ۲۵۵ ضرب و گرد میشوند تا اعداد صحیح ۰–۲۵۵ به دست آیند.
این الگوریتم استاندارد است و در تمام مرورگرها به همین شکل پیادهسازی میشود. نکته مهم: فام (hue) به صورت دورهای رفتار میکند و مقادیر کمتر از ۰ یا بیشتر از ۳۶۰ به بازه [۰, ۳۶۰) بازمیگردند. همچنین اشباع و روشنایی حتماً به صورت درصد وارد میشوند و ابزار آنها را به کسر تبدیل میکند.
چه کسانی به این ابزار نیاز دارند
- طراحان گرافیک و UI/UX: هنگام ساخت پالتهای رنگی یا تمها، اغلب با HSL کار میکنند تا تغییرات روشنایی را بدون تغییر فام اعمال کنند. سپس برای پیادهسازی در کد، به مقادیر RGB یا HEX نیاز دارند.
- توسعهدهندگان فرانت-اند: انتقال مقادیر رنگ از ابزارهای طراحی (مانند Figma که اغلب از HSL استفاده میکند) به CSS که معمولاً با HEX یا RGB کار میکند.
- هر کسی که ترجیح میدهد رنگ را بر حسب ویژگیهای انسانی (فام، اشباع، روشنایی) درک کند ولی اعداد دقیق صفحه نمایش را بخواهد.
علاوه بر این، خروجیهای اضافی مانند HSV، CMYK و LAB امکان مقایسه بین مدلهای رنگی مختلف را فراهم میکنند. مثلاً HSV (فام، اشباع، درخشندگی) برای انتخاب رنگ در نرمافزارهای ویرایش تصویر رایج است، در حالی که LAB (روشنایی، a، b) فضایی مستقل از دستگاه است که برای تطبیق رنگهای فیزیکی به کار میرود.
سوالات متداول
۱. چرا مقادیر RGB بین ۰ تا ۲۵۵ هستند؟
این بازه به دلیل استفاده از ۸ بیت برای هر کانال رنگی در مانیتورهای مدرن است. ۲^۸ = ۲۵۶ حالت، از ۰ تا ۲۵۵.
۲. آیا تبدیل از HSL به RGB همیشه دقیق است؟
بله، تا زمانی که ورودی در محدوده مجاز باشد. این تبدیل یک نگاشت یکبهیک بین دو مدل در فضای sRGB است.
۳. تفاوت HSV و HSL چیست؟
در HSV (فام، اشباع، درخشندگی)، اشباع به معنی میزان خلوص رنگ نسبت به حداکثر روشنایی کانالهاست، در حالی که در HSL روشنایی میانگین دو کانال قویترین و ضعیفترین است. HSL به تغییرات روشنایی حساسیت انسانی نزدیکتر است.
۴. آیا خروجی CMYK برای چاپ قابل اعتماد است؟
خیر، فقط یک تخمین است. چاپ به پروفایل دقیق (مانند FOGRA یا GRACoL) نیاز دارد که وابسته به چاپگر، کاغذ و جوهر است.
۵. چرا خروجی LAB نیز نمایش داده میشود؟
LAB یک فضای رنگی مستقل از دستگاه است که برای سنجش اختلاف رنگ (ΔE) و تبدیلات دقیقتر در علم رنگ استفاده میشود. این خروجی به کاربران حرفهای امکان مقایسه با استانداردهای بینالمللی را میدهد.
۶. اگر اشتباه تایپی در ورودی داشته باشم چه میشود؟
ابزار بلافاصله پیام خطای مشخصی نمایش میدهد و هیچ خروجی محاسبه نمیشود. ورودی باید دقیقاً به صورت «عدد، درصد، درصد» با کاما و فاصله باشد.
جمعبندی
این صفحه یک ابزار تخصصی برای تبدیل بیواسطه و بیاتلاف HSL به RGB و سایر مدلهای رنگی است. با استفاده از منطق انسانی HSL و دقت عددی RGB، طراحان و توسعهدهندگان میتوانند بدون نگرانی از برش گاموت یا خطاهای گرد کردن، رنگها را بین محیطهای مختلف منتقل کنند. تمامی محاسبات در مرورگر انجام میشود و هیچ دادهای جایی ذخیره نخواهد شد. اگر با رنگ کار میکنید، این صفحه پل ضروری بین ذهن و صفحه نمایش شماست.