صفحه تبدیل HEX به RGB
این صفحه یک ابزار دقیق برای تبدیل کدهای هگزادسیمال (HEX) به مقادیر RGB (قرمز، سبز، آبی) است. شما یک کد هکس مانند #4f46e5 یا #abc وارد میکنید و در لحظه سه عدد صحیح بین ۰ تا ۲۵۵ برای هر کانال رنگی دریافت میکنید. خروجی به همراه دیگر فرمتهای رنگی (HSL، HSV، CMYK، LAB) نمایش داده میشود و میتوانید مستقیماً از آن در کد یا نرمافزار طراحی استفاده کنید.
تفاوت این صفحه با سایر ابزارها
تبدیل HEX به RGB در این صفحه صرفاً یک تبدیل ریاضی مستقیم از پایه ۱۶ به پایه ۱۰ است. کد هگز در واقع یک نمایش فشرده از همان سه کانال ۸ بیتی RGB است. هر جفت رقم هگز (مانند 4f برای قرمز) معادل یک عدد ۰ تا ۲۵۵ است. بنابراین نتیجه کاملاً معکوسپذیر و بدون گرد کردن است – هیچ clipping یا تقریبی انجام نمیشود. این صفحه سهرقمی (مانند #abc) را نیز میپذیرد و با دوبرابر کردن هر رقم به شش رقم گسترش میدهد (تبدیل به #aabbcc). آلفا (شفافیت) پشتیبانی نمیشود – این صفحه فقط کدهای شش‑رقمی یا سه‑رقمی را میپذیرد. اگر ورودی با فرمت صحیح نباشد، پیام خطای زیر نمایش داده میشود:
«یک کد هکس مانند #4f46e5 یا #abc وارد کنید.»
تمام محاسبات در مرورگر شما انجام میشود؛ هیچ دادهای آپلود یا ذخیره نمیشود.
ساختار کد هگز و رابطه آن با RGB
کد هگز از سه جفت رقم در پایه ۱۶ تشکیل شده است: RRGGBB. هر رقم میتواند ۰-۹ یا A-F (معادل ۱۰-۱۵) باشد. مقدار هر کانال RGB از رابطه زیر به دست میآید:
R = (digit1 × 16) + digit2
مثال: برای #4f46e5:
- قرمز:
4f→4×16 + 15 = 64 + 15 = 79 - سبز:
46→4×16 + 6 = 64 + 6 = 70 - آبی:
e5→14×16 + 5 = 224 + 5 = 229
بنابراین RGB معادل 79, 70, 229 است.
گسترش سهرقمی
کد سهرقمی مانند #abc به صورت #aabbcc تفسیر میشود. مثلاً #abc معادل #aabbcc است که RGB آن 170, 187, 204 میشود. این کار برای کاهش طول کد در طراحیهای ساده استفاده میشود. این صفحه بهطور خودکار این گسترش را انجام میدهد.
نقش # اختیاری
کاراکتر # در ابتدای کد هگز اختیاری است. ابزار #4f46e5 و 4f46e5 را یکسان میپذیرد. این کار از کپی مستقیم از منابع مختلف پشتیبانی میکند.
روش تبدیل ریاضی دقیق
تبدیل هر جفت رقم هگز به یک عدد صحیح بین ۰ تا ۲۵۵ به صورت زیر انجام میشود:
- هر رقم جداگانه در جایگاه خود ضرب در ۱۶ به توان ۱ (برای رقم اول) یا ۱۶ به توان ۰ (برای رقم دوم) میشود.
- رقوم حروفی (A-F) معادل ۱۰-۱۵ هستند.
- حاصل جمع دو بخش، مقدار کانال RGB است.
جدول زیر مقادیر معادل برخی کدهای رایج را نشان میدهد:
| کد هگز | RR | GG | BB | RGB معادل |
|---|---|---|---|---|
| #000000 | 00 | 00 | 00 | 0, 0, 0 |
| #FFFFFF | FF | FF | FF | 255, 255, 255 |
| #FF0000 | FF | 00 | 00 | 255, 0, 0 |
| #00FF00 | 00 | FF | 00 | 0, 255, 0 |
| #0000FF | 00 | 00 | FF | 0, 0, 255 |
| #808080 | 80 | 80 | 80 | 128, 128, 128 |
| #4f46e5 | 4F | 46 | E5 | 79, 70, 229 |
توجه: حروف کد هگز حساس به حروف بزرگ و کوچک نیستند. #4f46e5 با #4F46E5 یکسان است.
عدم پشتیبانی از آلفا و کدهای ۸ رقمی
کدهای هگز ۸ رقمی (مانند #4f46e580) که شامل شفافیت (آلفا) هستند، در این صفحه پشتیبانی نمیشوند. انتظار داریم ورودی فقط ۶ رقم (یا ۳ رقم) باشد. اگر کاربر چنین کدی وارد کند، پیام خطای ذکر شده نمایش داده میشود.
ویژگیهای تعاملی و مدیریت خطا
- بهروزرسانی همزمان: هر تغییری در هر فیلد (HEX، RGB، HSL، و غیره) بلافاصله مقادیر سایر فیلدها را بهروز میکند.
- ورودی نادرست: اگر کاربر کدی مانند
#xyzیا12345678(بیش از ۶ رقم) وارد کند، پیام خطا ظاهر میشود. - ارقام سهرقمی: مانند
#fffبه#ffffffتبدیل میشود و سپس نتایج نمایش داده میشود. - بدون ذخیرهسازی: هیچ دادهای به سرور ارسال نمیشود. همه تبدیلها در مرورگر شما انجام میگیرد.
مثالهایی از ورودی و خطا
| ورودی | نتیجه |
|---|---|
#1E90FF |
30, 144, 255 |
abc |
170, 187, 204 |
#ff6600 |
255, 102, 0 |
#xyz |
پیام خطا |
#12345678 |
پیام خطا (۸ رقم) |
کاربردهای عملی برای توسعهدهندگان و طراحان
۱. کدهای CSS و جاوااسکریپت
در CSS میتوانید از هر دو فرمت استفاده کنید:
color: #ff6600; /* هگز */
color: rgb(255, 102, 0); /* RGB */
اما در canvas API و fillStyle اغلب باید از رشته RGB استفاده کنید. این صفحه اعداد را به صورت 255, 102, 0 در اختیار شما قرار میدهد تا مستقیماً در کد جاوااسکریپت قرار دهید.
۲. کار با برندینگ
بسیاری از راهنماهای برند رنگها را به صورت هگز ارائه میدهند. برای استفاده در نرمافزارهایی مانند Photoshop یا Illustrator که مقادیر RGB را میپذیرند، این ابزار تبدیل دقیق را فراهم میکند.
۳. محاسبه تضاد رنگی (Accessibility)
برای ارزیابی WCAG باید روشنایی نسبی (luminance) را از مقادیر RGB محاسبه کنید. با داشتن اعداد RGB میتوانید فرمول استاندارد را اجرا کنید:
L = 0.2126 × Rₗᵢₙ + 0.7152 × Gₗᵢₙ + 0.0722 × Bₗᵢₙ
که در آن Rₗᵢₙ از مقدار گامای ۲٫۲ تبدیل میشود. این ابزار اعداد خام را در اختیار شما میگذارد.
مفاهیم رنگشناسی با HEX و RGB
رنگهای خاکستری
در رنگهای خاکستری هر سه کانال برابرند. مثلاً #808080 یعنی 128, 128, 128. با تغییر مقدار از 00 تا FF ۲۵۶ سطح خاکستری به دست میآید.
رنگهای اصلی
- قرمز:
#FF0000→255, 0, 0 - سبز:
#00FF00→0, 255, 0 - آبی:
#0000FF→0, 0, 255
با ترکیب دو کانال با شدت کامل، رنگهای ثانویه به دست میآید:
- زرد:
#FFFF00→255, 255, 0 - فیروزهای:
#00FFFF→0, 255, 255 - ارغوانی:
#FF00FF→255, 0, 255
محاسبه رنگ مکمل
رنگ مکمل از تفریق هر کانال از ۲۵۵ به دست میآید:
#4f46e5مکمل:(255-79), (255-70), (255-229)=176, 185, 26که در هگز#b0b91aاست.
سوالات متداول (FAQ)
۱. آیا کد هگز میتواند بدون علامت # باشد؟
بله. ابزار هم #4f46e5 و هم 4f46e5 را میپذیرد. اگر # نباشد، همچنان معتبر است.
۲. چرا کد هگز ۸ رقمی (با آلفا) کار نمیکند؟
این صفحه فقط کدهای ۶ رقمی (رنگ ثابت) و ۳ رقمی (شورتهند) را پشتیبانی میکند. کدهای شامل شفافیت نیاز به یک فضای رنگی RGBA دارند که در این ابزار پشتیبانی نمیشود.
۳. چگونه یک کد سه رقمی مانند #fff تبدیل میشود؟
ابتدا به شش رقم گسترش مییابد: #ffffff. سپس هر جفت ff معادل ۲۵۵ میشود. بنابراین #fff معادل 255, 255, 255 است.
۴. آیا ممکن است خروجی RGB غیرصحیح باشد؟
خیر. تبدیل از پایه ۱۶ به پایه ۱۰ کاملاً دقیق است. مثال: #4f46e5 همیشه 79, 70, 229 تولید میکند. هیچ گرد کردنی وجود ندارد.
۵. چه پیغام خطایی برای ورودی نامعتبر نمایش داده میشود؟
دقیقاً: «یک کد هکس مانند #4f46e5 یا #abc وارد کنید.»
۶. آیا میتوانم از حروف بزرگ استفاده کنم؟
بله. #4F46E5 معادل #4f46e5 است. حروف بزرگ و کوچک تفاوتی ندارند.