HEX به RGB Color Converter

کد رنگی HEX چیست؟

کد رنگی HEX یک رشته آلفانومریک شش کاراکتر است که در طراحی وب و گرافیک دیجیتال برای نشان دادن یک رنگ خاص استفاده می شود. فرمت آن از الگوی#RRGGBB، که در آن هر جفت دو کاراکتر شدت یکی از سه رنگ اولیه افزایشی را رمزگذاری می کند - قرمز (RR) ، سبز (GG) و آبی (BB) - با استفاده از نماد هگزادسیمال (بنای 16). هر جفت از00(قدرت صفر) بهFF(حداکثر شدت، معادل 255 در اعشار).

کد های HEX از نیاز به تعریف رنگ در HTML و CSS بدون اتکا به کلمات کلیدی رنگ نامگذاری شده سرچشمه گرفته است. در حالی که CSS در حال حاضر از چندین فرمت رنگ پشتیبانی می کند از جملهrgb(), hsl()، وoklch()، HEX به طور گسترده ای در توسعه front-end ، دست دادن طراحی و دستورالعمل های برندسازی استفاده می شود. تقریباً هر انتخاب کننده رنگ در ابزارهایی مانند Figma ، Sketch ، Adobe Photoshop و Canva به طور پیش فرض یک مقدار HEX را نمایش می دهد.

تعداد کل رنگ های منحصر به فرد قابل نمایش با کدهای شش رقمی HEX 16،777،216 (256 x 256 x 256) است. این اغلب به عنوان "رنگ واقعی" یا "رنگ 24 بیتی" نامیده می شود که با عمق رنگ اکثر صفحه نمایش های مدرن مطابقت دارد. هر کانال 8 بیت (یک بایت) دریافت می کند و سه کانال با هم 24 بیت داده رنگ تولید می کنند.

کد های HEX حساس به حروف بزرگ و کوچک نیستند، بنابراین#ff8000و#FF8000برخی از راهنماهای سبک برای خوانایی، حروف بزرگ را ترجیح می دهند، در حالی که minifiers CSS اغلب حروف کوچک را برای ذخیره بایت ها تولید می کنند - اگرچه در عمل تفاوت ناچیز است.

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

تبدیل یک کد رنگی HEX به معادل RGB آن ساده است. این فرآیند شامل تقسیم رشته شش کاراکتر به سه جفت و تبدیل هر جفت از هگزادسیمال (بنای 16) به اعشاری (بنای 10) است. در اینجا روش گام به گام آورده شده است:

1. نماد هش رو حذف کن.اگر کد HEX با#به عنوان مثال،#1A2B3Cتبدیل می شود1A2B3C.
2. به سه جفت تقسيم بشينرشته ی باقیمانده را به سه گروه از دو کاراکتر تقسیم کنید:1A, 2B, 3C.
3. هر جفت را به اعشاری تبدیل کنید.استفاده از سیستم ارزشهای شش اعشاری که در آن رقم اول با 16 ضرب می شود و رقم دوم اضافه می شود:
   • قرمز:1A-> (1 x 16) + 10 =26
   • سبز:2B-> (2 x 16) + 11 =43
   • آبی:3C-> (3 × 16) + 12 =60
4. مقدار RGB را بنویسید.سه عدد اعشاری رو با هم ترکیب کنید:rgb(26, 43, 60).

ارقام هگزادسیمال و معادلات اعشاری آنها عبارتند از: 0=0، 1=1، 2=2، 3=3، 4=4، 5=5، 6=6، 7=7، 8=8، 9=9، A=10، B=11، C=12، D=13، E=14، F=15. حفظ A تا F تنها بخشی است که از ریاضی اعشاری استاندارد متفاوت است.

