هگز کد رنگ چیه؟ #HEX CODE

در دنیای طراحی دیجیتال، وب و گرافیک کامپیوتری، رنگ‌ها نقش اساسی در ایجاد هویت بصری، انتقال حس و تجربه کاربری ایفا می‌کنند. برای نمایش و تعریف دقیق رنگ‌ها در محیط‌های مختلف، سیستم‌های کدگذاری متفاوتی توسعه یافته‌اند که دو مورد از رایج‌ترین آن‌ها، کد هگزادسیمال (Hex Code) و فرمت RGB (Red, Green, Blue) هستند. هرچند هر دو سیستم در نهایت یک رنگ مشخص را نمایش می‌دهند، اما کاربردها و زمینه‌های استفاده متفاوتی دارند.

کد هگزادسیمال به دلیل فشردگی و سهولت استفاده، به خصوص در توسعه وب (CSS، HTML)، بسیار محبوب است، در حالی که فرمت RGB به دلیل تفکیک‌پذیری واضح‌تر به سه کانال رنگی اصلی، در نرم‌افزارهای گرافیکی و ویرایش تصویر کاربرد گسترده‌ای دارد. درک نحوه عملکرد این سیستم‌ها و توانایی تبدیل آن‌ها به یکدیگر، برای طراحان، توسعه‌دهندگان وب، و هنرمندان دیجیتال امری حیاتی است. این دانش نه تنها به حفظ یکپارچگی و دقت رنگ‌ها در پلتفرم‌های مختلف کمک می‌کند، بلکه باعث افزایش کنترل و بهینه‌سازی فرآیندهای کاری نیز می‌شود. آشنایی با این تبدیل، پل ارتباطی مهمی میان جنبه‌های فنی و هنری طراحی دیجیتال محسوب می‌شود.

ساختار هگز کد (HEX CODE)

در واقع، هگز کد (Hex Code) کدی است که از عدد و حرف تشکیل شده و هر رنگ را به صورت یکتا مشخص می‌کند. مثل یه اسم مستعار برای هر رنگ! این کدها معمولاً با یک # شروع میشوند و بعد شش کاراکتر قرار می گیرد.

• عدد از 0 تا 9
• حرف از A تا F

این شش کاراکتر به سه بخش تقسیم می شود که هر کدوم مسئول یک رنگ اصلی هستند:

• دو کاراکتر اول: نشان‌دهنده میزان رنگ قرمز (Red) هستند.
• دو کاراکتر وسط: میزان رنگ سبز (Green) رو مشخص می‌کند.
• دو کاراکتر آخر: میزان رنگ آبی (Blue) رو نشان می دهند.

این سه تا رنگ (قرمز، سبز، آبی) همان سیستم رنگی RGB هست که با ترکیبشان، میلیون‌ها رنگ مختلف ساخته می شود.

Hex Code چطوری کار می‌کند؟

هر کدام از این جفت کاراکترها می‌توانند مقداری از 00 (یعنی کمترین میزان اون رنگ) تا FF (یعنی بیشترین میزان آن رنگ) را داشته باشند. مثلاً:

• #FF0000 🟥: این یعنی قرمز خالص (FF برای قرمز، 00 برای سبز و 00 برای آبی).
• #00FF00 🟩: این یعنی سبز خالص.
• #0000FF 🟦: این یعنی آبی خالص.
• #FFFFFF ⬜: این یعنی سفید خالص (بیشترین مقدار از هر سه رنگ).
• #000000 ⚫: این یعنی مشکی خالص (کمترین مقدار از هر سه رنگ).

مرحله به مرحله تبدیل هگز کد به RGB

تبدیل هگز کد به RGB خیلی راحته، فقط کافیه بفهمیم چطوری اون بخش‌های شش‌تایی رو تفکیک کنیم و به عدد تبدیلشون کنیم.

مرحله به مرحله تبدیل هگز کد به RGB

فرض کن می‌خوایم کد #A3D51C رو به RGB تبدیل کنیم.

