معرفی و هدف صفحه
این صفحه یک ابزار تبدیل رنگی است که یک مقدار رنگ در مدل HSL (فام، اشباع، روشنایی) را دریافت میکند و معادل آن را در کد هگزادسیمال (HEX) نمایش میدهد. کاربر مقدار فام را بر حسب درجه (۰ تا ۳۶۰)، اشباع و روشنایی را به صورت درصد (۰ تا ۱۰۰٪) وارد میکند – مثلاً 243, 75%, 59% – و بلافاصله کد HEX متناظر مانند #4f46e5 را میبیند. اگر هر سه کانال RGB قابل نمایش با یک رقم هگز باشند، شکل کوتاه سهرقمی نیز نشان داده میشود (مثلاً #abc). همزمان، سایر فیلدهای رنگی (RGB, HSV, CMYK, LAB) نیز بهروز میشوند.
این صفحه صرفاً به تبدیل HSL به HEX اختصاص دارد. برخلاف ابزارهایی که بین فضاهای رنگی پیچیدهتر مانند LAB یا CMYK تبدیل میکنند و ممکن است رنگهای خارج از گاموت را اصلاح کنند، تبدیل HSL به HEX درون گاموت sRGB مستقیم و بدون اتلاف است. هیچ گونه برش گاموتی در این تبدیل رخ نمیدهد.
تفاوت این صفحه با سایر ابزارهای تبدیل رنگ
HSL مدلی است که برای درک انسان از رنگ طراحی شده: تغییر روشنایی به تنهایی فام را دستنخورده نگه میدارد، به همین دلیل برای تولید پالت و تمهای رنگی بسیار کاربرد دارد. HEX از سوی دیگر یک نماد RGB ششرقمی (یا سهرقمی مختصر) است و – مگر در فرم هشترقمی – فاقد کانال آلفا میباشد. این صفحه دقیقاً به خاطر همین تفاوت فلسفی ساخته شده: طراحان و توسعهدهندگانی که با HSL کار میکنند نیاز دارند به سرعت و بدون خطا به کد HEX برسند.
در بسیاری از ابزارهای عمومی، ممکن است کاربر مجبور باشد میان چندین مدل رنگی جابجا شود یا با ورودیهای غیرمستقیم (مثلاً اسلایدرهای RGB) سروکار داشته باشد. اما این صفحه فقط ورودی HSL را میپذیرد و خروجی HEX را نمایش میدهد – بدون شلوغی و حواسپرتی. همچنین تمام پردازشها در مرورگر کاربر انجام میشود و هیچ دادهای به سرور فرستاده نمیشود.
ورودی و خروجی: نحوه استفاده و فرمتها
ورودی
- فام (Hue): عددی بین ۰ و ۳۶۰. میتواند صحیح یا اعشاری باشد. مثال:
243 - اشباع (Saturation): درصدی بین ۰٪ و ۱۰۰٪. ذکر علامت
%ضروری است. مثال:75% - روشنایی (Lightness): درصدی بین ۰٪ و ۱۰۰٪. مثال:
59%
فرمت دقیق ورودی: سه مقدار که با کاما یا فاصله از هم جدا شدهاند (معمولاً به صورت hue, saturation%, lightness%). نوعی انعطاف در فاصلهگذاری وجود دارد، اما باید عدد فام با دو عدد درصد همراه باشد.
خروجی
- کد HEX اصلی: همیشه شش رقم (با احتساب علامت
#) مانند#4f46e5 - کد HEX مختصر: اگر هر کانال قرمز، سبز و آبی بتواند با یک رقم هگز نمایش داده شود (مثلاً
#aabbccبه#abc)، این فرم نیز نشان داده میشود. - سایر فیلدها: RGB (۰-۲۵۵)، HSV، CMYK (تخمینی برای نمایش روی صفحه)، LAB همگی بهطور خودکار بهروز میشوند.
مهم: تبدیل HSL به HEX همواره درون محدوده بصری RGB باقی میماند؛ برخلاف تبدیل به LAB یا CMYK که ممکن است رنگهای خارج از گاموت را فشرده یا اصلاح کند، اینجا نیازی به چنین کاری نیست. خروجی CMYK که در کنار صفحه نشان داده میشود یک تخمین نمایشی است و ممکن است با مقادیر چاپ حرفهای متفاوت باشد.
قوانین و موارد خاص (Edge Cases)
این صفحه قوانین دقیقی برای اعتبارسنجی ورودی دارد:
-
اگر مقدار فام خارج از بازه ۰-۳۶۰ باشد، یا اشباع/روشنایی درصد نباشند (مثلاً بدون علامت
%) یا خارج از بازه ۰-۱۰۰ باشند، خطای زیر نمایش داده میشود:
«Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.»
(در نسخه فارسی معادل آن: «HSL را به صورت فام ۰ تا ۳۶۰ با دو درصد وارد کنید، مانند 243, 75%, 59%.») -
تغییر هر فیلد (حتی اگر کاربر مستقیماً HEX را ویرایش کند) بلافاصله تمام فیلدهای دیگر را بهروز میکند. این رفتار بازخورد فوری برای آزمایش سریع رنگها فراهم میکند.
-
از آنجا که تبدیل HSL→HEX درون sRGB انجام میشود، هیچ رنگ خارج از گاموتی وجود ندارد؛ اما اگر کاربر از فضای رنگی وسیعتری (مانند Display P3) استفاده کند، ممکن است HEX حاصل تنها تقریبی از رنگ اصلی باشد. (این ابزار فقط sRGB را پوشش میدهد.)
-
کد CMYK تخمینی است و نباید برای چاپ دقیق به کار رود. تفاوت بین CMYK نمایشگر و CMYK چاپ (به دلیل نوع جوهر، کاغذ و پروفایل) قابل توجه است.
مخاطبان و کاربردهای عملی
طراحان (Designers)
اگر با پالتهای رنگی در فضای HSL (مثلاً در Figma یا Sketch) کار میکنید و نیاز به خروجی HEX برای توسعهدهندگان یا کد CSS دارید، این صفحه سریعترین راه است. میتوانید با تغییر روشنایی (Lightness) یک فام واحد، یک خانواده رنگی متوازن بسازید و هر نمونه را به HEX تبدیل کنید.
توسعهدهندگان فرانتاند (Front‑end Developers)
اغلب فایلهای طراحی (Design Files) مقادیر HSL را تحویل میدهند، اما CSS برای رنگهای ساده از HEX یا RGB استفاده میکند. این صفحه تبدیل دقیق و بدون نیاز به محاسبه دستی را فراهم میکند.
دسترسیپذیری (Accessibility)
با استفاده از HSL میتوان نسبت کنتراست WCAG را با تنظیم روشنایی کنترل کرد. برای مثال، روشنایی ۵۰٪ ممکن است کنتراست کافی برای متن روی پسزمینه سفید فراهم نکند؛ کاربر میتواند lightness را به ۳۰٪ کاهش دهد، HEX جدید را استخراج کند و در کد نهایی استفاده نماید.
نکات فنی: تبدیل HSL به HEX و ارتباط با RGB
ساختار کد HEX
HEX یک نمایش پایه۱۶ از اعداد RGB است. هر کانال قرمز، سبز و آبی با دو رقم هگز (۰۰ تا FF) نشان داده میشود. مثلاً #4f46e5 به این معناست:
- قرمز:
4f(۷۹ در مبنای ۱۰) - سبز:
46(۷۰ در مبنای ۱۰) - آبی:
e5(۲۲۹ در مبنای ۱۰)
اگر هر کانال از دو رقم تکراری تشکیل شده باشد (مانند #aabbcc)، میتوان آن را به سه رقم (#abc) خلاصه کرد. مرورگرها هر دو فرم را میپذیرند.
الگوریتم تبدیل (برای آشنایی)
تبدیل HSL به HEX دو مرحله دارد:
-
HSL → RGB:
ابتدا باید رنگ از مدل استوانهای HSL به مکعب RGB تبدیل شود. فرمول استاندارد این تبدیل در مشخصات CSS3 موجود است. به طور خلاصه:- فام (H) به یک موقعیت در چرخه رنگ (۰ تا ۳۶۰) تبدیل میشود.
- اشباع (S) و روشنایی (L) مقادیر نسبی را تعریف میکنند.
- اگر S=0 باشد، رنگ خاکستری است و R=G=B=L.
- در غیر این صورت، سه مقدار موقت محاسبه میشود که پس از نرمالسازی، کانالهای RGB در بازه ۰-۱ به دست میآید.
-
RGB → HEX:
هر کانال (۰-۱) در ۲۳۵ ضرب و به عدد صحیح گرد میشود. سپس به دو رقم هگز (با صفر پیشفرض) تبدیل میشود. مثلاً قرمز ۰.۳۱۱ → ۷۹ →4f.
این الگوریتم در این صفحه بدون خطا و به صورت لحظهای اجرا میشود.
اشتباهات رایج کاربران
- فراموش کردن علامت
%:243, 75, 59(بدون درصد) خطا میدهد. - وارد کردن فام خارج از ۰-۳۶۰:مثلاً ۴۵۰. ابزار خطا نشان میدهد.
- استفاده از کاما و فاصله نادرست: معمولاً قابل قبول است، اما فرمول دقیق
hue, sat%, light%توصیه میشود.
سوالات متداول (FAQ)
۱. آیا میتوانم از اعداد اعشاری برای Hue استفاده کنم؟
بله. فام میتواند اعشاری باشد (مثلاً 243.7). اشباع و روشنایی نیز درصد هستند و میتوانند اعشاری باشند (75.5%).
۲. آیا کد HEX خروجی شامل الفبای کوچک یا بزرگ است؟
هر دو مجاز هستند. صفحه معمولاً الفبای کوچک را نشان میدهد (مانند #4f46e5)، اما در CSS فرقی بین #4F46E5 و #4f46e5 نیست.
۳. چگونه تضمین میشود که تبدیل همیشه دقیق است؟
تبدیل HSL به RGB (و سپس HEX) یک تبدیل ریاضی مستقیم است. هیچ تقریبی در آن وجود ندارد (درون دقت اعداد اعشاری مرورگر). بنابراین برای هر ورودی معتبر، خروجی منحصربهفرد و دقیق است.
۴. آیا میتوانم کد HEX هشترقمی (با آلفا) دریافت کنم؟
خیر. این صفحه فقط ششرقمی (یا سهرقمی مختصر) تولید میکند. برای شفافیت باید از مدل RGBA یا HSLA استفاده کنید.
۵. خروجی CMYK چقدر قابل اعتماد است؟
این یک تخمین سریع مبتنی بر فرمولهای عمومی است. برای چاپ حرفهای باید از پروفایلهای ICC و نرمافزارهای تخصصی استفاده کنید. مقادیر نمایش داده شده در ابزار صرفاً راهنما هستند.
۶. آیا دادههای من به سرور فرستاده میشود؟
خیر. تمام محاسبات در مرورگر شما و با استفاده از جاوااسکریپت انجام میشود. هیچ مقداری به هیچ سروری ارسال نمیگردد.
۷. اگر یکی از فیلدها را اشتباه پر کنم، چه اتفاقی میافتد؟
صفحه خطای مشخصی نشان میدهد: «Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.» تا زمانی که ورودی اصلاح نشود، هیچ خروجی جدیدی نمایش داده نمیشود.
جدول نمونهای از تبدیلهای رایج
| HSL (H, S%, L%) | HEX | RGB (0-255) |
|---|---|---|
| 0, 100%, 50% | #ff0000 | 255, 0, 0 |
| 120, 100%, 50% | #00ff00 | 0, 255, 0 |
| 240, 100%, 50% | #0000ff | 0, 0, 255 |
| 0, 0%, 100% | #ffffff | 255, 255, 255 |
| 0, 0%, 0% | #000000 | 0, 0, 0 |
| 30, 60%, 40% | #a36629 | 163, 102, 41 |
این جدول صرفاً برای مرور سریع است؛ صفحه شما مقادیر دقیق را بلافاصله نمایش میدهد.