Кольори HTML HSL і HSLA
HSL означає відтінок, насиченість і освітленість. Значення кольорів HSLA є розширенням HSL з альфа-каналом (непрозорість)..
Значення кольорів HSL
У HTML колір можна вказати за допомогою відтінку, насиченості та освітленості (HSL) у формі:
hsl(відтінок, насиченість, освітленість)
Hue Відтінок — це градус на колірному колі від 0 до 360. 0 — червоний, 120 — зелений, 240 — синій.
Saturation Насиченість — це значення у відсотках. 0% означає відтінок сірого, а 100% повний колір.
Lightness Освітленість також є величиною у відсотках. 0% — чорний, а 100% — білий.
Експериментуйте, змішуючи наведені нижче значення HSL:
Приклад
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%, 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(відтінок, насиченість, освітленість,
альфа)
Альфа-параметр — це число від 0,0 (повністю прозорий) до 1,0 (зовсім не прозорий): Експериментуйте, змішуючи наведені нижче значення HSLA:
Приклад
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)
Google:25.02-05:08 || Bing:03.05-01:08 || Yandex:31.01-01:37