رنگ ها (color) در CSS | سکان آکادمی

کدهای این بخش را از اینجا دانلود کنید.

پراپرتی color در CSS

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

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

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

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

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

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

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

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

روش دیگری که ممکن است با آن آشنا باشید، استفاده از مدل‌های رنگی است. اگر تجربه کار با نرم‌افزارهایی مثل فتوشاپ را داشته باشید، به خاطر دارید که هنگام انتخاب رنگ، دو مدل رایج وجود دارد:
• 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 را برای آن مشخص می‌کنیم. سپس این کلاس را به اولین پاراگراف در 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

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

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

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

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

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

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

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

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

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

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

.four {
    color: #536e9c;
}

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

تولید پالت رنگی (Color Palette Generator)

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

پراپرتی opacity در CSS

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

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

مثال:

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

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