هگز کد رنگ (Hex Color Code) یکی از رایج‌ترین روش‌ها برای مشخص‌کردن رنگ در طراحی وب، CSS، رابط کاربری و نرم‌افزارهای گرافیکی است. اگر هنگام طراحی سایت با کدهایی مانند #FF0000، #000000 یا #FFFFFF مواجه شده‌اید و نمی‌دانید این اعداد و حروف چه معنایی دارند، در این آموزش با ساختار Hex Color، نحوه خواندن کد رنگ و روش استفاده از آن در HTML و CSS آشنا می‌شوید.

هگز کد رنگ چیست؟

Hex Color Code یا کد رنگ هگزادسیمال روشی برای نمایش رنگ‌ها با استفاده از اعداد و حروف در مبنای ۱۶ است.

یک کد رنگ هگز معمولاً به شکل زیر نوشته می‌شود:

#RRGGBB

در این ساختار:

• RR میزان رنگ قرمز (Red)
• GG میزان رنگ سبز (Green)
• BB میزان رنگ آبی (Blue)

را مشخص می‌کند.

برای مثال:

#FF0000

رنگ قرمز است.

و:

#00FF00

رنگ سبز را نشان می‌دهد.

همچنین:

#0000FF

رنگ آبی است.

چرا به آن Hex می‌گویند؟

کلمه Hex کوتاه‌شده Hexadecimal به معنی «مبنای شانزده» است.

در سیستم عددی معمولی از اعداد زیر استفاده می‌کنیم:

0 1 2 3 4 5 6 7 8 9

اما سیستم هگزادسیمال ۱۶ نماد دارد:

0 1 2 3 4 5 6 7 8 9 A B C D E F

در این سیستم:

A = 10
B = 11
C = 12
D = 13
E = 14
F = 15

بنابراین FF در مبنای شانزده معادل ۲۵۵ در مبنای ده‌دهی است.

ساختار کد رنگ Hex چگونه است؟

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

#RRGGBB

مثلاً:

#3498DB

آن را به سه بخش تقسیم می‌کنیم:

#34 98 DB

یعنی:

RR = 34
GG = 98
BB = DB

هر بخش می‌تواند مقداری بین:

00 تا FF

داشته باشد.

در نتیجه برای هر کانال RGB، ۲۵۶ مقدار مختلف وجود دارد.

RGB در کد رنگ هگز چیست؟

RGB مخفف سه رنگ اصلی است:

R = Red

قرمز

G = Green

سبز

B = Blue

آبی

این سه کانال با شدت‌های مختلف ترکیب می‌شوند و رنگ نهایی را ایجاد می‌کنند.

برای مثال:

#FF0000

یعنی:

Red = FF
Green = 00
Blue = 00

در نتیجه رنگ کاملاً قرمز ایجاد می‌شود.

۰۰ و FF در Hex چه معنایی دارند؟

مقدار:

00

یعنی کمترین شدت آن کانال.

مقدار:

FF

یعنی بیشترین شدت آن کانال.

برای مثال:

#FF0000

یعنی قرمز بیشترین مقدار را دارد و سبز و آبی صفر هستند.

اما:

#000000

یعنی هر سه کانال صفر هستند.

نتیجه:

مشکی

و:

#FFFFFF

یعنی هر سه کانال در بیشترین مقدار هستند.

نتیجه:

سفید

مهم‌ترین کدهای رنگ Hex

در جدول زیر چند رنگ پرکاربرد را مشاهده می‌کنید:

چگونه کد Hex یک رنگ را بخوانیم؟

فرض کنید کد زیر را داریم:

#FF5733

آن را به سه قسمت تقسیم می‌کنیم:

FF | 57 | 33

بنابراین:

R = FF
G = 57
B = 33

یعنی مقدار قرمز زیاد است، مقدار سبز متوسط و مقدار آبی کمتر است.

در نتیجه یک رنگ نارنجی مایل به قرمز ایجاد می‌شود.

کد Hex هشت‌رقمی چیست؟

علاوه بر فرمت شش‌رقمی، در CSS می‌توان از Hex هشت‌رقمی نیز استفاده کرد:

#RRGGBBAA

دو رقم اضافه در انتهای کد مربوط به Alpha یا میزان شفافیت هستند.

