Named Colors و Hexadecimal

اولین قدم در دنیای رنگ: Named Colors و Hexadecimal

وارد فصل هفتم شدیم؛ فصلی که به یکی از پرکاربردترین و در عین حال بصری‌ترین جنبه‌های CSS اختصاص داره: رنگ‌ها. تو این درس، با دو تا از قدیمی‌ترین و ساده‌ترین روش‌های تعریف رنگ در CSS آشنا می‌شیم: نام‌های از پیش تعریف‌شده و کدهای Hexadecimal.

Named Colors: رنگ‌ها با نام

ساده‌ترین روش تعریف رنگ در CSS، استفاده از یک نام از پیش تعریف‌شده‌ست. استاندارد CSS، ۱۴۰ نام رنگ رو به‌طور رسمی تعریف کرده که مستقیماً قابل استفاده هستن.

.box {
  color: red;
  background-color: lightblue;
  border-color: darkgreen;
}

در این مثال، سه نام رنگ مختلف مستقیماً استفاده شدن: red (قرمز)، lightblue (آبی روشن) و darkgreen (سبز تیره). این روش، خوانا و ساده‌ست، مخصوصاً برای رنگ‌های پایه و رایج.

چند نمونه از نام‌های رایج

.examples {
  color: black;
  color: white;
  color: gray;
  color: crimson;
  color: navy;
  color: gold;
  color: coral;
  color: teal;
}

محدودیت اصلی Named Colors

هرچند این روش ساده و خواناست، ولی محدودیت بزرگی داره: فقط همون ۱۴۰ نام از پیش تعریف‌شده در دسترسن. اگه بخوای یه رنگ دقیق و سفارشی (مثلاً یه سایه خاص از آبی که دقیقاً با برند شرکتت هماهنگه) تعریف کنی، نام‌های آماده جوابگو نیستن. برای همچین دقتی، به روش‌های دیگه‌ای مثل Hexadecimal نیاز داریم.

Hexadecimal: دقت کامل با کد رنگ

