رنگ CSS

CSS support More than 140 color namesas well as hexadecimal values, RGB values, RGBA values, HSL values, HSLA values, and opacity.

RGBA color

The RGBA color value is an extension of the RGB color value, with an alpha channel - this channel specifies the opacity of the color.

The RGBA color value is defined as: rgba(red, green, blue, alpha) alpha The parameter is a number between 0.0 (completely transparent) and 1.0 (completely opaque).

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

The following examples define different RGBA colors:

مثال

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

آزمایش کنید

HSL color

HSL refers to hue, saturation, and lightness (Hue, Saturation, and Lightness).

The HSL color value is defined as: hsl(hue, saturation, lightness).

Hue is the degree on the color wheel (from 0 to 360):

  • 0 (or 360) is red
  • 120 is green
  • 240 is blue

saturation is a percentage value: 100% is full color.

brightness is also a percentage value: 0% is dark (black), and 100% is white.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

در اینجا مثال‌هایی از رنگ‌های مختلف HSL آورده شده است:

مثال

#p1 {background-color: hsl(120, 100%, 50%);}  /* سبز */
#p2 {background-color: hsl(120, 100%, 75%);}  /* سبز روشن */
#p3 {background-color: hsl(120, 100%, 25%);}  /* سبز تیره */
#p4 {background-color: hsl(120, 60%, 70%);}   /* سبز روشن */

آزمایش کنید

رنگ HSLA

مقدار رنگ HSLA یک گسترش از مقدار رنگ HSL با Alpha Channel است - که شفافیت رنگ را تعیین می‌کند.

مقدار رنگ HSLA توسط پارامترهای زیر تعیین می‌شود: hsla(色调, رنگ‌پرایی, روشنایی, آلفا)، جایی که پارامتر آلفا مقدار شفافیت را تعیین می‌کند. پارامتر آلفا باید بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً ناپрозا) باشد.

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

در اینجا مثال‌هایی از رنگ‌های مختلف HSLA آورده شده است:

مثال

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* سبز با شفافیت */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* سبز روشن با شفافیت */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* سبز تیره با شفافیت */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* سبز روشن با شفافیت */

آزمایش کنید

شفافیت

CSS شفافیت تنظیمات این ویژگی شفافیت تمامی عناصر را تنظیم می‌کند (رنگ پس‌زمینه و متن نیز شفاف/ناشفاف خواهند بود).

شفافیت مقدار باید بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً ناپрозا) باشد.

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

لطفاً توجه داشته باشید که متن بالا نیز شفاف/ناشفاف خواهد بود!

در اینجا مثالی از عناصر مختلف با شفافیت نشان داده شده است:

مثال

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* قرمز با شفافیت */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* سبز با شفافیت */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* آبی با شفافیت */

آزمایش کنید