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

HSL означає 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 нижче:

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

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

100% - це чистий колір, без відтінків сірого.

50% - це 50% сірого, але ви все одно можете бачити колір.

0% - повністю сірий, колір ви більше не бачите.

Lightness / Легкість

Легкість кольору можна описати як кількість світла, яке ви хочете надати кольору, де 0% означає відсутність світла (чорний), 50% означає 50% світла (ні темний, ні світлий), 100% означає повну світлоту (білий колір).

Відтінки сірого

Відтінки сірого часто визначають, встановлюючи для відтінку та насиченості значення 0, і регулюйте яскравість від 0% до 100%, щоб отримати темні / світлі відтінки:

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

Значення кольору HSLA - це розширення значень кольору HSL за допомогою альфа-каналу, що визначає непрозорість кольору.

Значення кольору HSLA вказано з:

hsla(hue, saturation, lightness, alpha)

Параметр alpha - це число від 0,0 (повністю прозоре) до 1,0 (зовсім не прозоре):

Експериментуйте, змішуючи наведені нижче значення HSLA: