网络零售商的终极网站
 HTML5。 入门的教训。  W3Schools 乌克兰语

西斯

HTML HSL та HSLA Кольори


高速链路 означає hue, saturation, lightness (відтінок, насиченість і легкість).

Значення кольору HSLA є розширенням HSL з альфа-каналом (непрозорість).


HSL Значення кольору

У HTML колір можна вказати, використовуючи відтінок, насиченість та легкість (HSL) у формі:

hsl(hue, saturation, lightness)

Hue (відтінок) - це градус на колірному колі від 0 до 360. 0 - червоний, 120 - зелений і 240 - синій.

Saturation (насиченість) - це відсоткове значення, 0% означає відтінок сірого, а 100% - повний колір.

Lightness (легкість) - це також відсоткове значення, 0% - чорний, а 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%)

自己尝试一下»

Saturation / Насиченість

Насиченість можна описати як інтенсивність кольору.

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%)

自己尝试一下»

Lightness / Легкість

Легкість кольору можна описати як кількість світла, яке ви хочете надати кольору, де 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%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)

自己尝试一下»

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)

自己尝试一下»


评论