آموزش رنگها در CSS3

CSS از اسم رنگ‌ها، مقادیر شانزده‌شانزدهی (Hexadecimal) و مدل RGB (Red, Green, Blue) برای تعریف رنگ‌ها پشتیبانی می‌کند. در CSS3 امکانات جدیدی برای مدیریت دقیق‌تر رنگ‌ها و شفافیت معرفی شده که در زیر توضیح داده شده است:

• رنگ های RGBA (red, blue, green و alpha)
• رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)
• رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)
• Opacity (درجه ی شفافیت و کدری)

رنگ های (red, blue, green و alpha) RGBA

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید .
مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

  
        #p1 {background-color: rgba(255, 0, 0, 0.3);}  /* red with opacity */
        #p2 {background-color: rgba(0, 255, 0, 0.3);}  /* green with opacity */
        #p3 {background-color: rgba(0, 0, 255, 0.3);}  /* blue with opacity */
    

رنگ های HSL

HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود . 1. HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

• 0 یا 360: قرمز
• 120: سبز
• 240: آبی

2. Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن
3. Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

  
        #p1 {background-color: hsl(120, 100%, 50%);}  /* green */
        #p2 {background-color: hsl(120, 100%, 75%);}  /* light green */
        #p3 {background-color: hsl(120, 100%, 25%);}  /* dark green */
        #p4 {background-color: hsl(120, 60%, 70%);}   /* pastel green */
    

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند .
مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

  
        #p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* green with opacity */
        #p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* light green with opacity */
        #p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* dark green with opacity */
        #p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* pastel green with opacity */
    

Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند .
مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است .
مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

  
        #p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* red with opacity */
        #p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* green with opacity */
        #p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* blue with opacity */
    

جمع بندی

در CSS3، امکانات بیشتری برای مدیریت دقیق رنگ‌ها و شفافیت ارائه شده است. استفاده از RGBA و HSLA به شما اجازه می‌دهد که علاوه بر رنگ، شفافیت را نیز به صورت مجزا تنظیم کنید. همچنین، خاصیت Opacity به شما کمک می‌کند تا کل یک عنصر را شفاف یا کدر کنید. این ویژگی‌ها به طراحی‌های مدرن وب کمک می‌کنند تا جذابیت بصری بیشتری داشته باشند.