تبدیل HEX به RGB Hexadecimal ↔ Red Green Blue رایگان آنلاین امن

چرا HEX را به RGB تبدیل می‌کنید

ابزار طراحی رنگ را به صورت #5A4632 به شما می‌دهد. شیوه‌نامه، اسکریپت بوم، کتابخانهٔ نمودار یا برنامهٔ گرافیکی آن را به صورت rgb(90, 70, 50) می‌خواهد. آن‌ها یک رنگ‌اند و کار رسیدن از یک املا به دیگری مدام پیش می‌آید: راهنمای برند کدهای hex را فهرست می‌کند و کد شما برای محاسبهٔ سایهٔ روشن‌تر عدد می‌خواهد، مشتری رنگی از یک لوگو می‌فرستد و باید rgba() را با شفافیت پر کنید، کتابخانه‌ای فقط سه مقدار جدا می‌پذیرد. تبدیل HEX به RGB کار کوچکی است و مبدل قابل اعتماد شما را از محاسبهٔ مبنای شانزده در ذهن و اشتباه کردن نجات می‌دهد.

تبدیل دقیق است، که دربارهٔ هر تبدیل رنگ صدق نمی‌کند. Hex و rgb() دو املای همان سه عدد هستند، مقدار نور قرمز، سبز و آبی که صفحه باید ساطع کند، هر کدام از 0 تا 255. هیچ چیز تقریبی نیست و رفت و برگشت همان چیزی را که از آن شروع شد پس می‌دهد. این صفحه آن را در مرورگر شما انجام می‌دهد و چیزی بارگذاری نمی‌شود. در ادامه می‌یابید که رقم‌های hex چگونه به سه عدد نگاشت می‌شوند، شفافیت چگونه منتقل می‌شود، شکل کوتاه چه می‌کند، محدودیت‌های sRGB، و موقعیت‌هایی که توسعه‌دهنده‌ها و طراح‌ها باید HEX را به RGB تبدیل کنند.

تبدیل چگونه کار می‌کند

سه جفت رقم به سه عدد تبدیل می‌شوند

رنگ hex علامت هش است و پس از آن شش رقم شانزده‌شانزدهی که جفت‌جفت خوانده می‌شوند: جفت اول قرمز است، دوم سبز، سوم آبی. هر جفت عددی در مبنای شانزده میان 00 و FF است، که در نظام دهدهی که هر روز استفاده می‌کنید 0 تا 255 است. پس #5A4632 به 5A، 46 و 32 تقسیم می‌شود. 5A برابر 5 × 16 + 10 = 90 است، 46 برابر 4 × 16 + 6 = 70، و 32 برابر 3 × 16 + 2 = 50. رنگ rgb(90, 70, 50) است، همان مثالی که صفحه با آن شروع می‌شود.

چرا رقم‌ها از 0 تا F می‌روند

مبنای شانزده شانزده نماد لازم دارد، پس بعد از 9 حرف‌های A تا F می‌آیند که نمایندهٔ 10 تا 15 هستند. جفتی از این رقم‌ها 16 × 16 = 256 مقدار می‌دهد، دقیقاً آنچه یک بایت می‌تواند در خود جا بدهد. رنگ صفحه سه بایت است و hex فقط راه فشرده‌ای برای نوشتن آن‌هاست: شش نویسه به جای سه عدد با ویرگول و پرانتز.

حروف بزرگ و کوچک

#5a4632 و #5A4632 یک رنگ‌اند. CSS هر دو را می‌پذیرد و این مبدل هم. برای یک پروژه یک قرارداد انتخاب کنید و به آن پایبند بمانید، چون حروف مخلوط جست‌وجو در شیوه‌نامه را سخت‌تر می‌کند.

تبدیل چه چیزی را نگه می‌دارد و چه چیزی را نمی‌تواند

رنگ را دقیقاً نگه می‌دارد

Hex و rgb() دو املای همان سه عدد هستند، 0 تا 255 برای قرمز، سبز و آبی، پس هیچ چیز تقریبی نیست و رفت و برگشت همان چیزی را که از آن شروع شد پس می‌دهد. HEX را به RGB تبدیل کنید و برگردانید و همان کدی را دارید که با آن شروع کردید، با استثنای احتمالی حروف بزرگ.