مثلاً:

#FF000080

یعنی رنگ قرمز با مقدار مشخصی از شفافیت.

ساختار:

#RR GG BB AA

است.

در اینجا:

• RR = قرمز
• GG = سبز
• BB = آبی
• AA = شفافیت

کد Hex سه‌رقمی چیست؟

در CSS می‌توان بعضی رنگ‌ها را به شکل کوتاه‌تر نیز نوشت:

#RGB

مثلاً:

#FFF

معادل:

#FFFFFF

است.

همچنین:

#000

معادل:

#000000

است.

این قابلیت برای زمانی مناسب است که هر جفت کاراکتر RGB یکسان باشد.

تفاوت Hex و RGB چیست؟

هر دو روش برای مشخص‌کردن رنگ استفاده می‌شوند.

مثلاً رنگ قرمز را می‌توان به شکل زیر نوشت:

color: #FF0000;

یا:

color: rgb(255, 0, 0);

هر دو یک رنگ را مشخص می‌کنند.

تفاوت اصلی در نحوه نمایش مقدار رنگ است.

Hex

#FF0000

RGB

rgb(255, 0, 0)

Hex در طراحی وب بسیار رایج است و RGB نیز زمانی که بخواهید مقادیر عددی کانال‌ها را مستقیماً کنترل کنید، کاربرد زیادی دارد.

استفاده از Hex در CSS

یکی از رایج‌ترین کاربردهای Hex Color، تعیین رنگ متن است.

p {
    color: #333333;
}

در این مثال رنگ متن خاکستری تیره است.

برای تعیین رنگ پس‌زمینه نیز می‌توان نوشت:

body {
    background-color: #F5F5F5;
}

استفاده از Hex برای رنگ دکمه

مثلاً:

button {
    background-color: #007BFF;
    color: #FFFFFF;
}

در این مثال:

• رنگ پس‌زمینه دکمه آبی است.
• رنگ نوشته سفید است.

استفاده از Hex در HTML

امروزه معمولاً رنگ‌ها را با CSS کنترل می‌کنیم، اما می‌توان مقدار رنگ را در CSS داخل HTML نیز استفاده کرد:

<p style="color: #FF0000;">
    متن قرمز
</p>

روش پیشنهادی برای پروژه‌های حرفه‌ای این است که استایل‌ها را در CSS یا فایل‌های Style جداگانه مدیریت کنید.

چگونه کد Hex یک رنگ را پیدا کنیم؟

اگر یک رنگ را در تصویر یا طراحی مشاهده کرده‌اید و می‌خواهید کد Hex آن را پیدا کنید، می‌توانید از ابزارهای Color Picker استفاده کنید.

این ابزارها معمولاً اطلاعاتی مانند:

HEX
RGB
HSL
HSV

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

در نرم‌افزارهایی مانند Photoshop، Figma و بسیاری از ابزارهای طراحی نیز Color Picker وجود دارد.

چگونه یک رنگ را از تصویر استخراج کنیم؟

برای استخراج رنگ از یک تصویر معمولاً از ابزار Eyedropper / Color Picker استفاده می‌شود.

فرآیند کلی:

انتخاب تصویر
      ↓
انتخاب Color Picker
      ↓
انتخاب نقطه موردنظر
      ↓
دریافت مقدار رنگ
      ↓
کپی Hex Code

برای مثال ممکن است ابزار رنگ مقدار زیر را نمایش دهد:

#1E88E5

و بتوانید همان رنگ را در CSS استفاده کنید.

تفاوت Hex، RGB و HSL چیست؟

سه روش رایج برای نمایش رنگ در وب عبارت‌اند از:

Hex

برای تعریف سریع و مستقیم رنگ بسیار رایج است.

RGB

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

HSL

برای کارهایی مانند تغییر Hue، Saturation و Lightness می‌تواند خواناتر باشد.

آیا Hex فقط برای طراحی سایت استفاده می‌شود؟

خیر.

کدهای Hex در حوزه‌های مختلف استفاده می‌شوند:

• طراحی سایت
• CSS
• UI/UX
• طراحی اپلیکیشن
• طراحی گرافیکی
• نرم‌افزارهای طراحی
• طراحی برند
• طراحی رابط کاربری
• بعضی زبان‌ها و کتابخانه‌های برنامه‌نویسی

