Цвет CSS HSL
- Предыдущая страница Цвет CSS HEX
- Следующая страница Фон CSS
Значение HSL
В CSS можно использовать тон, насыщенность и亮度 (HSL) для указания цвета, формат如下:
hsla(hue, saturation, lightness)
Тон (hue）является углом в градусах от 0 до 360 на цветовом круге. 0 - красный, 120 - зеленый, 240 - синий.
Насыщенность (saturation）является процентным значением, 0% означает серые тени, а 100% - полный цвет.
Яркость (lightness）также являются процентами, 0% является черным, 50% является нейтральным, 100% является белым.
Пожалуйста, проведите эксперимент, комбинируя следующие значения HSL:
HUE
SATURATION
LIGHTNESS
Пример
Насыщенность
Насыщенность может быть описана как сила цвета.
100% является чистым цветом, без серых теней
50% является 50% серым, но вы все еще можете видеть цвет.
0% является полностью серым, и вы не можете видеть цвет.
Пример
Яркость
Яркость цвета может быть описана как сколько света нужно дать цвету, где 0% означает неяркий (черный), 50% означает 50% яркости (ни тёмный, ни яркий), 100% означает полный свет (белый).
Пример
Обычно, устанавливая тон и насыщенность в 0, можно определить серые тени, и можно отрегулировать亮度 от 0% до 100%, чтобы получить более глубокие/более светлые тени:
Пример
Значение HSLA
Цветовая стоимость HSLA является расширением цветовой стоимости HSL с Alpha-каналом - она указывает на непрозрачность цвета.
Цветовая стоимость HSLA указана как:
hsla(hue, saturation, lightness, alpha)
alpha Параметры - это числа между 0.0 (полностью прозрачный) и 1.0 (некотороementо непрозрачный):
Экспериментируйте с mixing следующих значений HSLA:
HUE
SATURATION
LIGHTNESS
ALPHA
Пример
- Предыдущая страница Цвет CSS HEX
- Следующая страница Фон CSS
