color در CSS - چگونه برای عناصر مختلف رنگ تعیین کنیم؟

در این قسمت به آموزش رنگ‌ها در CSS می‌پردازیم. به طور کلی ویژگی color در CSS را می‌توان با ۴ نوع مقدار (value) تعریف کرد:

نام رنگ به‌طور مستقیم
مدل RGB
مدل RGBA
کد هگزادسیمال (Hexadecimal)

اهمیت این ویژگی (یا همان پراپرتی - property) در این است که مقادیری که دریافت می‌کند، در بخش‌های مختلف دیگر نیز کاربرد دارند. به‌عنوان مثال، زمانی که شما با این مقادیر آشنا و مسلط شوید، می‌توانید همان‌ها را در پراپرتی‌هایی مانند background-color یا سایر بخش‌ها نیز به کار ببرید. در قسمت‌های قبل از دوره آموزش CSS سکان آکادمی نیز نمونه‌هایی از این پراپرتی را استفاده کردیم و نتیجه آن را مشاهده کردید. برای یادگیری عمیق مقادیر رنگ‌ها در CSS این آموزش را تا انتها ادامه دهید.

حالت‌های مختلف تعریف رنگ

پراپرتی color در CSS به چهار حالت کلی تعریف می‌شود که در ادامه بررسی خواهیم کرد.

حالت اول: استفاده از نام رنگ‌ها

در این روش، نام رنگ به‌طور مستقیم نوشته می‌شود. برای مثال:

color: red;
color: tomato;
color: blue;
color: green;

در این حالت تنها کافی است نام رنگ مدنظر خود را وارد کنید.

برای مقداردهی به ویژگی color در css می‌توان اسم آن را به طور مستقیم نوشت.

حالت دوم و سوم: استفاده از مدل‌های رنگی (RGB و RGBA)

روش دیگری که ممکن است با آن آشنا باشید، استفاده از مدل‌های رنگی است. اگر تجربه کار با نرم‌افزارهایی مثل فتوشاپ را داشته باشید، به خاطر دارید که هنگام انتخاب رنگ، دو مدل رایج وجود دارد:

RGB (Red, Green, Blue)
CMYK (Cyan, Magenta, Yellow, Key/Black)

در CSS معمولاً از مدل RGB استفاده می‌شود که در ادامه مثال‌های آن را بررسی خواهیم کرد.

مدل RGB و RGBA: هر رنگی که در محیط‌های دیجیتال انتخاب می‌کنیم، ترکیبی از سه مقدار اصلی است:

Red (قرمز)
Green (سبز)
Blue (آبی)

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

مدل RGBA: نوع دیگری از این مدل با نام RGBA وجود دارد. در اینجا حرف A مخفف Alpha است که نشان‌دهنده شفافیت (Transparency) رنگ می‌باشد. با استفاده از مقدار آلفا، می‌توانیم تعیین کنیم رنگ مورد نظر تا چه میزان شفاف یا کدر باشد.

حالت چهارم: استفاده از کدهای رنگی (Hexadecimal / Decimal)

روش چهارم تعریف رنگ در CSS استفاده از کدهای رنگی است. در این روش مقدار رنگ به‌صورت یک کد هگزادسیمال (Hexadecimal) یا دسیمال نوشته می‌شود. برای مثال:

color: #ff0000;
color: #00ff00;
color: #0000ff;

علامت # (که با نام‌هایی مثل هش، نامبرساین یا هشتگ شناخته می‌شود) پیش از کد رنگ قرار می‌گیرد. استفاده از هر دو اصطلاح Hexa یا Decimal در این زمینه صحیح است.

۱. تعریف رنگ با استفاده از نام رنگ

در ادامه برای درک بهتر، وارد محیط VS Code می‌شویم تا این چهار روش معرفی رنگ را به‌صورت عملی پیاده‌سازی کنیم.

برای شروع، یک کلاس با نام one تعریف می‌کنیم و مقدار پراپرتی color را برای آن مشخص می‌کنیم. سپس این کلاس را به اولین تگ <p> در HTML اضافه می‌کنیم:

<head>
<style>
    .one {
        color: tomato;
    }
</style>
</head>

<body>
    <p class="one">.را در آن بررسی کنیم color این پاراگراف اول است که می‌خواهیم</p>
</body>

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

ابزارهای آنلاین برای انتخاب و تبدیل رنگ

برای راحتی کار، وب‌سایت‌هایی وجود دارند که به ما کمک می‌کنند کدهای رنگ را به یکدیگر تبدیل کنیم یا مقدار دقیق آن‌ها را ببینیم. به‌عنوان مثال وب‌سایت W3Schools یا HTML Color Codes که یک ابزار انتخاب رنگ دارد. در این ابزار می‌توانید رنگ دلخواه خود را انتخاب کنید و کد آن را در فرمت‌های مختلف مشاهده کنید.
در این وب‌سایت‌ها کافی است کد رنگ مورد نظر را وارد کنید یا با کلیک روی پالت رنگ، رنگ دلخواه را انتخاب کنید. سپس مقدار آن به‌صورت Hexadecimal یا RGB نمایش داده می‌شود. همچنین می‌توانید نسخه‌های مختلف همان رنگ را با شفافیت‌های (Transparency) متفاوت مشاهده کنید.

۲. استفاده از مدل RGB برای تعریف رنگ در CSS

همان‌طور که گفته شد، برای تعریف رنگ در CSS می‌توانیم از مدل RGB نیز استفاده کنیم. برای این کار یک کلاس جدید با نام two تعریف می‌کنیم:

.two {
    color: rgb(100, 150, 80);
}

سپس این کلاس را به دومین پاراگراف در HTML اضافه می‌کنیم. بعد از رفرش کردن صفحه، رنگ متن تغییر کرده و به رنگی نزدیک به سبز نمایش داده می‌شود.

استفاده از مدل RGB برای تعریف رنگ در سی اس سی

نکته: در محیط VS Code، اگر نشانگر موس را روی کد رنگ قرار دهید، یک ابزار Color Picker ظاهر می‌شود. با استفاده از آن می‌توانید رنگ مورد نظر خود را به‌صورت بصری انتخاب کنید و حتی کد رنگ را تغییر دهید. در این ابزار، نوار دوم (نوار وسط) مربوط به Transparency (شفافیت) است که به شما اجازه می‌دهد میزان شفافیت رنگ را تنظیم کنید.

۳. استفاده از مدل RGBA

برای تعریف رنگ همراه با شفافیت، از مدل RGBA استفاده می‌کنیم. مقدار آلفا عددی بین ۰ تا ۱ است؛ جایی که 0 به معنای کاملاً شفاف و 1 به معنای کاملاً کدر است. به‌عنوان مثال:

.three {
    color: rgba(120, 85, 0, 0.5);
}

در این مثال، رنگی مشابه نمونه قبلی داریم، با این تفاوت که نیمه‌شفاف (Transparency = 0.5) نمایش داده می‌شود.
استفاده از مدل RGBA در دوره CSS
در این حالت، همان رنگ سبز قبلی نمایش داده می‌شود اما با شفافیت نصف.

۴. استفاده از کد Hex برای رنگ‌ها در CSS

روش چهارم تعریف رنگ در CSS استفاده از کد Hex است. برای مثال:

.four {
    color: #536e9c;
}

با نوشتن کد رنگ به این صورت، رنگ مورد نظر اعمال می‌شود. در VS Code نیز می‌توان با قرار دادن نشانگر موس روی کد رنگ، آن را تغییر داد یا رنگ جدیدی انتخاب کرد.
استفاده از کد Hex برای رنگ‌ها در CSS
نکته مهم: پیش از شروع هر پروژه طراحی، بهتر است بدانیم از چه پالت رنگی (Color Palette) می‌خواهیم استفاده کنیم. استفاده از رنگ‌های پراکنده و بدون هماهنگی باعث شلوغی و کاهش زیبایی سایت می‌شود.

یکی از روش‌های ساده برای انتخاب رنگ، استفاده از وب‌سایت‌های تولیدکننده پالت رنگی است. در این ابزارها کافی است روی دکمه Generate کلیک کنید تا یک پالت رنگی به‌صورت تصادفی (Random) تولید شود. با چند بار تکرار، می‌توانید به ترکیب رنگی مناسب پروژه خود برسید. این کار کمک می‌کند ظاهر وب‌سایت شما هماهنگ و حرفه‌ای‌تر باشد.

پراپرتی opacity در CSS برای تعیین شفافیت رنگ

در کنار مفهوم شفافیت که با مدل RGBA بررسی کردیم، پراپرتی دیگری در CSS وجود دارد به نام opacity. این پراپرتی میزان شفافیت یک المان کامل (نه فقط رنگ متن) را تعیین می‌کند. مقدار آن عددی بین ۰ تا ۱ است.

 opacity: 1;   → کاملاً کدر
 opacity: 0.5;  → ۵۰٪ شفافیت
 opacity: 0;   → کاملاً نامرئی

مثال:

.four {
 color: #536e9c;
 opacity: 0.5;
}

در این مثال، رنگ متن به همان رنگ Hex مشخص‌شده خواهد بود، اما کل پاراگراف (شامل متن و محتوای داخلی آن) با ۵۰٪ شفافیت نمایش داده می‌شود.
پراپرتی opacity در کنار پراپرتی color در CSS

جمع بندی

در این قسمت رایگان از دوره آموزش CSS، چگونگی تعریف رنگ برای متن یک پاراگراف را یاد گرفتید. دانستید که برای تعریف رنگ در سی اس اس می‌توانید از ویژگی color استفاده کرده و مقدار آن را با یکی از ۴ روش آموزش داده شده، تعیین کنید. علاوه بر رنگ متن‌ها از همین روش برای تعریف رنگ برای عناصر مختلف دیگر مثل رنگ پس زمینه background-color استفاده می‌شود. برای یادگیری عمیق‌تر در مورد چگونگی تعریف رنگ برای پس‌زمینه، تعریف تصویر برای آن یا تعیین موقعیت آن (position)، در دوره CSS ثبت نام و قسمت‌های بعدی این آموزش را ببینید.

رنگ ها (color) در CSS