CSS hsl() ਫੰਕਸ਼ਨ
- ਪਿਛਲਾ ਪੰਨਾ CSS ਗ੍ਰੇਸਕੇਲਾਈਨ() ਫੰਕਸ਼ਨ
- ਅਗਲਾ ਪੰਨਾ CSS ਹਿਊ-ਰੋਟੇਟ() ਫੰਕਸ਼ਨ
- ਉੱਪਰੋਕਤ ਪੱਧਰ ਵਾਪਸ ਜਾਓ سی ایس ایس فنکشن مراجع تیچنر
ਨਿਰਧਾਰਣ ਅਤੇ ਵਰਤੋਂ
CSS ਦਾ hsl() ਫੰਕਸ਼ਨ ਹੈ ਸੈਟਾਂਗ ਕੀਤੇ ਗਏ ਰੰਗ ਨੂੰ ਸਪੈਕਟਰਮ ਸੈਟਿੰਗ ਦੇ ਹੈਲਸੇ-ਸਾਟਿਊਰੇਸ਼ਨ-ਲਾਈਟਨੈਸ ਮਾਡਲ (HSL) ਦੀ ਮਦਦ ਨਾਲ ਸਪੈਕਟਰਮ ਸੈਟਿੰਗ ਕਰਦਾ ਹੈ।ਇਸ ਵਿੱਚ ਇੱਕ ਵਿਕਲਪਿਤ ਅਲਫਾ ਕੰਪੋਨੈਂਟ (ਰੰਗ ਦੀ ਪਾਰਦਰਸ਼ਤਾ) ਜੋੜ ਸਕਦੇ ਹਨ。
ਸੁਝਾਅ:HSL ਹੈ ਰੰਗ ਦਾ ਰੰਗ ਨਾਮ (Hue)、ਸਾਟਿਊਰੇਸ਼ਨ (Saturation) ਅਤੇ ਲਾਈਟਨੈਸ (Lightness) ਅਤੇ ਇਹ ਰੰਗ ਦਾ ਸਰਕਲ ਕੋਆਰਡੀਨੇਟ ਪ੍ਰਸਤੁਤੀ ਹੈ。
ਨੋਟ:hsla() ਫੰਕਸ਼ਨ ਹੈ hsl() ਫੰਕਸ਼ਨ ਦਾ ਨਾਮ ਹੈ।ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ hsl() ਫੰਕਸ਼ਨ
ਇੰਸਟੈਂਸ
ਉਦਾਹਰਣ 1
ਵੱਖ-ਵੱਖ ਹੈਲਸੇ (HSL(A)) ਰੰਗ ਨਿਰਧਾਰਿਤ ਕਰਨਾ:
#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 100% 25% / 20%);} /* ਪਾਲਟਾ ਗ੍ਰੀਨ */
#p5 {background-color:hsl(120 60% 70%);} /* ਸਪਰਿੰਗ ਰੰਗ ਦਾ ਗ੍ਰੀਨ */
#p6 {background-color:hsl(290 100% 50%);} /* ਪੁਰਪਲ */
#p7 {background-color:hsl(290 60% 70%);} /* ਸਪਰਿੰਗ ਰੰਗ ਦਾ ਪੁਰਪਲ */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* ਸਪਰਿੰਗ ਰੰਗ ਦਾ ਪਾਲਟਾ ਪੁਰਪਲ */
#p5 {background-color:hsl(290, 100%, 50%);} /* ਪੁਰਪਲ */
例子 2
使用逗号分隔值的旧语法：
ਉਦਾਹਰਣ 2
ਮੁੱਲ ਵੰਡਣ ਦੀ ਪੁਰਾਣੀ ਗਰੰਟੀ
#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%);} /* ਨਾਜ਼ੁਕ ਹਰੇ */
#p6 {background-color:hsl(290, 60%, 70%);} /* ਨਾਜ਼ੁਕ ਪੁਰਪਲ */
ਆਪਣੇ ਆਪ ਦੱਸੋ
CSS ਗਰੰਟੀhue ਸੈਟਰੇਸ਼ਨ ਚਮਕ / Aਸਬੰਧਤ ਮੁੱਲ ਗਰੰਟੀ
| hsl(from | ) |
|---|---|
| hue | ਲਾਜ਼ਮੀ।ਰੰਗ ਦੇ ਰੰਗਮੰਡਲ ਵਿੱਚ ਦਰਜਾ (0 ਤੋਂ 360) - 0 (ਜਾਂ 360) ਲਾਲ ਹੈ, 120 ਹਰੇ ਹੈ, 240 ਨੀਲੇ ਹੈ。 |
| ਸੈਟਰੇਸ਼ਨ |
ਲਾਜ਼ਮੀ।ਰੰਗ ਦੀ ਸੈਟਰੇਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ; 0% ਗ੍ਰੇ ਹੈ, 100% ਪੂਰੀ ਰੰਗ (ਪੂਰੀ ਸੈਟਰੇਸ਼ਨ) ਹੈ。 ਵੀ ਨਾਨ (None - ਇਹ 0% ਨਾਲ ਬਰਾਬਰ ਹੈ) ਵਰਤ ਸਕਦੇ ਹਨ。 |
| ਚਮਕ |
ਲਾਜ਼ਮੀ।ਰੰਗ ਦੀ ਚਮਕ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ; 0% ਕਾਲਾ ਹੈ, 50% ਨਿਰਧਾਰਿਤ ਹੈ, 100% ਸਫੇਦ ਹੈ。 ਵੀ ਨਾਨ (None - ਇਹ 0% ਨਾਲ ਬਰਾਬਰ ਹੈ) ਵਰਤ ਸਕਦੇ ਹਨ。 |
| / A |
ਵਿਕਲਪਿਕ।ਰੰਗ ਦੇ ਆਲਫਾ ਚੈਨਲ ਦਾ ਮੁੱਲ ਦਰਸਾਉਂਦਾ ਹੈ (0% - ਪੂਰੀ ਪਾਰਦਰਸ਼ਤਾ ਤੋਂ 100% - ਪੂਰੀ ਅਪਰਾਧਰਤਾ ਤੱਕ) ਵੀ ਨਾਨ (None - ਇਹ ਆਲਫਾ ਚੈਨਲ ਨਹੀਂ ਦਿੰਦਾ) ਵਰਤ ਸਕਦੇ ਹਨ。 ਮੂਲਤਵੀ ਮੁੱਲ 100% ਹੈ。 |
ਸਬੰਧਤ ਮੁੱਲ ਗਰੰਟੀ
hsl( ਵਰਣਨ hue ਸੈਟਰੇਸ਼ਨ ਚਮਕ / Aਸਬੰਧਤ ਮੁੱਲ ਗਰੰਟੀ
| hsl(from | ) |
|---|---|
| ਮੁੱਲ ਵਰਣਨ |
from ਇਹ ਸਬੰਧਤ ਰੰਗ ਨੂੰ ਅਧਾਰ ਬਣਾਉਣ ਵਾਲਾ ਮੂਲ ਰੰਗ ਹੈ。 |
| hue | ਲਾਜ਼ਮੀ।ਰੰਗ ਦੇ ਰੰਗਮੰਡਲ ਵਿੱਚ ਦਰਜਾ (0 ਤੋਂ 360) - 0 (ਜਾਂ 360) ਲਾਲ ਹੈ, 120 ਹਰੇ ਹੈ, 240 ਨੀਲੇ ਹੈ。 |
| ਸੈਟਰੇਸ਼ਨ |
ਲਾਜ਼ਮੀ।ਰੰਗ ਦੀ ਸੈਟਰੇਸ਼ਨ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ; 0% ਗ੍ਰੇ ਹੈ, 100% ਪੂਰੀ ਰੰਗ (ਪੂਰੀ ਸੈਟਰੇਸ਼ਨ) ਹੈ。 ਵੀ ਨਾਨ (None - ਇਹ 0% ਨਾਲ ਬਰਾਬਰ ਹੈ) ਵਰਤ ਸਕਦੇ ਹਨ。 |
| ਚਮਕ |
ਲਾਜ਼ਮੀ।ਰੰਗ ਦੀ ਚਮਕ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ; 0% ਕਾਲਾ ਹੈ, 50% ਨਿਰਧਾਰਿਤ ਹੈ, 100% ਸਫੇਦ ਹੈ。 ਵੀ ਨਾਨ (None - ਇਹ 0% ਨਾਲ ਬਰਾਬਰ ਹੈ) ਵਰਤ ਸਕਦੇ ਹਨ。 |
| / A |
ਵਿਕਲਪਿਕ।ਰੰਗ ਦੇ ਆਲਫਾ ਚੈਨਲ ਦਾ ਮੁੱਲ ਦਰਸਾਉਂਦਾ ਹੈ (0% - ਪੂਰੀ ਪਾਰਦਰਸ਼ਤਾ ਤੋਂ 100% - ਪੂਰੀ ਅਪਰਾਧਰਤਾ ਤੱਕ) ਵੀ ਨਾਨ (None - ਇਹ ਆਲਫਾ ਚੈਨਲ ਨਹੀਂ ਦਿੰਦਾ) ਵਰਤ ਸਕਦੇ ਹਨ。 ਮੂਲਤਵੀ ਮੁੱਲ 100% ਹੈ。 |
ਤਕਨੀਕੀ ਵੇਰਵੇ
| ਆਈਡੀ: | CSS3 |
|---|
ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ
ਟੇਬਲ ਵਿੱਚ ਦਿੱਤੇ ਨੰਬਰ ਇਹ ਪਹਿਲੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਦੀ ਆਈਡੀ ਹਨ。
| ਚਰਮੋਨਾ | ਐਜ਼ਕ | ਫਾਇਰਫਾਕਸ | ਸਫਾਰੀ | ਓਪੇਰਾ |
|---|---|---|---|---|
| hsl() | ||||
| 1 | 9 | 1 | 3.1 | 9.5 |
| ਨਾਲ alpha ਪੈਰਾਮੀਟਰ ਦਾ hsl() | ||||
| 65 | 79 | 52 | 12.1 | 52 |
| ਸਪੇਸ ਵੱਲੋਂ ਵੰਡੇ ਪੈਰਾਮੀਟਰ | ||||
| 65 | 79 | 52 | 12.1 | 52 |
ਸਬੰਧਤ ਪੰਨੇ
ਸਿੱਖਿਆਬੋਧਨਾਂਤਰਾਂਤਰਾਂCSS HSL ਰੰਗ
ਸਲਾਹ:سی ایس ایس رنگ
ਸਲਾਹ:CSS hwb() ਫੰਕਸ਼ਨ
ਸਲਾਹ:CSS lab() ਫੰਕਸ਼ਨ
ਸਲਾਹ:CSS lch() ਫੰਕਸ਼ਨ
ਸਲਾਹ:CSS oklab() ਫੰਕਸ਼ਨ
ਸਲਾਹ:CSS oklch() ਫੰਕਸ਼ਨ
- ਪਿਛਲਾ ਪੰਨਾ CSS ਗ੍ਰੇਸਕੇਲਾਈਨ() ਫੰਕਸ਼ਨ
- ਅਗਲਾ ਪੰਨਾ CSS ਹਿਊ-ਰੋਟੇਟ() ਫੰਕਸ਼ਨ
- ਉੱਪਰੋਕਤ ਪੱਧਰ ਵਾਪਸ ਜਾਓ سی ایس ایس فنکشن مراجع تیچنر