1. هگز کد رو به سه بخش تقسیم کن: اولین کاری که باید بکنی اینه که اون شش کاراکتر بعد از # رو به سه تا جفت کاراکتر تقسیم کنی:
2. • A3: این قسمت برای رنگ قرمزه (Red).
   • D5: این قسمت برای رنگ سبزه (Green).
   • 1C: این قسمت برای رنگ آبیه (Blue).
3. هر بخش رو به عدد دسیمال (Decimal) تبدیل کن: حالا باید هر کدوم از این جفت‌های هگز رو به عدد عادی (دسیمال) که ما استفاده می‌کنیم تبدیل کنی. توی سیستم هگز، حروف A تا F هم یه سری عدد هستند:
   A = 10
   B = 11
   C = 12
   D = 13
   E = 14
   F = 15
   
   فرمول کلی تبدیل از هگز (دو رقمی) به دسیمال این شکلیه: (رقم اول هگز * 16) + (رقم دوم هگز * 1)
4. حالا این فرمول رو برای هر بخش اعمال می‌کنیم:
5. • برای رنگ قرمز (A3):
   • • A برابر 10 هست.
     • 3 برابر 3 هست.
     • پس میشه: (10 * 16) + (3 * 1) = 160 + 3 = 163
     • مقدار قرمز میشه 163.
   • برای رنگ سبز (D5):
   • • D برابر 13 هست.
     • 5 برابر 5 هست.
     • پس میشه: (13 * 16) + (5 * 1) = 208 + 5 = 213
     • مقدار سبز میشه 213.
   • برای رنگ آبی (1C):
   • • 1 برابر 1 هست.
     • C برابر 12 هست.
     • پس میشه: (1 * 16) + (12 * 1) = 16 + 12 = 28
     • مقدار آبی میشه 28.
6. مقادیر رو توی فرمت RGB بنویس: آخرین قدم اینه که این سه تا عدد رو توی پرانتز و با فرمت rgb(قرمز, سبز, آبی) کنار هم بنویسی.
7. • پس #A3D51C میشه rgb(163, 213, 28).

تبدیل معکوس از کد رنگ RGB به هگزادسیمال Hex

برای تبدیل RGB به هگز، هر یک از مقادیر (قرمز، سبز، آبی) را به صورت جداگانه بر 16 تقسیم می‌کنیم. باقی‌مانده و خارج قسمت، دو رقم هگزادسیمال آن رنگ را تشکیل می‌دهند.

• مثلاً: مقدار 163 (قرمز) را بر 16 تقسیم می‌کنیم: خارج قسمت 10 (A) و باقی‌مانده 3. پس می‌شود A3.
• لازم به ذکر است که مقادیر هر یک از کانال‌های رنگی در فرمت RGB همواره در بازه 0 تا 255 قرار دارند.
• امروزه بسیاری از ابزارهای طراحی گرافیک و ویرایشگرهای کد به صورت خودکار قابلیت تبدیل بین این فرمت‌ها را دارند، اما درک مکانیزم پشت این تبدیل، به شما کنترل و دقت بیشتری می‌بخشد.

حالت‌های خاص کد هگزادسیمال (Shorthand Hex)

گاهی اوقات، در صورتی که هر جفت کاراکتر هگز یکسان باشد (مانند FF یا CC)، کد هگز به صورت مختصر سه کاراکتری نوشته می‌شود. مثلاً #FFFFFF را می‌توان به صورت #FFF و #CC33FF را به صورت #C3F نوشت. (کاربردی در توسعه وبسایت - FrontEnd Development)

اضافه کردن Alpha Channel (RGBA) (پیشرفته‌تر) 

در برخی موارد، فرمت RGBA نیز مورد استفاده قرار می‌گیرد که شامل سه مقدار RGB به علاوه یک مقدار 'آلفا' (Alpha) برای تعیین میزان شفافیت (از 0.0 تا 1.0) است. که بسیار در توصعه فرانت اند وبسایت و داخل بخش CSS استفاده میشود.