УРОК 23 ИЗ 100

Опишите цвет с помощью hsl()

Управляйте оттенком, насыщенностью и светлотой.

Официальный источникW3C CSS Color — hsl()Проверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

hsl() отделяет оттенок от насыщенности и светлоты. Последние два компонента задаются в процентах.

Правильный пример
.accent { color: hsl(262 83% 58%); }

Оттенок 262 даёт фиолетовый, а проценты задают его интенсивность.

Частая ошибка
.accent { color: hsl(262 83 58); }

Насыщенность и светлота без процентов не образуют нужное значение.

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Задайте акценту hsl(262 83% 58%).

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • Акцент использует полное значение hsl.
  • Акцентный текст присутствует.
Объясните логику решения

Три компонента описывают один цвет в удобной для настройки форме.