رنگ‌ها در CSS

مقدمه

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

پدیده رنگ و مدل‌های رنگی

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

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

یک مدل رنگی از چند رنگ اصلی و رنگ‌های حاصل از ترکیب آنها ساخته می‌شود. برای ساختن یک مدل رنگی، چند رنگ به عنوان رنگ‌های اصلی تعیین می‌شوند و با قرار دادن این رنگ‌ها روی یک دایره‌ی فرضی به صورت متساوی‌الفاصله و ترکیب رنگ‌های مجاور با یکدیگر، یک دایره یا چرخه‌ی رنگ (color wheel) ایجاد می‌شود. مدل‌های رنگی مختلفی وجود دارد که هر یک برای کار در یک حوزه‌ی مشخص، ایجاد شده و کاربرد دارند. در ادامه، با مهمترین مدل‌های رنگی موجود و نحوه‌ی شکل‌گیری آنها آشنا می‌شویم.

مدل رنگی RGB

این مدل رنگی، مبتنی بر نظریه‌ی کلاسیک رنگ‌هاست و توسط نیوتون ساخته شد. هنگام انجام آزمایشات مختلف روی نور، نیوتون متوجه شد که رنگ‌های قرمز (Red)، سبز (Green) و آبی (Blue) کاملاً خالص هستند؛ یعنی آنها را نمی‌توان با ترکیب رنگ‌های دیگر ایجاد کرد اما سایر رنگ‌ها از ترکیب این سه رنگ ایجاد می‌شوند. او این رنگ‌ها را رنگ‌های اصلی (primary colors) نامید و آنها را روی یک دایره‌ی فرضی به صورت متساوی‌الفاصله قرار داد. سپس، با قرار دادن رنگ‌های حاصل از ترکیب دوبه‌دوی این رنگ‌ها در بین آنها، سه رنگ دیگر موسوم به رنگ‌های ثانویه (secondary colors) را ایجاد کرد و با پی‌گیری این روند، دایره‌ی رنگ او مفهوم پیوسته پیدا کرد.

مدل رنگی RGB مدلی است که با توجه به ماهیت نوری خود، در تلویزیون‌ها و نمایشگرهای دیجیتال استفاده می‌شود. در این مدل رنگی، هر یک از کانال‌های رنگی قرمز، سبز و آبی می‌توانند مقداری از صفر تا 255 را دریافت کنند که مشخص کننده‌ی شدت آن رنگ نوری است. به این ترتیب، هر یک از کانال‌های رنگی می‌تواند 2⁸ = 256 رنگ را دریافت کند و بنابراین، مجموعاً امکان تولید 2⁸.2⁸.2⁸ = 2²⁴ رنگ مختلف وجود دارد.

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

مدل رنگی CMYK

این مدل رنگی که برای استفاده در صنعت چاپ و بر اساس رنگ‌های قابل چاپ ایجاد شده، از رنگ‌های فیروزه‌ای (Cyan)، ارغوانی (Magenta)، زرد (Yellow) و سیاه (Black) به عنوان رنگ‌های اصلی استفاده می‌کند و دایره‌ی رنگ خود را ایجاد می‌کند. مقدار هر یک از این مؤلفه‌های رنگ بر حسب درصد تعیین می‌شود.

رنگ سیاه در این مدل رنگی، سیاه مطلق نیست و نوعی رنگ قهوه‌ای تیره است که از ترکیب سه رنگ دیگر بدست می‌آید.

مدل رگی HSL

در این مدل، از سه مؤلفه‌ی ته‌رنگ یا فام (Hue)، غلظت یا شدت رنگ (Saturation) و روشنایی (Lightness) برای تعیین رنگ مورد نظر استفاده می‌شود. مقدار hue از روی چرخه‌ی رنگ و با در نظر گرفتن این موضوع که رنگ قرمز روی صفر درجه یا همان 360 درجه است، رنگ آبی روی 120 درجه و رنگ سبز روی 240 درجه قرار دارد، تعیین می‌شود. پس، مقدار hue بر حسب درجه از صفر تا 360 تعیین می‌شود. مقدار saturation و lightness بر حسب درصد تعیین می‌شوند.

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

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

