انواع روش‌های مقداردهی رنگ در CSS؛ آموزش HEX، RGB، HSL، HWB و فضاهای رنگ مدرن

رنگ در CSS فقط یک مقدار تزئینی نیست؛ رنگ روی خوانایی، سلسله‌مراتب بصری، وضعیت تعاملی دکمه‌ها و حتی دسترس‌پذیری اثر می‌گذارد. برای یک رنگ مشخص می‌توان از نامی مثل red، کد HEX، تابع RGB، مدل HSL یا فضاهای رنگ جدیدتری مانند OKLCH استفاده کرد. انتخاب درست فرمت باعث می‌شود کد قابل فهم‌تر، تغییر Theme ساده‌تر و کنترل شفافیت دقیق‌تر باشد.

در این مقاله همه روش‌های اصلی مقداردهی رنگ را از پایه تا پیشرفته بررسی می‌کنیم. ابتدا ساختار رنگ و کانال آلفا را می‌شناسیم، سپس سراغ HEX، RGB، HSL، HWB، Lab، LCH و color() می‌رویم. در پایان هم جدول تصمیم‌گیری و چند الگوی آماده برای پروژه واقعی خواهید داشت.

رنگ در CSS چگونه نوشته می‌شود؟

هر جا یک ویژگی CSS به نوع داده <color> نیاز داشته باشد، می‌توانید یکی از نمایش‌های معتبر رنگ را قرار دهید. ویژگی‌هایی مانند color، background-color، border-color، box-shadow و text-shadow از این نوع داده استفاده می‌کنند. مرورگر مقدار را می‌خواند، آن را به فضای رنگ داخلی تبدیل می‌کند و سپس با توجه به پس‌زمینه و شفافیت رندر می‌گیرد.

