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

در CSS می‌توان به روش‌های مختلفی رنگ‌ها را مقداردهی کرد. 

نام رنگ‌ها

کد رنگ HEX

سیستم RGB و RGBa

سیستم HSL و HSLa

نکته:

به غیر از نام رنگ‌ها که تعدادشان محدود است، تعداد رنگ‌های موجود در دیگر روش‌ها باهم یکسان هستند. به عبارتی هر رنگ می‌تواند بصورت HEX یا RGB یا HSL مقداردهی شود.

نام رنگ‌ها:

این روش بخوبی آشنا هستیدهمانطور که می‌دانید در این روش تنها کافیست تا نام یک رنگ را بنویسید. در تصویر زیر نام چند رنگ پر استفاده را آورده‌ایم.

کد رنگ HEX:

این روش، روش محبوب طراحان وبسایت است. می‌توان گفت در طراحی صفحات وب، بیشتر رنگ‌ها از طریق کد رنگ HEX تعریف می‌شوند.

کد رنگ HEX از ۶ رقم تشکیل می‌شود. ۲ رقم اول مقدار رنگ قرمز، ۲ رقم دوم مقدار رنگ سبز و ۲ رقم سوم مقدار رنگ آبی را تعیین می‌کنند. تمام این ارقام در مبنای ۱۶ هستند یعنی می‌توانند از 00 تا FF باشند. (در مبنای ۱۰ می‌شود از صفر تا ۲۵۵). کاراکتر # ابتدای این کد نماد اعداد مبنای ۱۶ است.

بنابراین با کم و زیاد کردن مقدار هر یک از این رنگ‌ها، یک رنگ جدید به وجود می‌آید. می‌توان محاسبه کرد که با استفاده از این اعداد جمعاً می‌توان ۱۶٫۷۷۷٫۲۱۶ رنگ تولید کرد!

سیستم RGB و RGBa:

RGB مخفف عبارت Red Green Blue است. نحوه عملکرد آن دقیقا مشابه کد رنگ Hex است با این تفاوت که به جای اعدادمبنای ۱۶ از اعداد مبنای ۱۰ استفاده می‌کند. یعنی می‌توانید به هر رنگ یک عدد از صفر تا ۲۵۵ اختصاص دهید.

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

سیستم رنگ RGBa هم مانند RGB است، اما تابع ()rgba یک پارامتر اضافه به نام alpha می‌گیرد که مقدار شفافیت رنگ را تعیین می‌کند. این مقدار عددی بین 0 تا 1 است، 0 یعنی کاملا شفاف و شیشه‌ای و 1 یعنی بدون شفافیت.

سیستم HSL و HSLa:

نحوه عملکرد سیستم HSL کاملا با RGB و کد Hex متفاوت است. HSL مانند RGB یک تابع در CSS است که ۳ پارامتر می‌گیرد. اما پارامتر‌های آن دیگر درصد هر رنگ را تعیین نمی‌کنند.

پارامتر اول hue است که درجه رنگ در چرخه رنگ (color wheel) را تعیین می‌کند. این پارامتر می‌تواند عددی از صفر تا 360 باشد.

پارامتر دوم Saturation است که یک مقدار درصدی است، این پارامتر درصد اشباع رنگ را تعیین می‌کند. 0٪ کاملا خاکستری است و 100٪ بصورت کامل رنگ را نشان می‌دهد.

پارامتر سوم Lightness است، این پارامتر هم یک مقدار درصدی است که درصد تیرگی یا روشنایی رنگ را تعیین می‌کند. 0٪ کاملا تیره و 100٪ کاملا روشن است.

سیستم رنگ HSLa هم مانند HSL است، اما تابع ()hsla یک پارامتر اضافه به نام alpha می‌گیرد که مقدار شفافیت رنگ را تعیین می‌کند. این مقدار عددی بین 0 تا 1 است، 0 یعنی کاملا شفاف و شیشه‌ای و 1 یعنی بدون شفافیت.

تمام سیستم‌ رنگ‌ها در CSS را معرفی کردیم. از تمام این روش‌ها می‌توانید در مواقعی که نیاز به رنگ دارید استفاده کنید. مانند مقداردهی به ویژگی color یا background-color. برای مثال:

/* Color Name */
background-color: red;
/* Hex */
background-color: #ff0000;
/* RGBA and RGBa */
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.5);
/* HSL and HSLa */
background-color: hsl(360,100%,50%);
background-color: hsla(360,100%,50%,0.5);