• تعیین رنگ با استفاده از نام رنگ‌ها
• تعیین رنگ با استفاده از مقادیر هگزادسیمال رنگ‌ها
• تعیین رنگ با استفاده از توابع rgb() و rgba()
• تعیین رنگ با استفاده از تابع hsl() و hsla()

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

در وب از 147 نام رنگ استاندارد مانند red، blue، lime، azure و غیره پشتیبانی می‌شود. ساده‌ترین روش برای تعیین یک رنگ، استفاده از همین نام‌هاست. در مثال زیر، از نام رنگ‌ها برای تعیین رنگ پس‌زمینه‌ی عناصر و نیز رنگ متون استفاده شده است:

CSS

h1{
  color: lightseagreen;
}

div{
  width: 200px;
  height: 120px;
  font-size: 2em;
  background-color: burlywood;
  color: saddlebrown;
  border: 5px solid brown;
}

تعیین رنگ با توابع rgb() و rgba()

یکی دیگر از روش‌های تعیین رنگ در CSS، استفاده از تابع rgb() است. این تابع دارای فرم کلی زیر است:

همانطور که می‌بینید، این تابع سه پارامتر ورودی دارد که به ترتیب برای تعیین شدت رنگ قرمز، سبز و آبی برای ترکیب با یکدیگر و ساخت رنگ مورد نظر کاربرد دارند. همانطور که قبلاً هم گفتیم، هر یک از این پارامترها می‌توانند مقداری از صفر تا 255 و یا مقداری بر حسب درصد را دریافت کنند. به این روش می‌توانیم هر رنگی از مدل رنگی RGB را ایجاد کنیم. در مثال زیر از تابع rgb() برای تعیین رنگ عناصر استفاده شده است:

CSS

h1{
  color: rgb(255, 106, 0);
}

div{
  width: 200px;
  height: 120px;
  font-size: 2em;
  background-color: rgb(255, 216, 0);
  color: rgb(178, 0, 255);
  border: 5px solid rgb(255, 0, 0);
}

اما در CSS3 تابع جدیدی با نام rgba() معرفی شد که نسبت به rgb() یک پارامتر اضافه‌تر دارد که مشخص‌کننده‌ی مقدار کانال آلفا است. مقدار آلفا می‌تواند عددی بین صفر تا یک باشد و تعیین‌کننده‌ی میزان شفافیت (transparency) است. مقدار صفر به معنای شفافیت کامل و مقدار 1 به معنای رنگ کاملاً مات است. بنابراین، فرم کلی تابع rgba() به صورت زیر است:

در مثال زیر، از تابع rgba() برای تعیین رنگ استفاده شده است. می توانید با تغییر میزان پارامتر آلفا، تأثیر آن را ببینید:

CSS

h1{
  color: rgba(255, 0, 0, .8);
}

div{
  width: 200px;
  height: 120px;
  font-size: 2em;
  background-color: rgba(255, 0, 0, .3);
  color: rgba(255, 255, 0, .5);
  border: 5px solid rgba(0, 255, 0, .1);
}

در CSS یک پراپرتی با نام opacity وجود دارد که ظاهراً کار مشابهی با پارامتر آلفا را انجام می‌دهد اما در حقیقت، پراپرتی opacity برای تنظیم شفافیت کل عنصر و محتوای آن کاربرد دارد اما پارامتر آلفا تنها شفافیت رنگ را تنظیم می‌کند.

بر خلاف تابع rgb() تابع جدیدتر rgba() در برخی از مرورگرهای قدیمی پشتیبانی نمی‌شود و برای نمونه، مرورگر IE تا قبل از نسخه‌ی 9 از این تابع پشتیبانی نمی‌کند. با توجه به اینکه در صورت عدم پشتیبانی این تابع در مرورگر، قاعده‌ی مربوط به آن نادیده گرفته می‌شود، لذا اگر به پشتیبانی در مرورگرهای قدیمی نیاز داشته باشیم، باید مانند کد زیر تمهیدات لازم را در نظر بگیریم:

CSS

p{
  color: rgb(100%, 100%, 0);
  color: rgba(100%, 0%, 0%, .5);
}