.card {  color: #172033;  background-color: rgb(248 250 252 / .96);}

در نحو جدید RGB، جداکردن کانال‌ها با فاصله و قراردادن آلفا بعد از علامت / خوانایی بیشتری دارد. نحو قدیمی با ویرگول هنوز در بسیاری از پروژه‌ها دیده می‌شود، اما بهتر است در کد تازه یک سبک ثابت انتخاب کنید.

نام‌های آماده و کلیدواژه‌های ویژه

CSS بیش از صد نام رنگ استاندارد مانند red، tomato، rebeccapurple و transparent دارد. این روش برای نمونه‌های آموزشی، وضعیت‌های ساده یا زمانی که نام رنگ برای خواننده مهم‌تر از مقدار دقیق است، مناسب است. با این حال نام‌ها کنترل دقیقی روی شدت کانال‌ها و تغییرات Theme نمی‌دهند.

دو کلیدواژه ویژه نیز بسیار کاربردی‌اند. currentColor رنگ فعلی ویژگی color را به ویژگی دیگری منتقل می‌کند و برای Border یا Iconهایی که باید با متن هماهنگ باشند عالی است. transparent رنگی با آلفای صفر است و برای حذف پس‌زمینه یا ساخت Gradientهای محو استفاده می‌شود.

.link { color: rebeccapurple; }.link::after { border-color: currentColor; }.overlay { background: transparent; }

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

در فرمت HEX هر کانال قرمز، سبز و آبی با دو رقم هگزادسیمال از 00 تا FF نوشته می‌شود. بنابراین #RRGGBB شش رقم دارد؛ دو رقم اول قرمز، دو رقم بعدی سبز و دو رقم پایانی آبی هستند. #000000 سیاه و #FFFFFF سفید است. حروف بزرگ و کوچک تفاوتی ندارند.

فرم کوتاه سه‌رقمی

اگر هر جفت رقم کانال از دو رقم یکسان تشکیل شده باشد، می‌توانید آن را کوتاه کنید. برای مثال #FF8800 به #F80 تبدیل می‌شود. مرورگر هر رقم را دو بار تکرار می‌کند؛ پس #ABC همان #AABBCC است. این کوتاه‌نویسی برای رنگ‌هایی که عمداً کانال‌های ساده دارند مناسب است، اما برای طراحی دقیق معمولاً فرم شش‌رقمی خواناتر است.

HEX با آلفا

در فرم هشت‌رقمی، دو رقم آخر آلفا را مشخص می‌کنند: #RRGGBBAA. مقدار 00 کاملاً شفاف و FF کاملاً مات است. فرم چهاررقمی #RGBA نیز نسخه کوتاه آن است. به‌خاطر احتمال اشتباه در تبدیل درصد شفافیت به هگز، برای کدهایی که خوانایی اولویت دارد استفاده از rgb() یا hsl() با آلفا معمولاً روشن‌تر است.

.brand { color: #F59E0B; }.brand-soft { background-color: #F59E0B33; }.brand-short { color: #F80; }

RGB و RGBA؛ کنترل مستقیم کانال‌ها

RGB رنگ را با سه کانال قرمز، سبز و آبی می‌سازد. در نحو کلاسیک، هر کانال عددی بین صفر تا ۲۵۵ است؛ در نحو مدرن می‌توانید درصد هم بنویسید. این مدل وقتی مناسب است که مقدار رنگ از داده برنامه، تصویر یا یک ابزار طراحی می‌آید.

برای شفافیت، به‌جای تابع جداگانه RGBA می‌توان آلفا را در همان rgb() نوشت. آلفا بین 0 و 1 یا بین صفر و صد درصد است. مقدار آلفا فقط خود عنصر را شفاف نمی‌کند؛ رنگ نهایی پس از ترکیب با پس‌زمینه محاسبه می‌شود.

.rgb-old { color: rgb(34, 197, 94); }.rgb-modern { color: rgb(13% 77% 36% / 80%); }.rgba { background: rgb(34 197 94 / .35); }

HSL و HSLA؛ مناسب ساخت Theme و تغییر روشنایی

HSL رنگ را با Hue، Saturation و Lightness بیان می‌کند. Hue زاویه‌ای از چرخه رنگ بین صفر تا ۳۶۰ درجه است؛ صفر قرمز، ۱۲۰ سبز و ۲۴۰ آبی است. Saturation شدت رنگ از خاکستری تا رنگ خالص و Lightness میزان روشنایی از سیاه تا سفید را مشخص می‌کند. این مدل برای ساخت نسخه روشن‌تر یا تیره‌تر یک رنگ بسیار قابل فهم است.

در نحو جدید، آلفا بعد از / قرار می‌گیرد. نام HSLA هنوز در کدهای قدیمی وجود دارد و در مرورگرهای مدرن معمولاً با hsl() جایگزین می‌شود.

:root {  --brand: hsl(142 71% 45%);  --brand-hover: hsl(142 71% 35%);}.notice { background: hsl(142 71% 45% / .18); }

HWB؛ ترکیب رنگ با سفیدی و سیاهی

مدل HWB از همان Hue استفاده می‌کند، اما به‌جای Saturation و Lightness مقدار سفیدی White و سیاهی Black را می‌گیرد. هر دو مقدار درصد هستند و برای ساخت Tint و Shade از یک رنگ پایه مفیدند. اگر جمع سفیدی و سیاهی بیشتر از صد درصد شود، مرورگر هر دو را متناسب کاهش می‌دهد.

.sky { color: hwb(200deg 10% 8%); }.sky-soft { background: hwb(200deg 70% 5%); }

فضاهای رنگ Lab، LCH و OKLab

RGB و HSL بیشتر برای نمایش و کنترل ساده مناسب‌اند، اما فاصله عددی آن‌ها همیشه با تفاوتی که چشم انسان می‌بیند هماهنگ نیست. Lab و LCH برای کارهای ادراکی طراحی شده‌اند. در Lab، مؤلفه L روشنایی و a و b محورهای رنگ هستند. LCH همان اطلاعات را به روشنایی، کروما و Hue تبدیل می‌کند.

OKLab و OKLCH نسخه‌هایی هستند که برای یکنواختی ادراکی و پردازش روی صفحه نمایش مدرن محبوب شده‌اند. وقتی می‌خواهید دو رنگ را با مقدار روشنایی مشابه بسازید، Gradient نرم‌تری طراحی کنید یا رنگ را با color-mix() ترکیب کنید، این فضاها انتخاب دقیق‌تری هستند. برای پروژه‌ای که مرورگرهای قدیمی هدف آن هستند، یک Fallback با HEX یا RGB قرار دهید.

.accent {  color: #0F766E;  color: oklch(55% .12 175);}.mix { color: color-mix(in oklch, red 40%, blue); }

تابع color() و فضاهای رنگ دستگاه

تابع color() اجازه می‌دهد فضای رنگ را صریح مشخص کنید؛ مثلاً display-p3 برای نمایشگرهای Wide Gamut یا rec2020 برای فضای گسترده‌تر. این قابلیت برای رابط‌های طراحی و محتوای تصویری حرفه‌ای ارزشمند است، اما باید Fallback و تست واقعی نمایشگر را جدی بگیرید.

.hero {  background: #064E3B;  background: color(display-p3 0.02 0.42 0.26);}

مقایسه فرمت‌های مقداردهی رنگ

انتخاب فرمت درست در پروژه واقعی

اگر تیم شما یک Design system دارد، مقدار اصلی را به‌صورت Custom Property ذخیره کنید و فرمت را با هدف آن مقدار انتخاب کنید. HEX برای Tokenهای ثابت کوتاه است؛ HSL یا OKLCH برای ساخت سلسله‌مراتب روشنایی خواناترند؛ RGB برای داده‌ای که از API یا ابزار محاسبه می‌آید مناسب است.

Fallback برای مرورگرهای قدیمی

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

:root {  --surface: #FFFFFF;  --surface: oklch(100% 0 0);}

شفافیت، کنتراست و دسترس‌پذیری

شفافیت نباید برای حل مشکل کنتراست به‌کار رود. متن نیمه‌شفاف روی تصویر یا Gradient ممکن است در یک بخش خوانا و در بخش دیگر ناخوانا شود. نسبت کنتراست متن و پس‌زمینه را با ابزار دسترس‌پذیری بررسی کنید و برای Focus، خطا و موفقیت فقط به تفاوت رنگ تکیه نکنید؛ آیکون یا متن کمکی نیز اضافه کنید.

هنگام ساخت Overlay، آلفای رنگ را با پس‌زمینه واقعی تست کنید. دو رنگ با مقدار RGB یکسان اما آلفای متفاوت در زمینه سفید و تیره خروجی یکسانی ندارند. برای Theme تاریک، Token جدا یا تابع ترکیب رنگ را به‌صورت آگاهانه تعریف کنید.

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

چک‌لیست سریع

• برای رنگ ثابت و Token ساده، HEX شش‌رقمی یا Custom Property انتخاب شده است.
• برای داده کانالی یا شفافیت پویا، RGB با نحو مدرن استفاده شده است.
• برای تغییر Hue و روشنایی، HSL یا OKLCH مقایسه شده است.
• فرمت هشت‌رقمی HEX با درصد آلفا اشتباه نشده است.
• برای فضای رنگ مدرن، Fallback و Browser support مشخص است.
• کنتراست، Focus و حالت‌های Hover و Disabled تست شده‌اند.
• نام‌گذاری Tokenها از مقدار واقعی جدا شده است.

جمع‌بندی

CSS از یک مدل واحد برای رنگ استفاده نمی‌کند؛ هر نمایش برای مسئله‌ای مناسب است. نام رنگ خوانا اما محدود است، HEX کوتاه و رایج است، RGB کنترل مستقیم کانال‌ها و آلفا را می‌دهد، HSL برای تغییر روشنایی و ساخت Theme قابل فهم است، HWB برای Tint و Shade سریع است و Lab، LCH و OKLCH در پالت‌های ادراکی دقیق‌تر عمل می‌کنند. تابع color() نیز برای نمایشگرهای Wide Gamut کاربرد تخصصی دارد.

در پروژه‌های جدید، فرمت را بر اساس هدف، پشتیبانی مرورگر و قرارداد تیم انتخاب کنید. مقدارهای رنگ را در Custom Property نگه دارید، برای رنگ‌های مدرن Fallback بنویسید و نتیجه را با کنتراست واقعی بسنجید. این ترکیب، هم خوانایی کد و هم کیفیت رابط کاربری را بهتر می‌کند.

اکنون یک پالت کوچک پروژه‌تان را به Custom Property تبدیل کنید، برای هر Token یک فرمت مناسب انتخاب کنید و حالت روشن، تاریک و Focus را با تست کنتراست بازبینی کنید.

منابع رسمی

• MDN؛ Color values در CSS
• MDN؛ نوع داده color
• W3C؛ CSS Color Module Level 4
• web.dev؛ Color در CSS