سی ایس ایس ایچ ایس ایل رنگ

HSL ਮੁੱਲ

ਸੀਐੱਸਐੱਸ ਵਿੱਚ, ਰੰਗ ਨੂੰ ਸ਼ਾਰਡਨ, ਸੰਤੁਲਨ ਅਤੇ ਉਜਾਲਾ (HSL) ਦੇ ਰੂਪ 'ਚ ਸੰਕੇਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਫਾਰਮੈਟ ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

hsla(hue, saturation, lightness)

ਸ਼ਾਰਡਨ (hue)ਰੰਗ ਦੀ ਚੱਕਰ 'ਤੇ 0 ਤੋਂ 360 ਦੇ ਅਕਾਰ ਹੈ।0 ਲਾਲ ਹੈ, 120 ਹੈ ਹਰੀ, 240 ਹੈ ਨੀਲਾ。

ਸੰਤੁਲਨ(saturation)ਇੱਕ ਪ੍ਰਤੀਸ਼ਤ ਮੁੱਲ ਹੈ, 0% ਗ੍ਰੇ ਸ਼ੇਡਸ ਨੂੰ ਪ੍ਰਤੀਨਿਧਤ ਕਰਦਾ ਹੈ ਅਤੇ 100% ਪੂਰੀ ਰੰਗ ਹੈ。

ਉਜਾਲਾ(lightness)ਵੀ ਪ੍ਰਤੀਸ਼ਤ ਹੈ, 0% ਕਾਲਾ ਹੈ, 50% ਨਾ ਹੀ ਉਜਾਲਾ ਨਾ ਹੀ ਗਹਿਰਾ, 100% ਸਫੇਦ ਹੈ。

ਨਿਸ਼ਚਿਤ ਹਲਕੇ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨ ਲਈ ਹੇਠ ਲਿਖੇ HSL ਮੁੱਲਾਂ ਨੂੰ ਮਿਸ਼ਰਣ ਕਰੋ:

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

实例

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)

亲自试一试

ਸੰਤੁਲਨ

ਸੰਤੁਲਨ ਨੂੰ ਰੰਗ ਦੀ ਤੀਬਰਤਾ ਵਜੋਂ ਵਰਣਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

100% ਪੂਰੀ ਰੰਗ ਹੈ, ਨਾਲ ਗ੍ਰੇ ਸ਼ੇਡਸ ਨਹੀਂ

50% 50% ਗ੍ਰੇ ਹੈ, ਪਰ ਤੁਸੀਂ ਰੰਗ ਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ。

0% ਪੂਰੀ ਗ੍ਰੇ ਹੈ, ਤੁਸੀਂ ਰੰਗ ਨੂੰ ਨਹੀਂ ਦੇਖ ਸਕਦੇ ਹੋ。

实例

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)

亲自试一试

ਉਜਾਲਾ

ਰੰਗ ਦੀ ਉਜਾਲਾ ਦਰ ਨੂੰ ਰੰਗ ਨੂੰ ਦੇਣ ਵਾਲੇ ਪ੍ਰਕਾਸ਼ ਦੀ ਮਾਤਰਾ ਦੇ ਰੂਪ 'ਚ ਵਰਣਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ; 0% ਸ਼ਾਮਲ ਹੈ ਅਤੇ ਰੰਗ ਨਾਲ ਗ਼ੈਰ ਉਜਾਲਾ (ਕਾਲਾ), 50% ਸ਼ਾਮਲ ਹੈ ਅਤੇ ਰੰਗ ਦੀ ਉਜਾਲਾ 50% (ਨਾ ਗਹਿਰਾ ਨਾ ਹੀ ਉਜਾਲਾ), 100% ਸ਼ਾਮਲ ਹੈ ਅਤੇ ਪੂਰੀ ਉਜਾਲਾ (ਸਫੇਦ) ਹੈ。

实例

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)

亲自试一试

ਆਮ ਤੌਰ 'ਤੇ ਰੰਗ ਦੇ ਟੋਨ ਅਤੇ ਸੰਤੁਲਨ ਨੂੰ 0 ਕਰਕੇ ਗ੍ਰੇ ਸ਼ੇਡਸ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਨ ਅਤੇ ਉਜਾਲਾ ਨੂੰ 0% ਤੋਂ 100% ਤੱਕ ਸੰਤੁਲਨ ਕਰਕੇ ਗ੍ਰੇ ਸ਼ੇਡਸ ਨੂੰ ਗਹਿਰਾ/ਕੇਸ਼ਿਆ ਕਰ ਸਕਦੇ ਹਾਂ:

实例

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)

亲自试一试

HSLA ਮੁੱਲ

HSLA ਰੰਗ ਮੁੱਲ ਹੈ ਆਲਫਾ ਚੈਨਲ ਵਾਲੇ HSL ਰੰਗ ਮੁੱਲ ਦਾ ਵਿਸਥਾਰ - ਇਹ ਰੰਗ ਦੀ ਅਨੁਪਰਾਣਤਾ ਨੂੰ ਸੰਕੇਤ ਕਰਦਾ ਹੈ。

HSLA ਰੰਗ ਮੁੱਲ ਨੂੰ ਸੰਕੇਤ ਕੀਤਾ ਹੈ:

hsla(hue, saturation, lightness, alpha)

alpha 参数是介于 0.0(完全透明)和 1.0(完全不透明)之间的数字:

请通过混合以下 HSLA 值进行实验:

 

HUE

0

SATURATION

100%

LIGHTNESS

50%

ALPHA

0.5

实例

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)

亲自试一试