بهترین ابزارها برای پیدا کردن کد رنگ Hex

برای پیدا کردن و انتخاب رنگ می‌توانید از ابزارهایی مانند:

• Color Picker
• Adobe Color
• Figma
• Photoshop
• Chrome DevTools
• ابزارهای آنلاین انتخاب رنگ

استفاده کنید.

در مرورگر نیز با Developer Tools می‌توانید رنگ‌های استفاده‌شده در یک سایت را بررسی کنید.

چگونه Hex Color را در مرورگر پیدا کنیم؟

اگر می‌خواهید رنگ یک عنصر در یک سایت را بررسی کنید:

1. روی صفحه راست‌کلیک کنید.
2. گزینه Inspect را انتخاب کنید.
3. عنصر موردنظر را انتخاب کنید.
4. بخش CSS را بررسی کنید.
5. مقدار color یا background-color را پیدا کنید.

مثلاً:

color: #212121;

این مقدار کد Hex رنگ عنصر است.

تفاوت حروف بزرگ و کوچک در Hex چیست؟

در کدهای Hex معمولاً حروف بزرگ و کوچک تفاوتی در مقدار رنگ ایجاد نمی‌کنند.

برای مثال:

#FF0000

و:

#ff0000

یک رنگ هستند.

همچنین:

#3498DB

و:

#3498db

از نظر مقدار رنگ یکسان هستند.

چرا برخی کدهای Hex عدد و برخی حروف دارند؟

به دلیل استفاده از سیستم مبنای ۱۶.

سیستم Hexadecimal از این کاراکترها استفاده می‌کند:

0 1 2 3 4 5 6 7 8 9 A B C D E F

بنابراین ممکن است یک کد رنگ فقط عدد داشته باشد:

#123456

یا ترکیبی از عدد و حرف:

#12ABEF

یا حتی:

#FFFFFF

آیا هر کد شش‌رقمی یک رنگ معتبر است؟

اگر با ساختار صحیح Hex نوشته شده باشد، هر ترکیب شش‌رقمی از 0-9 و A-F یک مقدار RGB معتبر را نمایش می‌دهد.

مثلاً:

#123456
#ABCDEF
#FFAA00

مقادیر معتبر هستند.

اما:

#GGHHII

معتبر نیست؛ زیرا حروف G تا I در سیستم Hex وجود ندارند.

چگونه رنگ مشکی و سفید را با Hex بسازیم؟

مشکی

#000000

زیرا هر سه کانال RGB مقدار صفر دارند.

سفید

#FFFFFF

زیرا هر سه کانال بیشترین مقدار را دارند.

چگونه خاکستری با Hex بسازیم؟

برای ساخت خاکستری خالص، مقدار RGB باید برابر باشد.

مثلاً:

#333333

یا:

#777777

یا:

#AAAAAA

یا:

#CCCCCC

هرچه مقدار RGB بیشتر شود، رنگ به سفید نزدیک‌تر می‌شود.

چگونه رنگ‌های تیره‌تر و روشن‌تر بسازیم؟

برای یک رنگ مشخص می‌توان مقدار کانال‌ها را تغییر داد.

مثلاً آبی:

#0000FF

آبی تیره‌تر:

#000080

و آبی روشن‌تر می‌تواند مثلاً:

#ADD8E6

باشد.

البته برای ایجاد نسخه دقیقاً روشن‌تر یا تیره‌تر از یک رنگ، بهتر است از مدل‌های رنگی مانند HSL یا ابزارهای Color Manipulation استفاده شود.

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

در طراحی برند، معمولاً مجموعه‌ای از رنگ‌های ثابت تعریف می‌شود که به آن Brand Colors گفته می‌شود.

مثلاً یک Brand Color می‌تواند:

Primary: #2563EB
Secondary: #0F172A
Background: #F8FAFC
Text: #111827

باشد.

استفاده ثابت از این رنگ‌ها باعث ایجاد هماهنگی بصری در:

• وب‌سایت
• اپلیکیشن
• شبکه‌های اجتماعی
• تبلیغات
• لوگو
• رابط کاربری

می‌شود.

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

