رنگ یکی از اجزای کاربردی در طراحی و توسعه وب‌سایت است. استفاده از رنگ مناسب به انتقال حس، زیبایی بصری و سریع‌تر پیدا کردن محتوا توسط کاربر کمک می‌کند.
در CSS، چهار روش اصلی برای تولید رنگ وجود دارد که هرکدام مزایا و کاربرد خاص خود را دارند. در این آموزش با شیوه استفاده از کلمات کلیدی رنگ، مقادیر هگزادسیمال، فرمت rgb() و فرمت hsl() آشنا می‌شوید. تمام این روش‌ها را روی یک ساختار HTML آزمایش خواهیم کرد تا تفاوت و کاربرد هر روش را بهتر درک کنید. در طی آموزش با خواصی مثل color، border و background-color کار خواهیم کرد.
راه‌اندازی پایه‌ای HTML و CSS
ابتدا فایل index.html را باز کنید و ساختار زیر را قرار دهید:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>کار با رنگ‌ها در CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<article>
<header>
<h1>رنگ در طراحی وب</h1>
</header>
<p>رنگ بخش مهمی از درک ما از جهان و نقش کلیدی در طراحی وب دارد.</p>
<hr />
<p>انتخاب صحیح رنگ و استفاده از فرمت مناسب در CSS منجر به بهبود تجربه کاربری می‌شود.</p>
<footer>منبع:
<a href="https://en.wikipedia.org/wiki/Color" target="_blank">ویکی‌پدیا</a>
</footer>
</article>
</body>
</html>
حال فایل styles.css را ایجاد و ساختار زیر را قرار دهید:
body {
font-family: sans-serif;
line-height: 1.5;
}
article {
margin: 2rem auto;
padding: 2rem;
width: 90%;
max-width: 40rem;
box-sizing: border-box;
}
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
}
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
}
footer {
margin-top: 2rem;
font-size: 0.875rem;
}
استفاده از کلمات کلیدی رنگی (CSS Color Keywords)
در CSS بیش از صد کلمه کلیدی تعریف شده است که برای استفاده سریع و آزمایشی رنگ‌ها بسیار مناسب‌اند. لیست کامل این کلمات کلیدی در سایت W3C ارائه‌شده است.
article {
background-color: seashell;
border: 0.25rem solid sandybrown;
color: maroon;
}
انتخاب رنگ‌های مکمل: برای مثال تیتر را به رنگ teal قرار می‌دهیم و خط میان پاراگراف‌ها (hr) را با ترکیب border به رنگ teal و background به رنگ darkturquoise ست می‌کنیم:
h1 {
color: teal;
}
hr {
border: 0.25rem solid teal;
background-color: darkturquoise;
}
برای متن فوتر هم رنگ chocolate را استفاده کنید:
footer {
color: chocolate;
}
اگر مایل هستید لینک داخل فوتر رنگ متن والد را به ارث ببرد از مقدار inherit استفاده کنید:
footer a {
color: inherit;
}
نکته: مقدار inherit فقط روی خاصیت‌هایی مانند color و border-color قابل استفاده است. برای مواقعی که بخواهید سایر خواص مثل background-color را هم از رنگ کنونی عنصر بگیرید از مقدار currentColor کمک بگیرید.
استفاده از مقادیر هگزادسیمال (Hexadecimal Color Codes)
رایج‌ترین روش تعریف رنگ در طراحی وب استفاده از کدهای هگزادسیمال است. در این روش رنگ با یک # آغاز شده و شش حرف بعدی نمایانگر شدت قرمز، سبز و آبی است (برای هر کدام دو حرف، از ۰۰ تا ff). نسخه کوتاه‌تر هم با سه حرف وجود دارد که هریک دو بار تکرار می‌شود (مثلاً #ff0 همان #ffff00 است).
article {
background-color: #f0f0f0;
border: 0.25rem solid #ccc;
color: #444;
}
h1 {
color: #900;
}
hr {
border: 0.25rem solid #bd0000;
background-color: #f00;
}
footer {
color: #888;
}
نکته مهم در انتخاب رنگ، رعایت کنتراست مناسب برای خوانایی محتواست. برای این منظور می‌توانید از ابزارهای بررسی نسبت کنتراست مثل WebAIM Contrast Checker استفاده کنید.
استفاده از فرمت rgb()
در روش rgb() هر کانال رنگ (قرمز، سبز، آبی) به‌صورت عددی و از ۰ تا ۲۵۵ مشخص می‌شود (مثلاً rgb(255, 0, 0) برای قرمز). تبدیل هگزادسیمال به rgb راحت است و ابزارهایی برای انجام آن وجود دارد.
article {
background-color: rgb(240, 240, 240);
border: 0.25rem solid rgb(204, 204, 204);
color: rgb(68, 68, 68);
}
h1 {
color: rgb(153, 0, 0);
}
hr {
border: 0.25rem solid rgb(189, 0, 0);
background-color: rgb(255, 0, 0);
}
footer {
color: rgb(136, 136, 136);
}
با افزایش عدد کانال قرمز (Red) در ترکیب مقادیر بالا می‌توانید طیف خاکستری را به سمت گرم‌تر شدن ببرید:
article {
background-color: rgb(245, 240, 240);
border: 0.25rem solid rgb(209, 204, 204);
color: rgb(73, 68, 68);
}
footer {
color: rgb(141, 136, 136);
}
استفاده از فرمت hsl()
در این شیوه، رنگ با مشخص کردن سه پارامتر تعیین می‌شود: Hue (زاویه رنگ روی چرخه ۰ تا ۳۶۰ درجه)، Saturation (اشباع، درصدی) و Lightness (روشنایی، درصدی). مثلاً hsl(0, 100%, 50%) قرمز خالص خواهد بود.
مثلاً برای تعریف یک طیف کامل خاکستری کافی است hue و saturation را صفر و فقط lightness را تغییر دهید:
article {
background-color: hsl(0, 0%, 94%);
border: 0.25rem solid hsl(0, 0%, 80%);
color: hsl(0, 0%, 27%);
}
footer {
color: hsl(0, 0%, 45%);
}
برای رنگ‌های مکمل و متنوع کافی است hue را در دو طرف چرخه رنگ قرار دهید. برای مثال اگر hue را روی 200 بگذارید، یک طیف آبی-سبز ایجاد می‌شود. اگر در heading و خط بین پاراگراف hue را روی 20 (مکمل 200 – یعنی نارنجی) تنظیم کنید:
h1 {
color: hsl(20, 100%, 25%);
}
hr {
border: 0.25rem solid hsl(20, 100%, 35%);
background-color: hsl(20, 100%, 50%);
}
article {
background-color: hsl(200, 50%, 94%);
border: 0.25rem solid hsl(200, 50%, 80%);
color: hsl(200, 50%, 27%);
}
footer {
color: hsl(200, 100%, 45%);
}
جمع‌بندی
در این آموزش، چهار روش تعریف رنگ در CSS را بررسی کردیم: کلمات کلیدی، کدهای هگزادسیمال، فرمت rgb() و فرمت hsl(). هرکدام از این روش‌ها کاربرد و مزیت خود را دارند. روش hsl با امکان کنترل مستقل بر hue، saturation و lightness قدرت طراحی رنگ هماهنگ و مکمل را افزایش می‌دهد.
از همراهی شما با پارمین کلود متشکریم.
نظرات کاربران