Hexadecimal (که معمولاً بهش Hex هم گفته می‌شه) روشیه که رنگ رو با یک کد شش‌رقمی، بر پایه سیستم عددی مبنای ۱۶، تعریف می‌کنه. این کد با یک علامت هشتگ (#) شروع می‌شه.

.box {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

در این مثال، #ff0000 قرمز خالص، #00ff00 سبز خالص، و #0000ff آبی خالصه.

ساختار داخلی یک کد Hex

کد Hex شش‌رقمی، در واقع از سه جفت دو‌رقمی تشکیل شده که هرکدوم یکی از سه رنگ پایه نوری (قرمز، سبز، آبی) رو نشون می‌ده:

#RRGGBB

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

هر جفت رقم، عددی بین 00 (کمترین مقدار، یعنی صفر) تا ff (بیشترین مقدار، یعنی ۲۵۵ در سیستم مبنای ۱۰) رو در مبنای ۱۶ نشون می‌ده.

چند مثال برای درک بهتر

.pure-red {
  background-color: #ff0000; /* حداکثر قرمز، بدون سبز و آبی */
}

.pure-white {
  background-color: #ffffff; /* حداکثر هر سه رنگ = سفید */
}

.pure-black {
  background-color: #000000; /* حداقل هر سه رنگ = مشکی */
}

.custom-purple {
  background-color: #8e44ad; /* ترکیبی از قرمز، کمی سبز و آبی زیاد */
}

وقتی هر سه جفت رقم برابر ff باشن، نتیجه سفید خالصه؛ چون هر سه رنگ نوری با حداکثر شدت با هم ترکیب می‌شن. برعکسش، وقتی هر سه جفت برابر 00 باشن، نتیجه مشکی خالصه؛ چون هیچ نوری وجود نداره.

حالت کوتاه‌شده Hex (Shorthand)

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

.box-a {
  color: #ff0000;
}

.box-b {
  color: #f00; /* معادل دقیق #ff0000 */
}

.box-c {
  color: #336699;
}

.box-d {
  color: #369; /* معادل دقیق #336699 */
}

در حالت کوتاه‌شده، هر رقم به‌طور خودکار دو بار تکرار می‌شه؛ یعنی #369 دقیقاً معادل #336699 است. این حالت کوتاه، فقط زمانی قابل استفاده‌ست که هر دو رقم داخل هر جفت، دقیقاً یکسان باشن؛ برای رنگ‌های دلخواه دیگه (مثل #8e44ad)، باید از فرم کامل شش‌رقمی استفاده کرد.

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

.box-a {
  color: #FF5733;
}

.box-b {
  color: #ff5733; /* دقیقاً همان رنگ */
}

کد Hex نسبت به بزرگی و کوچکی حروف (Case) حساس نیست؛ یعنی #FF5733 و #ff5733 دقیقاً یک رنگ یکسان رو نمایش می‌دن. با این حال، در اکثر پروژه‌های واقعی، استفاده از حروف کوچک به‌عنوان یک قرارداد سبکی رایج‌تره.

Hex با کانال شفافیت (Alpha)

.box {
  background-color: #ff000080;
}

نسخه گسترش‌یافته‌ای از Hex هم وجود داره که هشت رقم داره (یا حالت کوتاه‌شده چهاررقمی)؛ دو رقم آخر، میزان شفافیت (Alpha) رو مشخص می‌کنن. در این مثال، 80 در مبنای ۱۶ تقریباً معادل ۵۰٪ شفافیته. این موضوع رو با جزئیات بیشتر، در کنار مفهوم کلی Alpha و Transparency، در درس‌های بعدی همین فصل کامل بررسی می‌کنیم.

مقایسه Named Colors و Hexadecimal

ویژگی	Named Colors	Hexadecimal
خوانایی	بسیار بالا (نام واضح)	متوسط (نیاز به دانستن کد)
دقت رنگ	محدود به ۱۴۰ نام	دقت کامل (بیش از ۱۶ میلیون ترکیب ممکن)
کاربرد رایج	پروتوتایپ سریع، رنگ‌های پایه	طراحی دقیق، هماهنگی با برند

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

• Named Colors: مناسب برای پروتوتایپ‌سازی سریع، تست‌های اولیه، یا جاهایی که رنگ دقیق اهمیت چندانی نداره.
• Hexadecimal: مناسب برای پروژه‌های واقعی که نیاز به رنگ‌های دقیق و هماهنگ با هویت بصری (Brand Identity) دارن؛ این روش هنوز هم یکی از رایج‌ترین شیوه‌های تعریف رنگ در CSS، حتی در کنار روش‌های مدرن‌تری که در درس‌های بعدی می‌بینیم.

نکات مهم

• CSS دقیقاً ۱۴۰ نام رنگ استاندارد تعریف کرده که مستقیماً قابل استفاده‌اند.
• کد Hex از سه جفت دو‌رقمی (قرمز، سبز، آبی) در مبنای ۱۶ تشکیل شده و به بزرگی و کوچکی حروف حساس نیست.
• حالت کوتاه‌شده سه‌رقمی Hex، فقط زمانی قابل استفاده است که هر دو رقم داخل هر جفت یکسان باشند.

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

• تلاش برای استفاده از حالت کوتاه‌شده سه‌رقمی برای رنگ‌هایی که ارقام داخل هر جفت‌شان یکسان نیستند.
• فراموش کردن علامت هشتگ (#) قبل از کد Hex.
• محدود ماندن به Named Colors در پروژه‌های واقعی که نیاز به دقت رنگی بالاتری دارند.

جمع‌بندی

Named Colors با استفاده از نام‌های از پیش تعریف‌شده، ساده‌ترین و خواناترین روش تعریف رنگ در CSS است، ولی به ۱۴۰ گزینه محدود می‌شود. Hexadecimal با یک کد شش‌رقمی بر پایه مبنای ۱۶، دقت کامل و بیش از ۱۶ میلیون ترکیب رنگی ممکن را فراهم می‌کند و به همین دلیل در پروژه‌های واقعی که به دقت رنگی نیاز دارند، انتخاب رایج‌تری محسوب می‌شود.