Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

HTML Учебники


HTML Формы


HTML Графика


HTML Медиа


HTML API Интерфейсы


HTML Примеры


HTML Ссылки



HTML HSL и HSLA Цвет



HSL означает оттенок, насыщенность и яркость.

Значения цвета 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%)

Попробуйте сами »

Насыщенность цвета

Насыщенность можно описать как интенсивность цвета.

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(hue, saturation, lightness, 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)

Попробуйте сами »


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.