RGB
в HSL
HSL описывает цвет тремя понятными величинами — тоном, насыщенностью и светлотой. Это тот же цвет, что и в RGB, но управлять им становится легче: чтобы затемнить кнопку при наведении, достаточно поправить одно число.
- HEX#4F8EF7
- RGBrgb(79, 142, 247)
- RGBArgba(79, 142, 247, 1)
- HSLhsl(218, 91%, 64%)
- HSBhsv(218, 68%, 97%)
- CMYKcmyk(68%, 43%, 0%, 3%)
- LABlab(59.64 13.2 -58.51)
- DEC5213943
Тон и насыщенность сохранены, меняется только светлота. Нажмите на образец, чтобы сделать его основным.
| На белом фоне | 3.21 : 1 | только крупный |
| На чёрном фоне | 6.54 : 1 | ✓ AA |
Для обычного текста стандарт требует контраст не ниже 4,5 : 1, для крупного — от 3 : 1.
Популярные цвета в HSL
33 именованных оттенка — тон, насыщенность и светлота каждого
- Красный red hsl(0, 100%, 50%)
- Тёмно-красный darkred hsl(0, 100%, 27%)
- Малиновый crimson hsl(348, 83%, 47%)
- Коралловый coral hsl(16, 100%, 66%)
- Оранжевый orange hsl(39, 100%, 50%)
- Золотой gold hsl(51, 100%, 50%)
- Жёлтый yellow hsl(60, 100%, 50%)
- Хаки khaki hsl(54, 77%, 75%)
- Лаймовый lime hsl(120, 100%, 50%)
- Зелёный green hsl(120, 100%, 25%)
- Тёмно-зелёный darkgreen hsl(120, 100%, 20%)
- Оливковый olive hsl(60, 100%, 25%)
- Бирюзовый turquoise hsl(174, 72%, 56%)
- Аквамарин aquamarine hsl(160, 100%, 75%)
- Циан cyan hsl(180, 100%, 50%)
- Небесно-голубой skyblue hsl(197, 71%, 73%)
- Синий blue hsl(240, 100%, 50%)
- Тёмно-синий darkblue hsl(240, 100%, 27%)
- Королевский синий royalblue hsl(225, 73%, 57%)
- Индиго indigo hsl(275, 100%, 25%)
- Сине-фиолетовый blueviolet hsl(271, 76%, 53%)
- Пурпурный purple hsl(300, 100%, 25%)
- Маджента magenta hsl(300, 100%, 50%)
- Ярко-розовый hotpink hsl(330, 100%, 71%)
- Розовый pink hsl(350, 100%, 88%)
- Коричневый brown hsl(0, 59%, 41%)
- Шоколадный chocolate hsl(25, 75%, 47%)
- Бежевый beige hsl(60, 56%, 91%)
- Белый white hsl(0, 0%, 100%)
- Дымчато-белый whitesmoke hsl(0, 0%, 96%)
- Шиферно-серый slategray hsl(210, 13%, 50%)
- Серый gray hsl(0, 0%, 50%)
- Чёрный black hsl(0, 0%, 0%)
Три величины, которые понятны на глаз
Тон — положение на цветовом круге в градусах: ноль это красный, 120 зелёный, 240 синий. Насыщенность показывает, насколько цвет далёк от серого: сто процентов даёт чистый оттенок, ноль — серый той же светлоты. Светлота ведёт от чёрного через чистый цвет к белому, причём чистый цвет находится ровно посередине, на пятидесяти процентах.
Отсюда и практическая польза. Чтобы получить состояние кнопки при наведении, достаточно уменьшить светлоту на десять процентов, не трогая остальное. В RGB для того же пришлось бы пересчитывать все три канала, и цвет мог бы поехать по тону. По той же причине в HSL удобно строить палитры: берёте один тон и меняете две другие величины.
- 0° — красный
- 60° — жёлтый
- 120° — зелёный
- 180° — циан
- 240° — синий
- 300° — маджента