در اینجا، چنانچه مرورگری از تابع rgba() پشتیبانی نکند، استایل دوم را نادیده گرفته و از استایل اول که شامل تابع rgb() است، برای تعیین رنگ استفاده می‌کند.

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

برای تعیین رنگ در CSS می‌توان از روش نمادگذاری هگزادسیمال (hexadecimal notation) نیز استفاده کرد. این روش بر مدل رنگی RGB استوار است اما با این تفاوت که از مقادیر هگزادسیمال یا اعداد در مبنای 16 برای تعیین مقدار هر کانال یا مؤلفه‌ی رنگ استفاده می‌کند.

دستگاه اعدادی که ما با آن سر و کار داریم، دستگاه دسیمال (decimal) یا دهدهی است که کار شمارش را در مبنای 10 انجام می‌دهد و لذا در این دستگاه ده رقم از 0 تا 9 وجود دارد که از ترکیب آنها هر عدد دلخواه ایجاد می‌شود. اما دستگاه هگزادسیمال یا مبنای 16 از اعداد صفر تا 9 وحروف a تا f که معادل اعداد 11 تا 15 هستند، استفاده می‌کند.

برای تعیین رنگ با استفاده از مقادیر هگزادسیمال، ابتدا یک کاراکتر هش یا پاوند (#) نوشته می‌شود و سپس سه جفت عدد دو رقمی در مبنای 16 از 00 تا ff (معادل صفر تا 255 در دستگاه دسیمال) که مشخص‌کننده‌ی شدت هر یک از کانال‌های رنگ است، آورده می‌شود. مثال زیر را ببینید:

CSS

h1{
  color: #ff0000;
}

div{
  width: 200px;
  height: 120px;
  font-size: 2em;
  background-color: #ffff00;
  color: #ff00ff;
  border: 5px solid #ca1284;
}

با توجه به اینکه روش‌های تابع rgb() و نمادگذاری هگزادسیمال هر دو بر مدل رنگی RGB استوار بوده و منجر به انتخاب یک رنگ از این مدل رنگی می‌شوند، این سؤال مطرح می‌شود که کدام یک از این روش ها مناسب‌تر هستند؟ البته این یک سؤال کلیدی نیست و تا حد زیادی به سلیقه‌ی شما بستگی دارد اما روی‌هم‌رفته روش هگزادسیمال را می‌توان ارجح دانست و علت این امر، دقت، اختصار و وضعیت پشتیبانی مناسب در مرورگرهاست. یک مزیت دیگر استفاده از این روش نیز این است که در اپلیکیشن‌های گرافیکی و ویرایش تصویر، کد هگزادسیمال رنگ‌ها ارائه می‌شود و لذا می‌توانیم کد رنگ مورد نظر را کپی کنیم.

تعیین رنگ با توابع hsl() و hsla()

یکی دیگر از روش‌های تعیین رنگ که البته در نسخه‌های قدیمی برخی از مرورگرها پشتیبانی نمی‌شود، استفاده از تابع hsl() است. این تابع از مدل HSL برای تعیین رنگ استفاده می‌کند و لذا دارای سه پارامتر است. پارامتر اول تعیین‌کننده‌ی مقدار Hue است و لذا عددی بین صفر تا 360 دریافت می کند که نشان‌دهنده‌ی موقعیت رنگ روی دایره‌ی رنگی RGB است. در این دایره، رنگ قرمز روی زاویه‌ی 0 و 360 درجه است، رنگ سبز روی زاویه‌ی 120 و رنگ آبی روی زاویه‌ی 240 قرار دارد. پارامتر دوم Saturation یا غلطت رنگ را بر حسب درصد بیان می‌کند و مقدار صفر برای آن به معنای وجود یک سایه‌ی خاکستری و مقدار 100 به معنای رنگ کامل است. و بالاخره پارامتر سوم میزان روشنایی یا lightness را بر حسب درصد تعیین می‌کند. برای این پارامتر، مقادیر بالاتر به معنای روشنایی بیشتر است. مثال زیر را ببینید.

CSS

h1{
  color: hsl(0, 100%, 50%);
}

div{
  width: 200px;
  height: 120px;
  font-size: 2em;
  background-color: hsl(120, 50%, 75%);
  color: #ff00ff;
  border: hsl(185, 65%, 40%);
}