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

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

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

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

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

هر عدد به دو رقم هگز تبدیل می‌شود

rgb(90, 70, 50) را در نظر بگیرید. هر عدد را بر شانزده تقسیم کنید: 90 برابر است با 5 ضرب در 16 به‌علاوهٔ 10، و 10 رقم A است، پس 90 می‌شود 5A. 70 برابر است با 4 ضرب در 16 به‌علاوهٔ 6، پس 46. 50 برابر است با 3 ضرب در 16 به‌علاوهٔ 2، پس 32. سه جفت را کنار هم بگذارید و علامت هش را اضافه کنید: #5A4632. صفحه این کار را همزمان با تایپ شما انجام می‌دهد و جملهٔ rgb(90, 70, 50) = #5A4632 را نشان می‌دهد تا بتوانید بررسی کنید.

صفرهای پیشین

هر جفت باید دو رقم داشته باشد. عددی کمتر از 16 به صفر پیشین نیاز دارد: 7 می‌شود 07 و 0 می‌شود 00. پس rgb(0, 7, 255) برابر #0007FF است، نه #07FF که معنایی کاملاً متفاوت دارد. فراموش کردن صفر رایج‌ترین اشتباه هنگام تبدیل دستی است.

بازه

هر عدد باید بین 0 و 255 باشد. مقداری بالاتر از 255 را نمی‌توان در دو رقم هگز نوشت و مقدار منفی معنایی ندارد. اگر محاسبه‌ای در کد شما 270 یا منفی 5 تولید کرده است، ابتدا آن را به بازه محدود کنید. مبدل هم همین کار را می‌کند تا هرگز کد نامعتبر تولید نکند.

آنچه تبدیل حفظ می‌کند و آنچه نمی‌تواند

رنگ را دقیقاً حفظ می‌کند

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

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

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

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

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

شکل کوتاه را حفظ نمی‌کند

جایی که کدی را می‌شد با سه رقم نوشت، مثل #AABBCC به صورت #ABC، مبدل شکل بلند را می‌دهد. شکل بلند همیشه معتبر و همان رنگ است؛ شکل کوتاه فقط راحتی برای خواننده است.

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

چند مورد برای به خاطر سپردن

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

عادت رنگ‌های امن وب

راهنماهای قدیمی از رنگ‌های امن وب سخن می‌گفتند که جفت‌هایشان فقط 00، 33، 66، 99، CC یا FF بود. آن‌ها به دوران صفحه‌نمایش‌های 256 رنگی تعلق دارند و دلیلی برای ماندنشان نیست. هر مقداری را که دوست دارید به کار ببرید؛ صفحه‌نمایش همه را نشان می‌دهد.

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

سه عدد را وارد کنید

رنگ را در کادر اول به شکل rgb(90, 70, 50) یا با عددهای جداشده با ویرگول یا فاصله وارد کنید. درصد لازم نیست؛ عددهایی از 0 تا 255 به کار ببرید.

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

پاسخ فوراً در کادر دیگر ظاهر می‌شود، با علامت هش آغاز می‌شود و با حروف بزرگ است. اگر مقدار چهارمی برای شفافیت داده باشید، کد هشت رقم دارد.

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

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

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

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

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

HSL و CMYK

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

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

در تحویل طراحی

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

در اسکریپت‌هایی که رنگ محاسبه می‌کنند

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

در بصری‌سازی داده

کتابخانه‌های نمودار رنگ‌ها را به صورت رشتهٔ هگز می‌پذیرند. پالت‌هایی که با روش‌های عددی تولید می‌شوند به صورت سه‌تایی rgb درمی‌آیند. یک گام تبدیل یکی را به دیگری تبدیل می‌کند.

در اسناد و ارائه‌ها

برنامه‌های اداری رنگ‌ها را به صورت عددهای RGB نشان می‌دهند؛ ویرایشگرهای وب هگز می‌خواهند. وقتی رنگ برند باید در هر دو ظاهر شود، تبدیل آن‌ها را یکسان نگه می‌دارد.

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

فراموش کردن صفر پیشین

نوشتن 7 به صورت 7 و نه 07 هر رقم بعدی را جابه‌جا می‌کند. همیشه برای هر جفت دو رقم به کار ببرید.

اشتباه گرفتن درصد با 0 تا 255

rgb(35%, 27%, 20%) املایی دیگر از عددهاست، با 100 درصد برابر 255. اگر منبع شما درصد به کار می‌برد، ابتدا آن‌ها را به 0 تا 255 تبدیل کنید: در 2.55 ضرب کنید.

خطاهای گردکردن در رنگ‌های محاسبه‌شده

اسکریپتی که 127.5 تولید می‌کند باید تصمیم بگیرد 127 است یا 128. تفاوت نامرئی است، اما برای چیزی که یک رنگ می‌پنداشتید دو کد می‌سازد. همه‌جا به یک شیوه گرد کنید.

برداشتن رنگ از یک نماگرفت

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

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

rgb(255, 0, 0) در هگز چیست؟

#FF0000، قرمز خالص.

rgb(0, 0, 0) در هگز چیست؟

#000000، مشکی.

آیا می‌توانم در کد هگز از حروف کوچک استفاده کنم؟

بله. #5a4632 و #5A4632 همان رنگ‌اند. صفحه حروف بزرگ می‌نویسد.

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

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

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

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

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