برای تبدیل برنامه نویسی، اکثر زبان ها عملکردهای داخلی ارائه می دهند. در جاوا اسکریپت،parseInt("1A", 16)بازده26در پایتون،int("1A", 16)خود CSS هر دو فرمت را به صورت بومی مدیریت می کند، بنابراین تبدیل در درجه اول زمانی مفید است که شما نیاز به دستکاری کانال های رنگ فردی در کد دارید -- برای مثال، تنظیم روشنایی، ایجاد گرادیانت به صورت برنامه ریزی شده، یا مخلوط کردن دو رنگ.

کد های HEX سه رقمی در مقابل شش رقمی

CSS از قالب سه رقمی HEX پشتیبانی می کند (#RGB) به عنوان سهولت زمانی که هر یک از سه جفت از ارقام یکسان تشکیل شده است. در این اختصار، هر یک از ارقام با دو برابر کردن آن گسترش می یابد. به عنوان مثال:

• #F80گسترش می یابد به#FF8800-> rgb ((255, 136, 0)
• #FFFگسترش می یابد به#FFFFFF-> rgb ((255، 255، 255)
• #000گسترش می یابد به#000000-> rgb ((0، 0، 0)
• #09Cگسترش می یابد به#0099CC-> rgb ((0, 153, 204)
• #A3Fگسترش می یابد به#AA33FF-> rgb ((170, 51, 255)

نماد سه رقمی تعداد رنگ های موجود را از 16.7 میلیون به تنها 4096 (16 x 16 x 16) کاهش می دهد ، بنابراین نمی تواند هر رنگی را نشان دهد. این معمولاً برای رنگ های ساده یا شناخته شده در فایل های CSS استفاده می شود که در آن کوتاه بودن ارزشمند است.

CSS همچنین از چهار رقمی پشتیبانی می کند (#RGBA) و 8 رقمی (#RRGGBBAA) کد های HEX که شامل یک کانال آلفا (شفافیت) است. ارزش آلفا از همان منطق هگزادسیمال پیروی می کند:FFکاملاً مبهم است و00کاملاً شفاف است. برای مثال،#FF880080رنگ رو نشون میدهrgb(255, 136, 0)مبدل ما بر روی فرمت های استاندارد 3 و 6 رقمی تمرکز می کند؛ اگر یک کد با یک کانال آلفا وارد کنید، فقط بخش RGB را پردازش می کند.

جدول مرجع HEX به RGB

در زیر یک جدول مرجع از رنگ های رایج HEX و معادل های RGB آنها آورده شده است. این جدول شامل رنگ هایی است که اغلب در طراحی وب استفاده می شود، رنگ های نامگذاری شده CSS و انتخاب های پالت مارک های محبوب.

CSS در مجموع 147 رنگ نامگذاری شده را تعریف می کند که هر کدام دارای یک مقدار HEX مربوطه هستند. در حالی که رنگ های نامگذاری شده برای نمونه سازی مناسب هستند ، پروژه های حرفه ای به طور معمول برای دقت و سازگاری در مرورگرها و ابزارهای طراحی به ارزش های HEX یا RGB متکی هستند.

رنگ های مشهور برند - ارزش های HEX و RGB

توسعه دهندگان و طراحان اغلب به مقادیر دقیق HEX و RGB رنگ های محبوب برند برای مدل ها، ادغام ها و راهنماهای سبک نیاز دارند. در زیر یک مرجع سریع برای برخی از رایج ترین رنگ های برند درخواست شده است:

دستورالعمل های برند اغلب رنگ ها را در فرمت های مختلف (HEX ، RGB ، CMYK ، Pantone) مشخص می کنند. هنگام پیاده سازی رنگ های برند در CSS ، همیشه برای اطمینان از دقت ، ارزش ها را در برابر صفحه منابع رسمی برند تأیید کنید. رنگ ها می توانند کمی بین صفحه ها تغییر کنند ، بنابراین سازگاری در کد ضروری است.

مقایسه مدل های رنگی: HEX، RGB، HSL و CMYK

درک اینکه چه زمانی از هر مدل رنگی استفاده کنید به شما کمک می کند تا در ابزارهای مختلف و رسانه ها کارآمدتر کار کنید:

HEX و RGB از نظر ریاضی یکسان هستند-- آنها همان فضای رنگی را با استفاده از نشانه های مختلف نشان می دهند. تبدیل بین آنها یک ترجمه ساده از پایه 16 به پایه 10 بدون از دست دادن دقت یا تفاوت های طیف است. از سوی دیگر، HSL، تبدیل RGB به یک سیستم مختصات استوانه ای است که استدلال مستقل در مورد رنگ، اشباع و روشنایی را آسان تر می کند. CMYK یک مدل رنگی کسری است که در چاپ استفاده می شود و نمی تواند تمام رنگ های RGB را نشان دهد (و بالعکس) ، بنابراین تبدیل بین RGB و CMYK تقریبی است.

در CSS مدرن (سطح 4) ،color()عملکرد و فضاهای رنگی جدید مانندoklch()وdisplay-p3با این حال ، HEX و RGB همچنان پایه سازگاری وب هستند و توسط هر مرورگر مورد استفاده امروز پشتیبانی می شوند.

استفاده از HEX و RGB در CSS و جاوا اسکریپت

هر دو ارزش HEX و RGB در CSS معتبر هستند و نتایج یکسان تولید می کنند. در اینجا نمونه های عملی از نحوه استفاده از هر فرمت وجود دارد:

اعلامیه های CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

توابع تبدیل جاوا اسکریپت:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

هنگام کار با HTML Canvas API ، رنگ ها اغلب باید به عنوان رشته تنظیم شوند."#FF8000"و"rgb(255, 128, 0)"کار برایfillStyleوstrokeStyleبا این حال،getImageData()این روش داده های پیکسل را به عنوان یک آرایه از 0 تا 255 عدد صحیح (RGBA) باز می گرداند و RGB را به شکل طبیعی برای دستکاری در سطح پیکسل تبدیل می کند.

در ویژگی های سفارشی CSS (متغیرها) ، ارزش های HEX به طور معمول برای سادگی ذخیره می شوند:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

این الگوی ذخیره ارزش های کانال RGB خام به عنوان یک متغیر CSS یک تکنیک محبوب است که به شما اجازه می دهد تا بدون تبدیل بین فرمت ها در زمان اجرا، به طور پویا اپاسیتی را اعمال کنید.

دسترسی و تضاد رنگ

تبدیل HEX به RGB اغلب اولین گام در محاسبه نسبت کنتراست رنگ برای انطباق با دسترسی است. دستورالعمل های دسترسی به محتوای وب (WCAG) حداقل نسبت کنتراست۴٫۵: ۱برای متن معمولی و۳: ۱برای متن بزرگ (18px+ تند یا 24px+ معمولی).

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

1. تبدیل HEX به RGB (0 - 255 در هر کانال).
2. هر کانال را با تقسیم بر 255 به 0-1 نرمال کنید.
3. فرمول خطی سازی sRGB را اعمال کنید: اگر مقدار <= 0.04045 باشد، با 12.92 تقسیم کنید؛ در غیر این صورت ((ارزش + 0.055) / 1.055) ^ 2.4 محاسبه کنید.
4. روشنایی را محاسبه کنید: L = 0.2126 x R + 0.7152 x G + 0.0722 x B.
5. نسبت کنتراست بین دو رنگ را محاسبه کنید: (L1 + 0.05) / (L2 + 0.05) ، جایی که L1 روشن تر است.

همانطور که می بینید، مقادیر RGB ورودی ضروری برای هر محاسبه کنتراست دسترسی هستند. ابزارهایی مانند WebAIM Contrast Checker، Chrome DevTools color picker و اسکنر دسترسی به تبر همه این تبدیل را به صورت داخلی انجام می دهند.

برای طراحان، یک قاعده سریع: متن تیره روی یک پس زمینه روشن (یا برعکس) با تفاوت درخشش حداقل 125 و تفاوت رنگ حداقل 500 (با استفاده از مجموع تفاوت های مطلق در کانال های R، G، B) به طور کلی از استانداردهای WCAG AA عبور می کند.