رنگ فقط یک عنصر زیبایی‌شناختی نیست.

انتخاب رنگ مناسب روی مواردی مانند:

• خوانایی متن
• تجربه کاربری
• هویت برند
• دسترسی‌پذیری
• نرخ تعامل
• سلسله‌مراتب بصری

تأثیر دارد.

برای مثال استفاده از متن خاکستری بسیار روشن روی پس‌زمینه سفید می‌تواند خوانایی را کاهش دهد.

به همین دلیل هنگام انتخاب رنگ، Contrast نیز باید بررسی شود.

نسبت کنتراست رنگ چیست؟

Contrast Ratio میزان تفاوت روشنایی دو رنگ را نشان می‌دهد.

برای طراحی وب، رعایت کنتراست مناسب به‌خصوص برای متن و پس‌زمینه اهمیت دارد.

مثلاً ترکیب:

Text: #FFFFFF
Background: #000000

کنتراست بسیار بالایی ایجاد می‌کند.

اما ترکیب:

Text: #CCCCCC
Background: #FFFFFF

کنتراست بسیار کمتری دارد.

برای بررسی دقیق می‌توانید از ابزارهای Contrast Checker استفاده کنید.

جمع‌بندی

هگز کد رنگ روشی برای نمایش رنگ با استفاده از سیستم عددی مبنای ۱۶ است.

فرمت استاندارد آن:

#RRGGBB

است.

سه بخش آن به ترتیب مربوط به:

RR = Red
GG = Green
BB = Blue

هستند و هر بخش مقداری بین 00 تا FF دارد.

برای مثال:

#FF0000 → قرمز
#00FF00 → سبز
#0000FF → آبی
#000000 → مشکی
#FFFFFF → سفید

اگر در طراحی سایت یا CSS کار می‌کنید، شناخت Hex Color یکی از مفاهیم پایه و کاربردی است و به شما کمک می‌کند رنگ‌های رابط کاربری را دقیق‌تر انتخاب و پیاده‌سازی کنید.

FAQ؛ سوالات متداول درباره هگز کد رنگ

هگز کد رنگ چیست؟

Hex Color Code روشی برای نمایش رنگ با استفاده از اعداد و حروف سیستم هگزادسیمال است و معمولاً به شکل #RRGGBB نوشته می‌شود.

کد Hex چند رقم است؟

فرمت رایج Hex شش کاراکتر دارد؛ مانند:

#FF5733

البته فرمت‌های سه‌رقمی و هشت‌رقمی نیز در CSS وجود دارند.

#FFFFFF چه رنگی است؟

#FFFFFF رنگ سفید است.

#۰۰۰۰۰۰ چه رنگی است؟

#000000 رنگ مشکی است.

کد رنگ قرمز در Hex چیست؟

کد قرمز خالص:

#FF0000

است.

کد رنگ آبی در Hex چیست؟

کد آبی خالص:

#0000FF

است.

کد رنگ سبز در Hex چیست؟

کد سبز خالص:

#00FF00

است.

تفاوت Hex و RGB چیست؟

هر دو می‌توانند یک رنگ RGB را نمایش دهند؛ تفاوت اصلی در نحوه نمایش مقادیر است. مثلاً #FF0000 معادل rgb(255, 0, 0) است.

آیا Hex و HTML Color Code یکی هستند؟

در زمینه طراحی وب، معمولاً عبارت HTML Color Code برای اشاره به کدهای رنگی مانند Hex استفاده می‌شود؛ با این حال، Hex در عمل بیشتر در CSS برای تعیین رنگ به کار می‌رود.

چگونه Hex یک رنگ را پیدا کنیم؟

می‌توانید از Color Picker در ابزارهایی مانند Figma، Photoshop، مرورگر یا ابزارهای آنلاین انتخاب رنگ استفاده کنید.

آیا حروف بزرگ و کوچک در Hex تفاوت دارند؟

خیر. برای مثال #FFFFFF و #ffffff از نظر مقدار رنگ یکسان هستند.

Hex هشت‌رقمی چیست؟

فرمت هشت‌رقمی به شکل #RRGGBBAA است و علاوه بر RGB، مقدار Alpha یا شفافیت را نیز مشخص می‌کند.