با HEX به RGB که سه جفت را به عنوان عدد می‌خواند.

عادت‌هایی که رنگ‌ها را در یک پروژه یکدست نگه می‌دارند

هر رنگ را فقط یک بار تعریف کنید

پالت خود را در ویژگی‌های سفارشی بگذارید، مثل --brand: #5A4632، و رنگ‌ها را با نام ارجاع دهید. وقتی RGB را برای یک رنگ تازه به HEX تبدیل می‌کنید، یک خط اضافه می‌کنید و هر استفاده از آن پیروی می‌کند.

یک حالت حروف انتخاب کنید

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

منبع را ثبت کنید

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

کنتراست را آزمایش کنید

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

چرا 256 گام و پشت عددها چه هست

هشت بیت برای هر نور

هر یک از سه عدد در هشت بیت ذخیره می‌شود که 256 مقدار از 0 تا 255 را ممکن می‌کند. سه تای آن‌ها با هم 256 × 256 × 256 می‌دهد، حدود 16.7 میلیون ترکیب که در بیشتر شرایط بیش از آن است که چشم بتواند تفکیک کند. دلیل اینکه کدهای هگز دقیقاً شش رقم‌اند همین است: دو برای هر نور، نه بیشتر و نه کمتر. وقتی RGB را به HEX تبدیل می‌کنید، سه بایت را به فشرده‌ترین شکلی که مردم می‌توانستند بر آن توافق کنند می‌نویسید.

چرا گام‌های برابر برابر به نظر نمی‌رسند

عددها با نوری که به چشم شما می‌رسد متناسب نیستند. صفحه‌نمایش‌ها منحنی‌ای اعمال می‌کنند، نزدیک به توان 2.2، تا تُن‌های تیره سهم بیشتری از 256 گام بگیرند تا روشن‌ها، که با چشم سازگار است. گامی از 10 به 20 تغییری بزرگ‌تر از گامی از 240 به 250 به نظر می‌رسد. برای شما این یعنی میانگین گرفتن از دو رنگ با میانگین عددهایشان رنگی نمی‌دهد که با مخلوط کردن نورها می‌دیدید، واقعیتی که وقتی در کد گرادیان و ترکیب محاسبه می‌کنید اهمیت دارد.

خاکستری‌ها و قطر

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

ساختن و بررسی یک پالت

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

پالت معمولی یک رنگ اصلی، یک رنگ تأکیدی، یک خنثی برای متن، یک خنثی روشن‌تر برای سطوح و یک یا دو رنگ علامتی برای موفقیت و خطا دارد. هر کدام را در ابزار طراحی انتخاب کنید، عددهای rgb آن را بخوانید و برای فایل استایل RGB را به HEX تبدیل کنید. آن‌ها را به صورت ویژگی‌های سفارشی با نام‌هایی که نقش را توصیف می‌کنند بنویسید و پالت برای استفاده در هر مؤلفه آماده است.

کنتراست میان متن و پس‌زمینه

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

تبدیل یک فهرست

وقتی رنگ‌های زیادی برای تبدیل دارید، یکی‌یکی بروید و هر نتیجه را با نام و کاربردش در جدولی بچسبانید. برای هر رنگ یک دقیقه طول می‌کشد و جدول مرجع کل پروژه می‌شود. اگر رنگی بعداً تنظیم شود، فقط ردیف آن باید تغییر کند.

هماهنگ نگه داشتن هگز و rgb

اگر پروژهٔ شما بعضی رنگ‌ها را به صورت هگز و بعضی را به صورت rgb ذخیره می‌کند، وقتی کسی یکی را ویرایش و دیگری را فراموش کند به‌آسانی از هم دور می‌شوند. یکی را نسخهٔ اصلی بگیرید، معمولاً هگز، و هر وقت لازم شد دیگری را با مبدل استخراج کنید.

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

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

یک مثال عملی

فرض کنید انتخابگر رنگ در یک ویرایشگر تصویر به شما می‌گوید رنگ تأکیدی یک عکس rgb(214, 98, 56) است. سه عدد را وارد می‌کنید و #D66238 می‌خوانید. در فایل استایل می‌نویسید --accent: #D66238 و برای دکمه‌ها و پیوندها به کار می‌برید. همکاری می‌پرسد این رنگ در راهنمای برند چیست و شما کد را می‌فرستید. بعداً به نسخه‌ای نیمه‌شفاف برای یک بنر نیاز دارید و با HEX به RGB آن را برمی‌گردانید تا rgba(214, 98, 56, 0.15) بسازید. هر دو تبدیل دقیق‌اند، پس بنر همان فام دکمه را دارد.

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

پیش از تبدیل

بررسی کنید هر عدد بین 0 و 255 باشد. تصمیم بگیرید شفافیت لازم دارید یا نه.

هنگام تبدیل

سه عدد را وارد کنید، کد را بخوانید و با علامت هش کپی کنید.

پس از تبدیل

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

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

انداختن صفر پیشین

هر جفت دو رقم دارد. 7 می‌شود 07.

نوشتن عددهای بالاتر از 255

نمی‌توان آن‌ها را در دو رقم نوشت. ابتدا محدودشان کنید.

حقیقت دانستن صفحه‌نمایش

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

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

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

خلاصه

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