رنگ و پس زمینه در CSS؛ HEX، RGB و HSL | درس 24 + پروژه درس

درس 24 از دوره 60 جلسه ای آموزش HTML و CSS ارومیا دیزاین

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

پیش نیاز این درس، اتصال CSS به HTML در درس 21، انتخابگرهای کلاس در درس 22 و اولویت قوانین CSS در درس 23 است. زمان پیشنهادی: 40 دقیقه مطالعه و آزمایش و 15 دقیقه تمرین.

در پایان درس 24 چه می توانید انجام دهید؟

• با color رنگ متن و با background-color رنگ زمینه را تعیین کنید.
• یک رنگ را با نام، HEX، RGB و HSL بنویسید.
• شفافیت یک رنگ را از کم رنگ شدن کل عنصر جدا کنید.
• یک تصویر تزئینی یا گرادیان را در زمینه قرار دهید.
• رنگ های خوانا انتخاب کنید و برای پیام ها فقط به رنگ تکیه نکنید.

تفاوت color و background-color چیست؟

color رنگ متن عنصر را تعیین می کند. background-color سطح پشت محتوای عنصر را رنگ می کند. اگر می خواهید نوشته سفید روی یک کارت آبی داشته باشید، هر دو ویژگی را روی همان کارت تنظیم کنید:

.card {
  color: #ffffff;
  background-color: #075985;
}

رنگ متن معمولاً به فرزندان ارث می رسد، ولی رنگ زمینه به طور پیش فرض ارثی نیست. اگر زمینه یک پاراگراف شفاف باشد و رنگ کارت را پشت آن ببینید، این به معنی ارث بردن background-color نیست. اگر لینک داخل کارت رنگ دیگری دارد، قانون مستقیم a را در ابزار بررسی مرورگر پیدا کنید.

روش های نوشتن رنگ در CSS

1. نام رنگ؛ برای شروع و آزمایش

.sample {
  color: navy;
  background-color: white;
}

مرورگر نام های تعریف شده در CSS را می شناسد؛ مثلاً navy یک رنگ مشخص است. نام فارسی یا عبارتی مثل darkblueish رنگ معتبر نمی سازد. برای هماهنگی دقیق اجزای یک سایت، کد رنگ را ثبت کنید تا بعداً همان مقدار را دوباره به کار ببرید.

2. HEX؛ سه کانال قرمز، سبز و آبی

.sample {
  color: #075985;
  background-color: #ffffff;
}

در شکل شش رقمی HEX، هر جفت رقم یک کانال رنگ است و مقدار آن از 00 تا ff می رود. علامت # را فراموش نکنید. شکل کوتاه مثل #fff همان #ffffff است؛ هر رقم دوبار تکرار می شود. اما نمی توان هر رنگ شش رقمی را دلخواه کوتاه کرد؛ #075985 شکل سه رقمی معادل ندارد.

3. RGB؛ مقدار سه کانال را مستقیم بنویسید

.sample {
  color: rgb(7 89 133);
  background-color: rgb(255 255 255);
}

در این نمونه، عددهای RGB از 0 تا 255 نوشته شده اند. رنگ rgb(7 89 133) با #075985 برابر است. شکل قدیمی rgb(7, 89, 133) نیز معتبر است؛ در این درس از شکل جدید با فاصله استفاده می کنیم. دو شیوه جداکننده را در یک تابع مخلوط نکنید.

4. HSL؛ فام، اشباع و روشنایی

.notice {
  color: hsl(142 64% 24%);
  background-color: hsl(138 76% 97%);
}

بخش اول HSL فام رنگ است و در این نمونه زاویه درجه را بدون واحد نوشته ایم؛ 0 نزدیک قرمز، 120 نزدیک سبز و 240 نزدیک آبی است. اشباع، شدت رنگ و روشنایی، روشن یا تیره بودن آن را کنترل می کند. دو بخش آخر درصد می خواهند. HSL برای ساخت یک خانواده رنگ مفید است، اما درصد روشنایی آن به تنهایی خوانایی متن را تضمین نمی کند.

شفافیت رنگ با آلفا؛ تفاوت با opacity

بعد از علامت / می توان آلفا را نوشت. مقدار 0 یا 0% کاملاً شفاف و 1 یا 100% کاملاً مات است. برای یک زمینه آبی کم رنگ، خود رنگ زمینه را نیمه شفاف کنید:

.soft-card {
  color: #0f172a;
  background-color: rgb(7 89 133 / 15%);
}

در این حالت متن با رنگ خودش باقی می ماند و فقط رنگ زمینه با سطح پشت آن ترکیب می شود. نتیجه نهایی به رنگ پشت کارت هم وابسته است؛ همین آبی شفاف روی سفید با روی زمینه تیره فرق دارد.

.faded-card {
  color: #0f172a;
  background-color: #075985;
  opacity: 0.15;
}

