Утилиты
Случайный цвет
Цвет и палитра для макета, обоев или настроения — одним нажатием.
Aa На этом фоне читается белый текст — контраст 5,7 : 1.
Как выбирать цвет
Случайный цвет — это не только вдохновение. Иногда нужен «просто другой» оттенок, чтобы отличить тестовые данные от боевых, подобрать фон для карточки или увидеть, как сочетание выглядит на реальном макете. Генератор выдаёт равномерно случайный цвет из 16,7 миллиона вариантов и сразу показывает его в трёх моделях.
Дальше начинается дизайн: один и тот же оттенок по-разному работает фоном, акцентом и текстом. Поэтому рядом с цветом показывается контраст — можно сразу понять, годится ли он под подпись.
HEX, RGB и HSL — в чём разница
HEX и RGB описывают одно и то же: три канала — красный, зелёный, синий — по 256
значений. Разница только в записи: #7C3AED или rgb(124, 58, 237).
Такая запись удобна для кода, но неудобна для человека: непонятно, как «сдвинуть»
оттенок, не меняя яркость.
HSL раскладывает цвет на hue (оттенок по кругу, 0–360°), saturation (насыщенность, 0–100%) и lightness (светлота, 0–100%). Здесь видно логику: чтобы получить комплементарный цвет, достаточно повернуть оттенок на 180°. Именно поэтому гармонии считаются в HSL, а не в RGB.
Гармонии и когда их применять
| Схема | Поворот оттенка | Где уместна |
|---|---|---|
| Комплементарная | 180° | кнопка на фоне, акцент в спокойном макете |
| Аналогичная | ±30° | градиенты, иллюстрации, мягкие переходы |
| Триада | 120°, 240° | три категории, равные по весу |
| Тетрада | 90°, 180°, 270° | насыщенные схемы, инфографика |
Правило 60-30-10 помогает не перегрузить макет: шестьдесят процентов площади — основной цвет, тридцать — поддерживающий, десять — акцент. Гармония даёт набор, из которого легко выбрать эти три роли.
Контраст и читаемость
Яркость цвета считается по формуле WCAG: каналы переводятся в линейное пространство,
затем складываются с весами 0,2126 для красного, 0,7152 для зелёного и 0,0722 для синего.
Контраст двух цветов — отношение (L1 + 0,05) / (L2 + 0,05), где L1 — яркость
более светлого.
Порог для обычного текста — 4,5 : 1 (уровень AA), для крупного — 3 : 1. Генератор сразу выбирает, какой текст читается лучше: белый или чёрный, — и показывает получившееся отношение. Если значение ниже 4,5, цвет годится для фона карточки, но не для подписи.
Отдельная тонкость: контраст не учитывает дальтонизм и не заменяет проверку в реальном интерфейсе. Для важных состояний дублируйте цвет иконкой или текстом.
Что делать с готовой палитрой
- скопируйте HEX-значения и вставьте в переменные темы;
- проверьте контраст текста к каждому фону, а не только к основному;
- не используйте больше двух насыщенных цветов в одном блоке;
- сохраните удачный набор — повторно его не собрать.