شفافیت را منتقل می‌کند

مقدار چهارم برای شفافیت هم منتقل می‌شود: #RRGGBBAA به rgba() تبدیل می‌شود و برعکس. جفت آخر کانال آلفا است، از 00، کاملاً شفاف، تا FF، کاملاً کدر. پس #5A463280 برابر rgba(90, 70, 50, 0.5) است، چون 80 در hex برابر 128 است و 128 از 255 حدود یک‌دوم است. هشت رقم را همهٔ مرورگرهای امروزی می‌پذیرند.

نمی‌تواند رنگ‌های بیرون از sRGB را توصیف کند

هر دو املا sRGB را توصیف می‌کنند، فضای رنگی که صفحه سی سال است استفاده می‌کند. نمی‌توانند رنگی بیرون از آن را توصیف کنند، که نمادگذاری‌های جدیدتر CSS، یعنی lab()، oklch() و color()، برای همین وجود دارند. نمایشگرهای مدرن می‌توانند رنگ‌های اشباع‌تری از آنچه sRGB دارد نشان بدهند، و طراحی که چنین رنگی را در ابزاری با گستره وسیع انتخاب کرده باشد وقتی آن را به صورت hex بنویسد می‌بیند که به sRGB بریده شده است.

شکل کوتاه باز می‌شود، نگه داشته نمی‌شود

شکل کوتاه به جای حفظ شدن باز می‌شود: #abc به صورت #AABBCC برمی‌گردد، که همان رنگ است که به شکل بلند نوشته شده. هر رقم دوبرابر می‌شود. یعنی می‌توانید کد سه رقمی را جای‌گذاری کنید و عددهای درست را بگیرید، اما نمی‌توانید املای کوتاه را از روی بلند فقط با نگاه کردن بازیابید، فقط با بررسی اینکه هر جفت تکرار می‌شود.

رنگ‌های رایج و عددهایشان

چند مورد برای یادآوری

سفید #FFFFFF است، که rgb(255, 255, 255) است: هر سه نور با توان کامل. مشکی #000000 است، rgb(0, 0, 0): اصلاً نوری نیست. قرمز خالص #FF0000 است، سبز #00FF00 و آبی #0000FF. خاکستری میانی هر کدی با سه جفت برابر است، مثل #808080، که rgb(128, 128, 128) است. جفت‌های برابر همیشه یعنی خاکستری، چون مقدارهای برابر از سه نور فامی نمی‌دهند.

خواندن کد در یک نگاه

وقتی الگو را بدانید می‌توانید رنگ را از رقم‌های hex تخمین بزنید. کدی که با جفت اول بالا شروع شود مایل به قرمز است، جفت میانی بالا مایل به سبز، جفت آخر بالا مایل به آبی. #FF8800 قرمز زیاد، کمی سبز و هیچ آبی نیست، که نارنجی است. برای این به ابزار نیاز ندارید، اما برای عددهای دقیق نیاز دارید.

چگونه HEX را اینجا به RGB تبدیل کنیم

کد hex را تایپ یا جای‌گذاری کنید

رنگ را در فیلد اول وارد کنید، با علامت هش یا بدون آن. شکل سه، شش و هشت رقمی پذیرفته می‌شوند.

مقدار rgb را بخوانید

پاسخ بلافاصله در فیلد دیگر ظاهر می‌شود، به شکل rgb(90, 70, 50)، یا rgba() اگر کد شفافیت داشته باشد. صفحه جملهٔ #5A4632 = rgb(90, 70, 50) را نشان می‌دهد تا در یک نگاه بررسی کنید.

آن را در کدتان کپی کنید

نتیجه را در شیوه‌نامه، اسکریپت یا ابزاری که خواسته جای‌گذاری کنید. اگر سه عدد را جدا لازم دارید، همان‌هایی هستند که داخل پرانتزند.

این نمادگذاری‌ها از کجا می‌آیند

Hex و RGB یک چیزند که دو بار نوشته شده

رنگ صفحه سه عدد است، اینکه چه مقدار نور قرمز، سبز و آبی ساطع شود، هر کدام از 0 تا 255، که یک بایت است. Hex فقط آن بایت‌ها را در مبنای شانزده می‌نویسد، پس #FF8800 و rgb(255, 136, 0) یک دستورند برای یک پیکسل.

HSL و CMYK

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

کجا با آن‌ها روبه‌رو می‌شوید

در شیوه‌نامه‌ها

Hex چیزی است که در شیوه‌نامه تایپ می‌کنید و ابزار طراحی به دستتان می‌دهد. RGB هر جا ظاهر می‌شود که رنگ به حساب نیاز دارد: گرادیان‌ها، شفافیت، کدی که سایه‌ای محاسبه می‌کند. دانستن هر دو املا و توانایی جابه‌جایی میان آن‌ها بخشی از کار روزمرهٔ فرانت‌اند است.

در اسکریپت‌ها و نقاشی روی بوم

کد نقاشی اغلب سه عدد را جدا می‌خواهد، برای ترکیب دو رنگ، تیره کردن یکی به اندازهٔ ثابت یا آزمودن اینکه پیکسلی با هدف می‌خواند یا نه. تبدیل HEX به RGB عددها را مستقیم به شما می‌دهد.

در ابزارهای گرافیک و تصویر

ویرایشگرهای تصویر معمولاً رنگ را به صورت سه عدد یا کد hex نشان می‌دهند و می‌گذارند هر کدام را تایپ کنید. جابه‌جایی میان این دو اجازه می‌دهد رنگی از صفحهٔ وب را در برنامه‌ای که عدد می‌خواهد بازتولید کنید.

در مستندات و راهنماهای برند

راهنمای برند ممکن است رنگی را برای وب در hex، برای صفحه‌ها در RGB و برای چاپ در CMYK فهرست کند. هماهنگ بودن دو مورد اول یک تبدیل است و از آن بررسی‌هایی است که غلط تایپی را پیش از چاپ روی هزار بروشور می‌گیرد.

کاربردهای عملی شکل RGB

شفافیت بدون رنگ دوم

با rgba(90, 70, 50, 0.5) رنگ را با نیم قدرت دارید، تا آنچه پشت آن است دیده شود. این راه استاندارد ساختن پوشش‌ها، سایه‌ها و پس‌زمینه‌های رنگ‌آمیزی‌شده از رنگ برند بدون ابداع رنگ جدید است.

محاسبهٔ سایه‌های روشن‌تر و تیره‌تر

برای کمی تیره‌تر کردن حالت هاور، اسکریپت می‌تواند مقدار ثابتی از هر سه عدد کم کند. انجام همین کار روی رشتهٔ hex دست‌وپاگیر است؛ روی rgb حساب ساده‌ای است. اگر تنظیمی مبتنی بر فام لازم دارید، به جای آن HEX را به HSL تبدیل کنید.

بررسی کنتراست

ابزارهای دسترس‌پذیری کنتراست میان دو رنگ را از مقدارهای قرمز، سبز و آبی‌شان محاسبه می‌کنند. داشتن عددها اجازه می‌دهد خودتان محاسبه کنید، یا آن‌ها را در بررسی‌کننده جای‌گذاری کنید، تا مطمئن شوید متن روی پس‌زمینه خوانا است.

تله‌ها هنگام تبدیل HEX به RGB

فراموش کردن جفت آلفا

کد هشت رقمی شفافیت را در دو رقم آخر دارد. اگر آن‌ها را بردارید، شفافیت را از دست می‌دهید. پیش از آنکه نتیجه را همان رنگ بدانید طول کد را بررسی کنید.

قاطی کردن ترتیب

Hex قرمز، سبز، آبی است. چند قالب، و بعضی APIهای گرافیکی قدیمی، آبی، سبز، قرمز را به کار می‌برند. اگر رنگی در برنامه‌ای خاص غلط درمی‌آید، ترتیب کانال آن را بررسی کنید.

کپی کردن از اسکرین‌شات

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

فرض کردن اینکه صفحه‌ها توافق دارند