opacity ظاهر کل عنصر، شامل متن و فرزندانش، را کم رنگ می کند. اگر فقط زمینه را کم رنگ می خواهید، آلفای background-color انتخاب مناسب تری است. برای تشخیص تفاوت، این دو مثال را جداگانه روی کارت تمرین امتحان کنید و بعد حالت آزمایشی را حذف کنید.

transparent و currentColor

.notice {
  color: #166534;
  border: 1px solid currentColor;
}
.clear-panel {
  background-color: transparent;
}

transparent رنگ کاملاً شفاف است و پشت عنصر را قابل مشاهده می کند. currentColor مقدار color همان عنصر را برای ویژگی دیگری به کار می گیرد؛ در نمونه بالا، کادر با رنگ متن هماهنگ است. این به معنی ارث بردن border از والد نیست.

تصویر و گرادیان در پس زمینه

برای تصویر تزئینی، background-image به کار می رود. زمینه جایگزین متن جایگزین ندارد؛ عکس محصول یا تصویری که بخشی از محتواست را با img و متن مناسب نمایش دهید. تفاوت تصویر محتوایی را در درس 9؛ تصاویر و alt مرور کنید.

.hero {
  color: #ffffff;
  background-color: #075985;
  background-image: url("assets/pattern.svg");
  background-repeat: repeat;
}

فایل pattern.svg در بسته دانلودی همین درس قرار دارد و یک الگوی تزئینی ساده است. رنگ زمینه زیر تصویر باقی می ماند و اگر فایل تصویر پیدا نشود، هنوز سطح آبی داریم. مسیر url در فایل CSS نسبت به محل همان فایل CSS محاسبه می شود؛ برای یادآوری، مسیرهای نسبی در درس 8 را ببینید.

.hero {
  background-color: #075985;
  background-image: linear-gradient(135deg, #075985, #0f172a);
}

برای آزمایش گرادیان، مقدار background-image قبلی hero را با این مقدار جایگزین کنید. گرادیان از نظر CSS یک تصویر زمینه است و نیازی به فایل جدا ندارد. دو اعلان background-image در همان قانون، خودکار روی هم قرار نمی گیرند؛ اعلان بعدی جای قبلی را می گیرد. ساخت چند لایه تصویر را در درس های پیشرفته بررسی می کنیم.

چرا فعلاً ویژگی های جدا می نویسیم؟

.hero {
  background-image: url("assets/pattern.svg");
  background: #075985;
}

background یک ویژگی کوتاه نویسی برای مجموعه ویژگی های زمینه است. در نمونه بالا، اعلان دوم تصویر را به مقدار اولیه none بازمی گرداند و الگو ناپدید می شود. وقتی فقط قصد تغییر رنگ دارید، background-color بنویسید تا تصویر و تنظیمات دیگر ناخواسته بازنشانی نشوند.

رنگ خوانا انتخاب کنید

برای متن معمولی در سطح AA استاندارد WCAG، نسبت کنتراست دست کم 4.5 به 1 لازم است؛ برای متن بزرگ، حداقل 3 به 1. متن بزرگ در این معیار حدود 24 پیکسل معمولی یا 18.7 پیکسل ضخیم و بالاتر است. برای محتوای این پروژه، حتی متن های کوچک را با معیار 4.5 به 1 بررسی کنید. شفافیت و تصویر زمینه را هم در رنگ نهایی حساب کنید.

پیام موفقیت را فقط با سبز کردن نشان ندهید؛ واژه ای مثل «اطلاعات آماده است» هم بنویسید. لینک را با خط زیر متن قابل تشخیص نگه دارید. این نکته ادامه اصول دسترس پذیری در درس 16 است.

پروژه درس 24؛ صفحه خدمات با پالت رنگ منظم

ساختار صفحه شامل سربرگ، محتوای اصلی و بخش تماس است؛ همان اجزایی که در درس 15؛ ساختار معنایی شناختیم. اکنون رنگ ها را به آن اضافه می کنیم. این تمرین را بعداً می توانید روی پروژه نهایی HTML درس 20 اجرا کنید.

دانلود فایل های پروژه

دانلود پروژه درس 24؛ فایل ZIP همراه پاسخ تمرین

ZIP شامل index.html، style.css، solution.css، راهنمای فارسی README.txt و الگوی تزئینی assets/pattern.svg است. فایل را استخراج کنید و index.html را در مرورگر باز کنید؛ پروژه بدون اینترنت و بدون نصب ابزار اجرا می شود.

فایل index.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تمرین رنگ و پس زمینه CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <h1>خدمات استودیو آفتاب</h1>
    <p>یک صفحه ساده با رنگ های هماهنگ و متن خوانا.</p>
    <a href="#contact">رفتن به بخش تماس</a>
  </header>
  <main>
    <section aria-labelledby="services-title">
      <h2 id="services-title">خدمات ما</h2>
      <article class="card">
        <h3>طراحی سایت شرکتی</h3>
        <p>معرفی کسب و کار با ساختار روشن و رنگ های منظم.</p>
        <a class="service-link" href="#contact">پرسش درباره خدمات</a>
      </article>
      <p class="notice">وضعیت نمونه: اطلاعات پروژه برای بررسی آماده است.</p>
      <article class="card practice-card">
        <h3>کارت تمرین شما</h3>
        <p>فقط رنگ متن و زمینه این کارت را تغییر دهید.</p>
      </article>
    </section>
    <section id="contact" class="card" aria-labelledby="contact-title">
      <h2 id="contact-title">تماس با استودیو</h2>
      <p>این صفحه تمرینی است و درخواست واقعی ثبت نمی کند.</p>
    </section>
  </main>
  <footer><p>پروژه آموزشی درس 24 ارومیا دیزاین</p></footer>
</body>
</html>

فایل style.css

body {
  margin: 0;
  padding: 24px;
  font-family: Tahoma, sans-serif;
  line-height: 1.8;
  color: #0f172a;
  background-color: #f1f5f9;
}
.hero {
  padding: 28px;
  color: #ffffff;
  background-color: #075985;
  background-image: url("assets/pattern.svg");
  background-repeat: repeat;
}
.hero a {
  color: #ffffff;
}
a {
  text-decoration: underline;
}
.card {
  padding: 20px;
  margin-bottom: 16px;
  color: #0f172a;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
}
.service-link {
  color: rgb(7 89 133);
}
.notice {
  padding: 16px;
  color: hsl(142 64% 24%);
  background-color: hsl(138 76% 97%);
  border: 1px solid currentColor;
}
.practice-card {
  color: #0f172a;
  background-color: #ffffff;
}

فایل assets/pattern.svg

اگر فایل ها را دستی می سازید، این کد را در پوشه assets ذخیره کنید. SVG فقط شکل تزئینی دارد و اسکریپت یا منبع خارجی ندارد.

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><path d="M0 40H80M40 0V80" stroke="#ffffff" stroke-opacity="0.08" fill="none"/></svg>

نتیجه مورد انتظار

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

تمرین: فقط یک کارت را تیره کنید

بدون تغییر HTML، فقط practice-card را با زمینه #075985 و متن سفید تغییر دهید. کارت خدمات، پیام نمونه و تماس نباید تغییر کنند. از opacity استفاده نکنید. بعد یک آزمایش جدا انجام دهید: زمینه کارت را rgb(7 89 133 / 15%) و متن را #0f172a بگذارید و تفاوت شفافیت رنگ با شفافیت کل عنصر را توضیح دهید.

.practice-card {
  color: #ffffff;
  background-color: #075985;
}

اشتباه های رایج رنگ و پس زمینه در CSS

• فراموش کردن #: مقدار 075985 کد HEX معتبر نیست.
• کپی کردن عدد فارسی در کد: عددهای RGB، HSL و آلفا را انگلیسی بنویسید.
• کم رنگ کردن متن با opacity: برای زمینه نیمه شفاف از آلفای رنگ استفاده کنید.
• ناپدید شدن الگو: بررسی کنید background بعدی تصویر را بازنشانی نکرده باشد.
• ندیدن رنگ جدید: فایل را ذخیره کنید، مسیر CSS و قانون برنده را در ابزار بررسی مرورگر ببینید.

پرسش های متداول

HEX از RGB بهتر است؟

هر دو می توانند یک رنگ یکسان بسازند. روشی را انتخاب کنید که خواندن و تکرار پالت را برای پروژه آسان کند؛ شکل نوشتن به تنهایی رنگ زیباتر یا خواناتری ایجاد نمی کند.

چرا background-color متن را تغییر نمی دهد؟

این ویژگی سطح زمینه را رنگ می کند. رنگ حروف را با color بنویسید و اگر قانون دیگری روی فرزند وجود دارد، آن را هم بررسی کنید.

آیا رنگ زمینه همه فرزندان را رنگ می کند؟

فرزند با زمینه شفاف، سطح پشت خود را نشان می دهد. فرزند دارای زمینه سفید، همان قسمت را می پوشاند. این رفتار را با ارث بری رنگ متن اشتباه نگیرید.

چرا تصویر زمینه پیدا نمی شود؟

مسیر را نسبت به محل فایل CSS، نام فایل و حروف بزرگ و کوچک بررسی کنید. در بسته این درس، پوشه assets باید کنار style.css باشد.

درس بعدی

در درس 25 سراغ واحدهای اندازه در CSS مثل px، درصد، em و rem می رویم تا اندازه متن و اجزای صفحه را آگاهانه انتخاب کنیم. همه جلسه ها در دسته آموزش HTML و CSS قرار دارند.

منابع مطالعه بیشتر: مقادیر رنگ در MDN، پس زمینه در MDN، شفافیت عنصر در MDN و کنتراست متن در W3C.