CSS HSL Кольори

HSL Значення

В CSS колір можна вказати за допомогою hue, saturation, lightness (HSL) (відтінку, насиченості, яскравості) в формі:

hsl(hue, saturation, lightness)

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

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

Lightness (яскравість) також виражається в процентах, 0% - чорний, 50% - ні світлий, ні темний, 100% - білий.

Поекспериментуйте, змішуючи значення HSL нижче:

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

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

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

50% - це 50% сірого, але колір все одно видно.

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

Lightness - Яскравість

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

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

HSLA значення

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

Значення кольору HSLA вказується за допомогою:

hsla(hue, saturation, lightness, alpha)

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

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