دو صفحه همان کد را کمی متفاوت نشان می‌دهند. عددها دقیق‌اند؛ آنچه می‌بینید به نمایشگر و پروفایلش بستگی دارد.

پرسش‌هایی که مردم پیش از تبدیل می‌پرسند

#FF0000 در RGB چیست؟

rgb(255, 0, 0)، قرمز خالص.

#FFFFFF در RGB چیست؟

rgb(255, 255, 255)، سفید.

آیا می‌توانم کد سه رقمی را تبدیل کنم؟

بله. هر رقم دوبرابر می‌شود: #09C به #0099CC تبدیل می‌شود، که rgb(0, 153, 204) است.

آیا تبدیل دقیق است؟

بله. دو املای همان سه عدد است.

آیا رنگ من بارگذاری می‌شود؟

خیر. محاسبه در مرورگر شما انجام می‌شود و چیزی به جایی فرستاده نمی‌شود.

چگونه برگردم؟

با RGB به HEX، که سه عدد را به صورت کد hex می‌نویسد.

انتخاب هوشمندانه هنگام تبدیل HEX به RGB

بدانید بعد چه لازم دارید

اگر شفافیت لازم دارید، rgba() شکل طبیعی است. اگر باید روشنی یا فام را تنظیم کنید، HSL آسان‌تر است. اگر رنگ قرار است چاپ شود، CMYK گام بعدی است، با هشدارهایی که آن تبدیل دارد. RGB به CMYK را ببینید.

hex را نسخهٔ مادر نگه دارید

برای رنگ‌های پالت برند، کد hex را به عنوان مرجع نگه دارید. کوتاه است، بدون ابهام و همه‌جا فهمیده می‌شود. شکل‌های دیگر را هر وقت لازم شد از آن بسازید.

از ویژگی‌های سفارشی استفاده کنید

در CSS، رنگ‌ها را یک بار تعریف کنید، مثل --brand: #5A4632، و با نام به آن‌ها ارجاع دهید. اگر برای rgba() عددها را لازم دارید، --brand-rgb: 90 70 50 را هم تعریف کنید. آن‌گاه تبدیل فقط یک بار انجام می‌شود.

CSS مدرن و شکل RGB

نحو جداشده با فاصله

CSS امروزی rgb() را با فاصله و یک اسلش برای شفافیت می‌پذیرد، مثل rgb(90 70 50 / 50%). عددها همان شکل با ویرگول هستند، پس نتیجهٔ تبدیل در هر دو کار می‌کند. مرورگرهای قدیمی‌تر و بعضی ابزارها ویرگول‌ها را انتظار دارند، پس وقتی نمی‌دانید رنگ کجا استفاده می‌شود شکل با ویرگول انتخاب امن می‌ماند.

درصدها و کسرها

RGB را می‌شود با درصد هم نوشت، مثل rgb(35% 27% 20%)، که در آن 100 درصد برابر 255 است. صفحه عددهای کامل می‌دهد چون hex همان‌ها را ذخیره می‌کند و بیشتر ابزارها همان‌ها را انتظار دارند. اگر درصد لازم دارید، هر عدد را بر 255 تقسیم و در 100 ضرب کنید.

ویژگی‌های سفارشی برای سه عدد

ترفند رایج این است که فقط سه عدد را در یک ویژگی سفارشی ذخیره کنید، --brand-rgb: 90 70 50، و آن را به صورت rgb(var(--brand-rgb) / 0.5) استفاده کنید. اجازه می‌دهد یک تعریف هم برای استفادهٔ توپر و هم نیمه‌شفاف به کار برود. وقتی برای این منظور HEX را به RGB تبدیل می‌کنید، فقط عددها را از پاسخ کپی کنید.

کار با رنگ در عمل

با راهنمای برند مقایسه کنید

اگر راهنمای برند هم hex و هم rgb را برای یک رنگ می‌دهد، یکی را تبدیل کنید و با دیگری مقایسه کنید. ناهماهنگی معمولاً یعنی غلط تایپی در راهنما، و پیدا کردنش پیش از آنکه روی هر صفحه استفاده شود ارزش یک دقیقه‌ای را دارد که می‌گیرد.

پالت را به صورت فهرست کوتاه نگه دارید

