CSS ਲਾਗੂ ਰੰਗ ਕੀਮਤ

سی ایس ایس رنگ

CSS ਵਿੱਚ ਰੰਗ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨ ਦੀ ਵਿਧੀ ਹੇਠ ਲਿਖੇ ਤਰੀਕੇ ਨਾਲ ਹੈ:

  • ਅੱਠਾਰਾ ਰੰਗ
  • ਸਪਲਟ ਹੋਣ ਵਾਲੇ ਅੱਠਾਰਾ ਰੰਗ
  • RGB ਰੰਗ
  • #p3 {background-color: rgb(0, 0, 255);} /* ਨੀਲਾ */
  • HSL ਰੰਗ
  • HSLA ਰੰਗ
  • ਪ੍ਰਤੀਯੋਗੀ/ਬਰਾਉਜ਼ਰ ਅਕਸਰ ਰੰਗ ਨਾਮ
  • ਵਰਤੋਂ ਕਰਕੇ currentcolor ਕੀਤਾਬੀ ਪੈਰਾਮੀਟਰ

ਅੱਠਾਰਾ ਰੰਗ

ਅੱਠਾਰਾ ਰੰਗ ਨੂੰ #RRGGBB ਰੂਪ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕਰੋ, ਜਿਸ ਵਿੱਚ RR (red), GG (green) ਅਤੇ BB (blue) ਅੱਠਾਰਾ ਸੰਖਿਆਵਾਂ ਰੰਗ ਦੇ ਅੰਦਰਲੇ ਤੀਵਰਤਾ (component) ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੀਆਂ ਹਨ। ਸਾਰੇ ਮੁੱਲ 00 ਤੋਂ FF ਤੱਕ ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ。

ਉਦਾਹਰਣ ਵਿੱਚ, ＃0000ff ਮੁੱਲ ਨੂੰ ਨੀਲਾ ਰੰਗ ਦੇ ਤੌਰ 'ਤੇ ਪੇਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ blue ਅੰਦਰਲੇ ਤੀਵਰਤਾ ਨੂੰ ਸਭ ਤੋਂ ਉੱਚੀ ਕੀਮਤ (ff) ਸੈਟ ਕੀਤੀ ਗਈ ਹੈ, ਹੋਰ ਅੰਦਰਲੇ ਤੀਵਰਤਾਵਾਂ ਨੂੰ 00 ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ。

ਉਦਾਹਰਣ

ਵੱਖ-ਵੱਖ HEX ਰੰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:

#p1 {background-color: #ff0000;}   /* ਲਾਲ */
#p2 {background-color: #00ff00;}   /* ਹਰੀ */
#p3 {background-color: #0000ff;}   /* ਨੀਲਾ */

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਪਲਟ ਹੋਣ ਵਾਲੇ ਅੱਠਾਰਾ ਰੰਗ

ਅੱਠਾਰਾ ਰੰਗ ਨੂੰ #RRGGBB ਰੂਪ ਵਿੱਚ ਨਿਰਧਾਰਿਤ ਕਰੋ। ਸਪਲਟ ਹੋਣ ਵਾਲੀ ਤੀਵਰਤਾ ਵਧਾਉਣ ਲਈ 00 ਅਤੇ FF ਦਰਮਿਆਨ ਦੋ ਵਾਧੂ ਨੰਬਰ ਜੋੜੋ。

ਉਦਾਹਰਣ

ਸਪਲਟ ਹੋਣ ਵਾਲੇ HEX ਰੰਗ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ:

#p1a {background-color: #ff000080;}   /* ਸਪਲਟ ਹੋਣ ਵਾਲਾ ਲਾਲ */
#p2a {background-color: #00ff0080;}   /* ਸਪਲਟ ਹੋਣ ਵਾਲਾ ਹਰੀ */
#p3a {background-color: #0000ff80;}   /* ਸਪਲਟ ਹੋਣ ਵਾਲਾ ਨੀਲਾ */

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

RGB ਰੰਗ

RGB ਰੰਗ ਕੀਮਤ ਦੁਆਰਾ rgb() ਫੰਕਸ਼ਨਨਿਰਧਾਰਿਤ ਕਰੋ, ਇਸ ਦੀ ਗਰੰਟਰਸ ਹੈ:

rgb(red, green, blue)

