رنگ ها در CSS

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

روش های مختلف استفاده از رنگ ها در HTML و CSS

• روش اول اینکه می‌توانیم به صورت مستقیم از نام رنگ استفاده کنیم. (blue)
• روش دوم اینکه از قالب‌های رنگی استفاده کنیم.

انواع قالب‌های رنگی

• RGB
• HEX
• HSL
• RGBA
• HSLA

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

ساختار RGB

ساختار قالب RGB به صورت زیر است:

rgb(red, green, blue)

هر کدام از رنگ‌های red ، green ، blue میزان به کار رفتن آن رنگ را مشخص می‌کنند. مقدار عددی هر کدام از این رنگ‌ها عددی بین 0 تا 255 است. مثلا rgb(180,180,180) نوعی رنگ خاکستری را ایجاد می‌کند. و rgb(0,255,0) نشان دهنده ی رنگ سبز است.

ساختار hex

ساختار این قالب به شکل زیر است:

#rrggbb

همانطور که می‌بینید در این حالت باید رنگ‌ها را در قالب اعدادی بر مبنای 16 انتخاب کنیم. در واقع به جای هر کدام از rr و gg و … می‌توانیم حروف a, b, … تا بالاترین حد یعنی f استفده کنیم. به عنوان مثال #ff0000 رنگ قرمز را برای ما نشان می‌دهد. می‌توانید مقادیر مختلفی را امتحان کنید تا با رنگ‌هایی که ایجاد می‌شود آشنا شوید.

قالب hsl

hsl مخفف عباراتی به ترتیب hue به معنای فام و saturation به معنای اشباع رنگی و lightness به معنای روشنی رنگ است. برای استفاده از این قالب باید ساختار زیر را رعایت کنیم.

hsl(hue, saturation, lightness)

اولین پارامتر که به معنای فام است مقداری بین 0 درجه تا 360 درجه را می‌گیرد. دومین پارامتر که مربوط به اشباع رنگی است می‌توانیم مقدار آن را ا 0 درصد تا 100 درصد تعیین کنیم. توجه کنید که 100 درصد مفهوم کاملا رنگی و 0 درصد معنای کم رنگ بودن را دارد. در آخر مقدار lightness روشنی یا میزان نوری که در رنگ وجود دارد را مشخص می‌کند که می‌توانیم مقدار0 درصد و یا 100 درصد را به آن بدهیم. مقدار صفر درصد یعنی هیچ نوری در ان وجود نداشته باشد بنابراین رنگ ما سیاه خواهد بود و واضح است که اگر مقدار 100 درصد را به آن بدهیم رنگ سفید خواهد بود.

قالب rgba

اگر دقت کنید متوجه خواهید شد که این قالب همان قالب rgb است که a به آن اضافه شده است. اما این a به چه معناست. a که مخفف alpha channel است، میزان شفافیت رنگ را مشخص می‌کند. مقدار آن را می‌توانیم عددی بین صفر تا یک دهیم. ساختار آن به شکل زیر است:

rgba(red, green, blue, alpha)

به عنوان مثال :

rgba(255, 99, 71, 0.4)

توجه کنید که میزان شفافیت یعنی چقدر پشت رنگ قابل رویت است و با کم رنگ بودن یک رنگ متفاوت است.

قالب hsla

قالب hsla نیز همان قالب hsl است که میزان شفافیت به آن اضافه شده است. برای آشنایی بیشتر با این مبحث می‌توانید ویدوی مربوط به آن را مشاهده فرمایید.