بیشتر سایت‌ها از پنج تا هشت رنگ استفاده می‌کنند. آن‌ها را در یادداشتی به هر دو شکل بنویسید. هر بار که باید برای مؤلفهٔ جدیدی HEX را به RGB تبدیل کنید، می‌توانید آن را پیدا کنید به جای اینکه دوباره حسابش کنید، و پالت یکدست می‌ماند.

رنگ‌ها را بر اساس نقش نام‌گذاری کنید

نام‌هایی مثل اصلی، سطح و هشدار بهتر از نام‌هایی مثل سبز یا قهوه‌ای از بازطراحی‌ها جان به در می‌برند. تبدیل عددها را به شما می‌دهد؛ نام می‌گوید برای چه هستند.

مبدل‌های مرتبط

همین خانوادهٔ ابزارها تبدیل‌های همسایه را پوشش می‌دهد. برای برگشت از RGB به HEX استفاده کنید. برای رنگ‌هایی که با فام توصیف می‌شوند، HEX به HSL و HSL به HEX در دسترس‌اند، و برای چاپ، HEX به CMYK، CMYK به HEX و CMYK به RGB. برای اندازه‌ها در همان شیوه‌نامه، px به rem و px به em برای طول همان کاری را می‌کنند که این صفحه برای رنگ‌ها.

یک مثال عملی

فرض کنید رنگ برند شما #1E7A5C است و نسخهٔ نیمه‌شفافی برای پس‌زمینهٔ کارت می‌خواهید. کد را تایپ می‌کنید و rgb(30, 122, 92) را می‌خوانید. در شیوه‌نامه background: rgba(30, 122, 92, 0.12) می‌نویسید، سایه‌روشن بسیار کم‌رنگ همان سبز، و حاشیه‌ای با rgba(30, 122, 92, 0.4). کارت هم روی صفحهٔ سفید و هم خاکستری راحت می‌نشیند، چون شفافیت صفحه را از خود رد می‌کند. وقتی بعداً رنگ برند عوض شد، سه عدد را در یک ویژگی سفارشی جایگزین می‌کنید و همهٔ سایه‌روشن‌ها دنبالش می‌آیند.

یک فهرست کوتاه

پیش از تبدیل

طول کد را بررسی کنید: سه، شش یا هشت رقم. تصمیم بگیرید شفافیت لازم دارید یا نه.

هنگام تبدیل

کد را جای‌گذاری کنید، مقدار rgb را بخوانید و با پرانتزهایش کپی کنید، یا فقط سه عدد را.

پس از تبدیل

رنگ را در زمینه، روی پس‌زمینهٔ واقعی، آزمایش کنید و کنتراست هر متنی را که روی آن می‌نشیند بررسی کنید.

اشتباه‌های رایج

جا انداختن جفت شفافیت

هشت رقم یعنی آلفا. نگهش دارید یا به rgba() تبدیلش کنید.

قاطی کردن ترتیب کانال

Hex اول قرمز است. بعضی ابزارها اول آبی را انتظار دارند.

حقیقت دانستن صفحه

عددها دقیق‌اند. ظاهر به نمایشگر بستگی دارد.

رنگ‌های شما روی دستگاهتان می‌مانند

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

خلاصه

برای تبدیل HEX به RGB در اینجا، کد hex را تایپ یا جای‌گذاری کنید و مقدار rgb را بلافاصله بخوانید. تبدیل رنگ را دقیقاً نگه می‌دارد: hex و rgb() دو املای همان سه عدد هستند، 0 تا 255 برای قرمز، سبز و آبی، پس هیچ چیز تقریبی نیست و رفت و برگشت همان چیزی را که از آن شروع شد پس می‌دهد. مقدار چهارم برای شفافیت هم منتقل می‌شود، چون #RRGGBBAA به rgba() تبدیل می‌شود و برعکس. هر دو املا sRGB را توصیف می‌کنند، پس نمی‌توانند رنگ‌های بیرون از آن را توصیف کنند، و شکل کوتاه باز می‌شود نه اینکه حفظ شود: #abc به صورت #AABBCC برمی‌گردد. چیزی بارگذاری نمی‌شود.