ਹਰ ਪੈਰਾਮੀਟਰ (red, green, blue）ਰੰਗ ਦੀ ਤੀਵਰਤਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ, ਇਹ 0 ਤੋਂ 255 ਤੱਕ ਦਾ ਪੂਰਣ ਸੰਖਿਆ ਹੋ ਸਕਦੀ ਹੈ ਜਾਂ ਪ੍ਰਤੀਸ਼ਤ ਕੀਮਤ (0% ਤੋਂ 100% ਤੱਕ) ਹੋ ਸਕਦੀ ਹੈ。

ਉਦਾਹਰਣ ਵਿੱਚ, ਮੁੱਲ rgb(0,0,255) ਨੂੰ ਨੀਲਾ ਰੰਗ ਦੇ ਤੌਰ 'ਤੇ ਪੇਸ਼ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਕਿਉਂਕਿ blue ਪੈਰਾਮੀਟਰ ਨੂੰ ਸਭ ਤੋਂ ਉੱਚੀ ਕੀਮਤ (255) ਸੈਟ ਕੀਤੀ ਗਈ ਹੈ, ਹੋਰ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ 0 ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ。

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਨਿਮਨਲਿਖਤ ਮੁੱਲ ਨਾਲ ਇਸੇ ਰੰਗ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ: rgb(0,0,255) ਅਤੇ rgb(0%,0%,100%)。

ਉਦਾਹਰਣ

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਨਿਮਨਲਿਖਤ ਮੁੱਲ ਨਾਲ ਇਸੇ ਰੰਗ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦੇ ਹਨ: rgb(0,0,255) ਅਤੇ rgb(0%,0%,100%)。

ਵੱਖ-ਵੱਖ ਆਰਜੀਬੀ ਰੰਗ ਨਿਰਧਾਰਿਤ ਕਰੋ:
#p1 {background-color: rgb(255, 0, 0);}   /* ਲਾਲ */
#p2 {background-color: rgb(0, 255, 0);}   /* ਹਰੀ */

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

#p3 {background-color: rgb(0, 0, 255);} /* ਨੀਲਾ */

RGBA ਰੰਗ

RGBA ਰੰਗ ਆਰਜੀਬੀ ਰੰਗ ਦੇ ਵਿਸਤਾਰ ਦਾ ਹੈ, ਇਸ ਵਿੱਚ ਅਲਫਾ ਚੈਨਲ ਹੈ - ਆਬਜੈਕਟ ਦੀ ਅਨੰਤਰਪਾਤੀ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。 rgba() ਫੰਕਸਨਨਿਰਧਾਰਿਤ ਕਰੋ, ਇਸ ਦੀ ਗਰੰਟਰਸ ਹੈ:

rgba(red, green, blue, alpha)

alpha ਪੈਰਾਮੀਟਰ 0.0 (ਪੂਰੀ ਪਾਰਦਰਸ਼ਤਾ) ਅਤੇ 1.0 (ਪੂਰੀ ਅਣਪਾਰਦਰਸ਼ਤਾ) ਵਿਚਕਾਰ ਦੇ ਨੰਬਰ ਹਨ。

ਉਦਾਹਰਣ

ਅਨੰਤਰਪਾਤੀ ਵੱਖ-ਵੱਖ ਆਰਜੀਬੀ ਰੰਗ ਨਿਰਧਾਰਿਤ ਕਰੋ:

#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 ਰੰਗ ਵਾਲੀ ਮੁੱਲ ਨਿਰਧਾਰਿਤ ਕਰੋ, ਇਸ ਫੰਕਸਨ ਦੀ ਗਰੰਟਰਸ ਹੈ:

hsl(hue, saturation, lightness)

ਰੰਗ ਹੈ ਰੰਗ ਪਰਿਵਾਰ ਦੇ ਅਨੁਸਾਰ ਦਰਜਾ (0 ਤੋਂ 360 ਤੱਕ) - 0 (ਜਾਂ 360) ਲਾਲ ਹੈ, 120 ਹਰੀ ਹੈ, 240 ਨੀਲਾ ਹੈ。

ਸੰਤੁਲਨ ਇੱਕ ਪ੍ਰਤੀਸ਼ਤੀ ਹੈ; 0％ ਗ੍ਰੇ ਹੈ, 100％ ਪੂਰੀ ਰੰਗ ਹੈ。

ਸ਼ਾਨਦਾਰਤਾ ਵੀ ਪ੍ਰਤੀਸ਼ਤੀ ਹੈ; 0％ ਕਾਲਾ ਹੈ, 100％ ਸਫੇਦ ਹੈ。

ਉਦਾਹਰਣ

ਵੱਖ-ਵੱਖ ਹੈਲਸ ਰੰਗ ਨਿਰਧਾਰਿਤ ਕਰੋ:

#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 ਰੰਗ ਮੁੱਲ ਦਾ ਵਿਸਥਾਰ ਹੈ, ਇਸ ਵਿੱਚ ਆਲਫਾ ਚੈਨਲ ਹੈ - ਇਹ ਆਬਜੈਕਟ ਦੀ ਅਣਪਾਰਦਰਸ਼ਤਾ ਨੂੰ ਨਿਰਦਿਸ਼ਟ ਕਰਦਾ ਹੈ。

HSLA ਰੰਗ ਮੁੱਲ HSL ਰੰਗ ਮੁੱਲ ਦਾ ਵਿਸਥਾਰ ਹੈ hsla() ਫੰਕਸਨਨਿਰਦਿਸ਼ਟ ਕਰੋ, ਇਸ ਫੰਕਸਨ ਦੀ ਸ਼ਬਦਬੰਦੀ ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

hsla(hue, saturation, lightness, alpha)

alpha ਪੈਰਾਮੀਟਰ 0.0 (ਪੂਰੀ ਪਾਰਦਰਸ਼ਤਾ) ਅਤੇ 1.0 (ਪੂਰੀ ਅਣਪਾਰਦਰਸ਼ਤਾ) ਵਿਚਕਾਰ ਦੇ ਨੰਬਰ ਹਨ。

ਉਦਾਹਰਣ

ਅਣਪਾਰਦੀ ਵੱਖ-ਵੱਖ HSL ਰੰਗ ਨਿਰਧਾਰਿਤ ਕਰੋ:

#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);}    /* ਅਣਪਾਰਦੀ ਹਲੈਨਾ ਗ੍ਰੀਨ */

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਪ੍ਰਤੀਯੋਗੀ/ਬਰਾਉਜ਼ਰ ਅਕਸਰ ਰੰਗ ਨਾਮ

HTML ਅਤੇ CSS ਰੰਗ ਨਿਯਮਾਂ ਵਿੱਚ 140 ਰੰਗ ਨਾਮ ਪ੍ਰਤੀਯੋਗੀ ਹਨ。

ਉਦਾਹਰਣ:blue、red、coral、brown ਅਤੇ:

ਉਦਾਹਰਣ

ਵੱਖ-ਵੱਖ ਰੰਗ ਨਾਮ ਨਿਰਧਾਰਿਤ ਕਰੋ:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ

ਸਾਰੇ ਪ੍ਰਤੀਯੋਗੀ ਨਾਮਾਂ ਦੀ ਸੂਚੀ ਸਾਡੇ ਰੰਗ ਨਾਮ ਸੰਦਰਭ ਪੁਸਤਕ ਵਿੱਚ ਮਿਲ ਸਕਦੀ ਹੈ。

currentcolor ਕੀਵਾਰਡ

currentcolor ਕੀਤੇ ਗਏ ਕੀਵਾਰਡ ਦੇ color ਪ੍ਰਤੀਯੋਗੀ ਦੇ ਮੁੱਲ ਨੂੰ ਪ੍ਰਤੀਯੋਗੀ ਕੀਤਾ ਗਿਆ ਹੈ。

ਉਦਾਹਰਣ

ਹੇਠ ਅਨੁਸਾਰ <div> ਐਲੀਮੈਂਟ ਦਾ ਬੋਰਡਰ ਰੰਗ ਹਲੈਨਾ ਹੋਵੇਗਾ ਕਿਉਂਕਿ <div> ਐਲੀਮੈਂਟ ਦਾ ਟੈਕਸਟ ਰੰਗ ਹਲੈਨਾ ਹੈ:

#myDIV {
  color: blue; /* ਹਲੈਨਾ ਟੈਕਸਟ ਰੰਗ */
  border: 10px solid currentcolor; /* ਹਲੈਨਾ ਬੋਰਡਰ ਰੰਗ */
}

ਆਪਣੇ ਅਨੁਸਾਰ ਪ੍ਰਯੋਗ ਕਰੋ