سی ایس ایس رنگ

CSS ਸਮਰਥਨ 140 ਤੋਂ ਜ਼ਿਆਦਾ ਰੰਗ ਨਾਮਅਤੇ ਸਿਕਸੈਡੀਮਲ ਮੁੱਲ, RGB ਮੁੱਲ, RGBA ਮੁੱਲ, HSL ਮੁੱਲ, HSLA ਮੁੱਲ ਅਤੇ ਅਨਪਰਵਾਹੀ ਨਾਲ ਮਿਲਦੇ ਹਨ。

RGBA ਰੰਗ

RGBA ਰੰਗ ਮੁੱਲ RGB ਰੰਗ ਮੁੱਲ ਦਾ ਵਿਸਥਾਰ ਹੈ, ਜਿਸ ਵਿੱਚ alpha ਚੈਨਲ ਹੈ - ਇਹ ਚੈਨਲ ਰੰਗ ਦੀ ਅਨਪਰਵਾਹੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

RGBA ਰੰਗ ਮੁੱਲ ਇਹ ਤਰੀਕੇ ਨਾਲ ਨਿਰਧਾਰਿਤ ਹੁੰਦੇ ਹਨ: rgba(red, green, blue, alpha)。 alpha ਪੈਰਾਮੀਟਰ 0.0 (ਪੂਰੀ ਪਾਰਦਰਸ਼ਤਾ) ਅਤੇ 1.0 (ਕੋਈ ਪਾਰਦਰਸ਼ਤਾ ਨਹੀਂ) ਦਰਮਿਆਨ ਦੇ ਅੰਕ ਹਨ。

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

ਹੇਠਲੇ ਉਦਾਹਰਣ ਵਿੱਚ ਵੱਖ-ਵੱਖ RGBA ਰੰਗ ਦਿਖਾਏ ਗਏ ਹਨ:

مثال

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* ਅਨਪਰਵਾਹੀ ਲਾਲ */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* ਅਨਪਰਵਾਹੀ ਹਰੀ */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* ਅਨਪਰਵਾਹੀ ਨੀਲਾ */

خود کارا امتحان کریں

HSL ਰੰਗ

HSL ਇਹ ਹਨ ਰੰਗ ਹੂਏ, ਸੰਤੂਲਨ ਅਤੇ ਰੋਸ਼ਨੀ (Hue, Saturation ਅਤੇ Lightness).

HSL ਰੰਗ ਮੁੱਲ ਇਹ ਤਰੀਕੇ ਨਾਲ ਨਿਰਧਾਰਿਤ ਹੁੰਦੇ ਹਨ: hsl(hue, saturation, lightness).

ਰੰਗ ਹੈ ਰੰਗ ਚੱਕਰ ਦੇ ਅਨੁਸਾਰ (0 ਤੋਂ 360 ਤੱਕ):

  • 0 (ਜਾਂ 360) ਹੈ ਲਾਲ
  • 120 ਹੈ ਹਰੀ
  • 240 ਹੈ ਨੀਲਾ

ਸੰਤੂਲਨ ਇੱਕ ਪ੍ਰਤੀਸ਼ਤ ਹੈ: 100% ਪੂਰੀ ਰੰਗ ਹੈ。

ਰੋਸ਼ਨੀ ਵੀ ਇੱਕ ਪ੍ਰਤੀਸ਼ਤ ਹੈ: 0% ਗਹਿਰੀ ਹੈ (ਕਾਲਾ), ਅਤੇ 100% ਸਫੇਦ ਹੈ。

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 颜色值是带有 Alpha 通道的 HSL 颜色值的扩展 - 它规定了颜色的不透明度。

HSLA 颜色值由以下参数规定：hsla(hue, saturation, lightness, alpha)，其中 alpha 参数定义不透明度。 alpha 参数是介于 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 opacity 属性设置整个元素的不透明度（背景颜色和文本都将是不透明/透明的）。

opacity 属性值必须是介于 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;}  /* ناقابل تشخیص کا بنیادی رنگ */

خود کارا امتحان کریں