مقدمه

در CSS فرمت‌های مختلفی برای تعریف رنگ‌ها وجود دارد. رایج‌ترین آن‌ها عبارت‌اند از:

• Hex (هگزادسیمال)
• RGB
• RGBA
• HSL

در این مقاله با کدهای رنگ Hex آشنا می‌شوید و یاد می‌گیرید چگونه با استفاده از مقدار Alpha میزان شفافیت رنگ‌ها را کنترل کنید.

پیش‌نیازها

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

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

استفاده از نام رنگ‌ها در CSS

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

برای مثال:

div {
  color: red;
}

در این مثال رنگ متن قرمز می‌شود.

حدود ۱۴۰ رنگ نام‌دار در CSS وجود دارد؛ مثل:

• red
• blue
• lavender
• green

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

آشنایی با سیستم Hexadecimal

سیستم عددی معمولی ما ده‌دهی (Base 10) است:

0 1 2 3 4 5 6 7 8 9

اما سیستم هگزادسیمال بر پایه 16 است:

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

در این سیستم:

• A معادل 10
• B معادل 11
• …
• F معادل 15

نمونه مقادیر معتبر:

00
1D
9F
CC
E4
FF

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

فرمت رنگ‌های Hex در CSS به شکل زیر است:

#RRGGBB

که در آن:

• RR = مقدار قرمز
• GG = مقدار سبز
• BB = مقدار آبی

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

رنگ مشکی

div {
  color: #000000;
}

تمام مقادیر روی 00 قرار دارند؛ بنابراین خروجی مشکی می‌شود.

رنگ سفید

div {
  color: #FFFFFF;
}

تمام مقادیر روی FF هستند؛ بنابراین خروجی سفید می‌شود.

رنگ قرمز

div {
  color: #FF0000;
}

در اینجا:

• قرمز = FF
• سبز = 00
• آبی = 00

مثال رنگ‌های مختلف

Crimson

color: #DC143C;

Violet

color: #EE82EE;

Turquoise

color: #40E0D0;

نکات مهم

Hex Codeها به حروف کوچک و بزرگ حساس نیستند:

#ff0000 = #FF0000

همچنین CSS از حالت کوتاه‌شده هم پشتیبانی می‌کند:

#F00 = #FF0000

اضافه کردن Alpha برای شفافیت

برای استفاده از شفافیت، فرمت رنگ به این شکل تغییر می‌کند:

#RRGGBBAA

بخش آخر یعنی AA میزان شفافیت را مشخص می‌کند.

محدوده Alpha

• 00 = کاملاً شفاف
• FF = کاملاً مات

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

مثال استفاده از Alpha

رنگ آبی معمولی

div {
  background-color: #0080FF;
}

رنگ آبی با شفافیت

div {
  background-color: #0080FF80;
}

در این مثال:

• 80 میزان شفافیت را تعیین می‌کند.

مزیت استفاده از Alpha در Hex

اگر پروژه شما از قبل با Hex Color نوشته شده باشد، می‌توانید بدون تغییر فرمت رنگ‌ها، فقط با اضافه کردن Alpha شفافیت ایجاد کنید.

استفاده از Chrome DevTools برای انتخاب رنگ

در Chrome DevTools می‌توانید:

• رنگ‌ها را ویرایش کنید
• بین فرمت‌های مختلف جابه‌جا شوید:
  • Hex
  • RGB
  • RGBA
  • HSL
  • HSLA

برای این کار:

1. DevTools را باز کنید.
2. روی مربع رنگ کلیک کنید.
3. با نگه داشتن SHIFT روی رنگ کلیک کنید تا فرمت‌ها تغییر کنند.

نتیجه‌گیری

در این آموزش با موارد زیر آشنا شدید:

• ساختار رنگ‌های Hex در CSS
• سیستم هگزادسیمال
• استفاده از رنگ‌های سفارشی
• افزودن Alpha برای شفافیت
• استفاده از فرمت #RRGGBBAA

این فرمت در مرورگرهای مدرن پشتیبانی می‌شود، اما در نسخه‌های قدیمی Internet Explorer قابل استفاده نیست.

از همراهی شما با پارمین کلود سپاسگزاریم.