تبدیل رنگ HEX به RGB

HEX و RGB: دو روش برای نوشتن یک رنگ

هر رنگی که روی صفحه می‌بینید از سه نور ترکیب می‌شود: قرمز، سبز و آبی. همه سه را بالا ببرید و سفید می‌گیرید؛ همه سه را خاموش کنید و سیاه. HEX و RGB فقط دو نشانه‌گذاری برای توصیف شدت هر یک از این سه کانال هستند. آن‌ها به دقیقاً همان رنگ اشاره می‌کنند، بنابراین یک مبدل خوب فقط بین دو سیستم نوشتاری ترجمه می‌کند بدون اینکه سایه واقعی را تغییر دهد. این همان کاری است که این ابزار انجام می‌دهد، کاملاً در مرورگر شما، در حالی که یک نمونه رنگ زنده نشان می‌دهد تا با چشمان خودتان نتیجه را تایید کنید.

چگونه یک کد hex بخوانیم

یک رنگ hex شبیه #1E90FF به نظر می‌رسد. علامت هشتگ فقط شروع را نشان می‌دهد؛ شش کاراکتر بعد از آن سه جفت هستند که به الگوی #RRGGBB نوشته شده‌اند. جفت اول قرمز، دومی سبز، سومی آبی است. هر جفت یک عدد نوشته‌شده در هگزادسیمال است، یعنی پایه ۱۶، که در آن ارقام از ۰ تا ۹ می‌روند و سپس A، B، C، D، E، F برای ۱۰ تا ۱۵ می‌ایستند. یک جفت می‌تواند مقادیری از 00 (کانال کاملاً خاموش) تا FF (کاملاً روشن) نگه دارد. در اعشاری ساده آن محدوده دقیقاً ۰ تا ۲۵۵ است، همان مقیاسی که RGB استفاده می‌کند. با ۲۵۶ سطح ممکن برای هر کانال، شکل شش رقمی می‌تواند ۱۶٬۷۷۷٬۲۱۶ رنگ مجزا توصیف کند.

تبدیل در هر دو جهت، با یک مثال کاری

برای رفتن از HEX به RGB، کد را به سه جفت تقسیم کنید و هر کدام را از پایه ۱۶ به اعشاری معمولی تبدیل کنید. #1E90FF را در نظر بگیرید. جفت قرمز 1E است: یعنی ۱ ضربدر ۱۶، به علاوه ۱۴ (E)، که برابر ۳۰ می‌شود. جفت سبز 90 برابر ۹ ضربدر ۱۶، به علاوه ۰، که برابر ۱۴۴ می‌شود. جفت آبی FF برابر ۱۵ ضربدر ۱۶، به علاوه ۱۵، که برابر ۲۵۵ می‌شود. بنابراین #1E90FF به rgb(30, 144, 255) تبدیل می‌شود - آبی dodger آشنا.

رفتن به مسیر عکس همان فرایند است اما معکوس. هر عدد RGB را به صورت دو رقم هگز بنویسید. قرمز خالص، rgb(255, 0, 0)، می‌دهد FF، 00 و 00، که به #FF0000 متصل می‌شوند. یک نکته قابل توجه: اگر یک مقدار زیر ۱۶ بود، هنوز به هر دو رقم نیاز دارید، بنابراین ۵ به صورت 05 نوشته می‌شود نه فقط 5. مبدل این padding را برای شما مدیریت می‌کند، اما وقتی دستی انجام می‌دهید مردم را به دردسر می‌اندازد.

هر قالب کجا استفاده می‌شود

HEX زبان روزمره وب است. CSS، HTML و بیشتر کدهایی که می‌نویسید به کدهای hex متکی هستند چون فشرده‌اند و کپی کردن آن‌ها آسان است. RGB معمولاً در ابزارهای طراحی و تصویر ظاهر می‌شود - Figma، Photoshop، Sketch و Illustrator معمولاً اسلایدرها یا فیلدها را در محدوده ۰-۲۵۵ نشان می‌دهند، و برنامه‌های ضبط صفحه یا ویدیو اغلب RGB هم می‌خواهند. بنابراین اغلب یک کد hex از یک stylesheet می‌گیرید و به شکل RGB برای تایپ در یک پنل طراحی نیاز دارید، یا برعکس. همین رفت و آمد دلیل مفید بودن یک مبدل است. اگر نیاز دارید به جای ترجمه یک رنگ مجموعه‌ای کامل از سایه‌های متناسب بسازید، مولد پالت رنگ ما نقطه شروع بهتری است، و ابزارهای بیشتری مثل این را زیر ابزارهای توسعه‌دهنده خواهید یافت.

آلفا، شفافیت و HSL

هر دو نشانه‌گذاری یک شکل توسعه‌یافته دارند که شفافیت اضافه می‌کند. RGB به rgba(30, 144, 255, 0.5) تبدیل می‌شود، که مقدار چهارم آلفا است - ۰ کاملاً شفاف و ۱ کاملاً جامد. HEX یک جفت چهارم برای همین منظور اضافه می‌کند که یک کد هشت‌رقمی #RRGGBBAA می‌دهد؛ 80، برای مثال، تقریباً ۵۰ درصد کدری است. تعدادی از مبدل‌ها HSL (رنگ‌دهی، اشباع، روشنایی) را هم ارائه می‌دهند که رنگ را به گونه‌ای که یک انسان ممکن است توصیف کند بیان می‌کند - یک رنگ‌دهی روی چرخ انتخاب کنید، سپس شدت و روشنایی آن را تنظیم کنید. HSL یک مدل ذهنی متفاوت است نه یک پالت متفاوت، بنابراین وقتی می‌خواهید رنگی را روشن‌تر یا کم‌رنگ‌تر کنید بدون اینکه سه عدد جداگانه را تغییر دهید شهودی‌تر می‌تواند باشد.

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