مقادیر رنگ در CSS
رنگ نام‌دار برای شروع خوب است. برند و طراحی دقیق به مقدار دقیق نیاز دارند — یک فیروزهٔ مشخص، یک لایهٔ نرم، فامی که بشود کمی جابه‌جایش کرد. این‌ها از فرمت‌های مقدار رنگ می‌آیند: hex، rgb() / rgba() و hsl() / hsla().
مقدار رنگ چیست؟
مقدار رنگ همان چیزی است که بعد از ویژگی رنگ‌پذیر می‌نویسید — مثلاً بعد از color: یا بعداً background-color:. همان ویژگی قبلی؛ راه‌های غنی‌تر برای گفتن رنگ. کلیدواژه‌های نام‌دار هم مقدارند. امروز فرمت‌های عددی را اضافه می‌کنیم که هفته‌به‌هفته به کارتان می‌آید.
فرمت‌ها در یک نگاه
برای هر کار فرمت مناسب را بگیرید. لازم نیست روز اول همهٔ نحوها را بلد باشید — نقشه را بشناسید، بعد سه تای روزمره را تمرین کنید.
📊 فرمت‌های مقدار رنگ CSS
| فرمت | مثال | بهترین برای |
|---|---|---|
| نام‌دار | teal |
دموی سریع، آموزش، پیش‌نویس خام |
| Hex | #0f766e |
ابزار طراحی، توکن برند، کپی از Figma |
rgb() / rgba() |
rgb(15 118 110) / rgba(15, 118, 110, 0.85) |
فکر کردن با کانال، شفافیت با آلفا |
hsl() / hsla() |
hsl(174 77% 25%) |
تنظیم فام/روشنایی بدون ترک خانوادهٔ رنگ |
رنگ‌های hex
مقدار hex با # شروع می‌شود و رقم‌های هگز (0–9، a–f) دارد. شکل رایج: شش رقمی #rrggbb (کامل) و سه رقمی #rgb (کوتاه — هر رقم دوبل می‌شود). بزرگ/کوچک بودن حروف مهم نیست.
Hex روی متن و یادداشت نرم
cssh1 {
color: #0f172a;
}
.note {
color: #0f766e;
}#0f766e را چطور بخوانیم؟
جفت‌ها قرمز، سبز، آبی‌اند: 0f / 76 / 6e. اپ‌های طراحی معمولاً همین رشته را می‌دهند — همان را در CSS بچسبانید و # را نگه دارید.
rgb() و rgba()
rgb() کانال‌های قرمز، سبز و آبی را از 0 تا 255 قاطی می‌کند (در نحو مدرن درصد هم مجاز است). با rgba() یا مقدار چهارم، آلفا می‌آید تا رنگ نیمه‌شفاف شود.
کانال RGB و محو RGBA
css.lead {
color: rgb(51, 65, 85);
}
.overlay-label {
color: rgba(15, 118, 110, 0.9);
}آلفا در یک جمله
آلفا شفافیت همان رنگ است — 1 (یا 100%) توپر است؛ مقدار کمتر اجازه می‌دهد پشتش دیده شود. با حذف عنصر از چیدمان یکی نیست.
hsl() برای فکر کردن با فام
hsl() از فام (زاویه روی چرخهٔ رنگ)، اشباع (%) و روشنایی (%) استفاده می‌کند. وقتی می‌خواهید «همان خانواده، کمی روشن‌تر» بدون حساب دستی hex، به‌درد می‌خورد.
تأکید HSL که بشود جابه‌جایش کرد
css.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}عادت جابه‌جایی
فام را نگه دارید، روشنایی را بالا ببرید تا متن آرام‌تر شود، یا پایین بیاورید تا تیتر قوی‌تر شود. اشباع می‌گوید رنگ چقدر زنده به نظر برسد.
کدام فرمت را بگیریم؟
- Hex — پیش‌فرض وقتی از فایل طراحی یا پالت برند کپی می‌کنید
rgb()/rgba()— وقتی به کانال‌ها یا آلفا سریع نیاز داریدhsl()— وقتی در حال کشف یا تنظیم یک خانوادهٔ مرتبط هستید- نام‌دار — هنوز برای اسکچ و دموی آموزشی خوب است
همهٔ این‌ها امروز رویcolorمعتبرند؛ روی پس‌زمینه هم دوباره به‌کارشان می‌برید.
خودتان امتحان کنید
- صفحه با
h1،.leadو.note. - تیتر را با hex (
#0f172a)، lead را باrgb(51, 65, 85)و note را با#0f766eبگذارید. - یک
.badgeباhsl(174, 77%, 28%)و حاشیهٔ HSL تیره‌تر در همان فام. - یک برچسب را با
rgba(15, 118, 110, 0.75)نرم کنید — باید از1کم‌رنگ‌تر به نظر برسد. - اختیاری: اگر جفت رقم‌ها واقعاً دوبل‌شدنی بودند، hex را کوتاه بنویسید؛ وگرنه شش رقم بماند.
اشتباهات رایج
- فراموش کردن
#قبل از hex (0f766eبه‌تنهایی رنگ معتبر نیست) - حروف خارج از
a–fدر hex - کانال RGB بیرون از
0–255(یا قاطی کردن واحدها) - انتظار اینکه آلفا مثل
display: noneجا از چیدمان بردارد - فکر کردن که فرمت «قوی‌تر» در cascade است — انتخاب فرمت اولویت را عوض نمی‌کند
خلاصه
- مقادیر رنگ، فرمت‌هایی برای همان ویژگی‌های رنگ‌پذیرند
- Hex فرمت روزمرهٔ چسباندن از طراحی است
rgb()/rgba()کانال و آلفا را نشان می‌دهندhsl()کمک می‌کند با فام، اشباع و روشنایی فکر کنید- رنگ نام‌دار هنوز معتبر است؛ فرمت را با کار جور کنید
- hex به‌علاوه یک فرمت کاربردی (
rgbaیاhsl) را تمرین کنید تا هر دو جا بیفتد
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود