رنگ‌ها در CSS

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

نام‌های رنگ (Color Names)

ساده‌ترین روش برای تعیین رنگ در CSS ، استفاده از نام‌های از پیش تعریف‌شده است. CSS بیش از صد نام رنگ استاندارد مانند red ، blue ، green و orange را پشتیبانی می‌کند.

h1{
    color: tomato; 
}

در این مثال، رنگ متن عنصر h1 با استفاده از نام رنگ tomato تعیین شده است.

کدهای هگزادسیمال (Hex Colors)

در این روش، رنگ با استفاده از یک کد شش‌رقمی که با علامت # شروع می‌شود، تعریف می‌شود. این کد ترکیبی از سه مقدار رنگ قرمز، سبز و آبی (RGB) است که هرکدام با دو رقم هگزادسیمال نمایش داده می‌شوند.

p{
    color: #3366ff; 
}

در این مثال، رنگ متن پاراگراف با کد هگزادسیمال #3366ff که یک آبی روشن است، تعیین شده است.

مقادیر RGB

با استفاده از تابع rgb() نیز می‌توان رنگ را بر اساس سه مقدار عددی بین ۰ تا ۲۵۵ برای قرمز، سبز و آبی تعریف کرد.

div{
    background-color: rgb(255, 99, 71);
}

در این مثال، رنگ پس‌زمینه‌ی عنصر div با استفاده از مقادیر RGB تعیین شده که نتیجه‌ی آن رنگی نارنجی‌مایل‌به‌قرمز است.

مقادیر RGBA و شفافیت

تابع rgba() مشابه rgb() است، با این تفاوت که یک مقدار چهارم به نام Alpha (آلفا) نیز دارد که میزان شفافیت رنگ را مشخص می‌کند. این مقدار عددی بین ۰ (کاملاً شفاف) تا ۱ (کاملاً غیرشفاف) است.

div{
    background-color: rgba(255, 99, 71, 0.5);
}

در این مثال، رنگ پس‌زمینه همان رنگ مثال قبل است، اما با مقدار Alpha برابر 0.5 نیمه‌شفاف نمایش داده می‌شود.