CSS از 140+ نام رنگ ، مقادیر HEX ، مقادیر RGB ، مقادیر RGBA ، مقادیر HSL ، مقادیر HSLA و تیرگی پشتیبانی می کند.
رنگهای RGBA
مقادیر رنگ RGBA یک پسوند مقادیر رنگ RGB با یک کانال آلفا است – که میزان تیرگی یک رنگ را مشخص می کند.
مقدار رنگ RGBA با این موارد مشخص می شود: rgba (قرمز ، سبز ، آبی ، آلفا). پارامتر آلفا عددی بین 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 and Lightness است.
مقدار رنگ HSL با: hsl (رنگ ، اشباع ، سبک بودن) مشخص شده است.
- Hue درجه ای بر روی چرخ رنگ است (از 0 تا 360):
- 0 (یا 360) قرمز است
- 120 سبز است
- 240 آبی است
- اشباع یک مقدار درصد است: 100٪ تمام رنگ است.
- سبکی نیز یک درصد است. 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 با یک کانال آلفا است – که میزان تیرگی یک رنگ را مشخص می کند.
مقدار رنگ HSLA با این مورد مشخص می شود: hsla (رنگ ، اشباع ، سبک بودن ، آلفا) ، جایی که پارامتر آلفا میزان کدورت را تعریف می کند. پارامتر آلفا عددی بین 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ویژگی CSS میزان تیرگی کل عنصر را تعیین می کند (هم رنگ پس زمینه و هم متن کدر / شفاف خواهد بود).
opacityارزش ملک باید یک عدد بین 0.0 (به طور کامل شفاف) و 1.0 (به طور کامل مات) باشد.
توجه داشته باشید که متن بالا نیز شفاف / مات خواهد بود!
مثال زیر عناصر مختلف را با تیرگی نشان می دهد:
مثال
#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 */
