Генератор аналоговых цветов
Выберите базовый цвет и угловой интервал. Инструмент покажет базовый оттенок и по одному соседнему с каждой стороны на выбранном расстоянии, классическую аналоговую тройку, а также добавит два внешних оттенка на удвоенном расстоянии, чтобы получить расширенную палитру из пяти цветов. Аналоговые палитры относятся к самым гармоничным классическим схемам, поскольку близкие оттенки имеют общий доминирующий подтон. Поэтому они часто встречаются в природе (закаты, леса) и редакционном дизайне.
Как собрать аналоговую палитру
-
1
Выберите базовый цвет
Вставьте hex-код, триплет RGB или значение HSL. Насыщенные средние тона дают самые выразительные аналоговые наборы.
-
2
Выберите угол смещения
30°: классический шаг для аналоговой схемы. 15° дает более тесный, почти монохромный набор; 45° уже приближается к сплит-комплементарной схеме.
-
3
Настройте вариацию светлоты
При желании изменяйте светлоту у трех оттенков, чтобы палитра не была плоской. Осветление двух боковых цветов делает результат мягче и ближе к редакционному стилю.
-
4
Экспортируйте цвета
Скопируйте hex, RGB или HSL. Это удобно для CSS-переменных, стилей Figma или печатных спецификаций.
Классические цветовые схемы и аналоговая схема
| Схема | Угловое отношение | Характер |
|---|---|---|
| Монохромная | 0° (тот же тон, разные светлота/насыщенность) | Спокойная, цельная |
| Аналоговая | 30° по обе стороны | Гармоничная, естественная |
| Комплементарная | 180° друг от друга | Высокий контраст, напряжение |
| Сплит-комплементарная | База + 2 оттенка рядом с комплементом | Контраст с нюансом |
| Триадная | 120° друг от друга | Сбалансированная, яркая |
| Тетрадная | Две комплементарные пары | Богатая, сложная |
Примеры аналоговых палитр из природы
- Закат: желтый → оранжевый → красно-оранжевый (шаги 30° в теплую сторону).
- Лес: желто-зеленый → зеленый → сине-зеленый.
- Океан: сине-зеленый → синий → сине-фиолетовый.
- Осень: красно-оранжевый → оранжевый → желто-оранжевый.
Дизайн с аналоговым набором
- Выберите один цвет как доминирующий (60% площади), второй используйте как акцент (30%), а третий как выделение (10%), правило “60-30-10”.
- Сочетайте аналоговые цвета с нейтральным (белым, черным, теплым серым) для основного текста и UI-элементов.
- Не используйте три аналоговых цвета с одинаковой насыщенностью на больших блоках, получится мутно. Меняйте светлоту или насыщенность между боковыми цветами и базой.
Цветовые пространства и математика угла
Смещение 30° считается в пространстве оттенка HSL или HSV, где оттенок трактуется как угол (0-360°). Операции цветового круга в RGB не работают: нужно перевести цвет в HSL, повернуть оттенок и перевести обратно. Именно это инструмент делает внутри. Вывод в трех нотациях нужен потому, что CSS, дизайн-инструменты и печатные процессы предпочитают разные форматы.
Часто задаваемые вопросы
Монохромная использует один оттенок с разной светлотой и насыщенностью (тёмно-синий, синий, голубой). Аналоговая использует три разных оттенка, соседних на круге (сине-зелёный, синий, сине-фиолетовый). В аналоговой палитре больше визуального разнообразия.
У аналоговых цветов могут пересекаться смеси CMYK-красок, из-за чего на печати падает контраст. Проверьте версии с экранной цветопробой (soft-proof) и для печатных работ попробуйте увеличить расстояние с 30° до 40°.
Да, но оставьте один из трех цветов доминирующим брендовым цветом, а два других переведите во вспомогательные роли (значки, акценты). Если использовать все три для основных действий интерфейса, возникнет путаница: пользователи привыкают связывать один цвет с главным призывом к действию.
Три цвета в центре образуют классическую аналоговую схему: базовый оттенок и два соседних на выбранном угловом расстоянии. Два внешних цвета расположены на удвоенном расстоянии и служат дополнительными вариантами для расширения палитры. При стандартном интервале 30° центральная тройка находится на ±30°, а внешняя пара, на ±60°.
Сопутствующие инструменты
Генератор случайных цветовых палитр
Создавайте случайные палитры из 2–15 цветов, выбирайте яркий, пастельный, приглушенный или темный стиль и копируйте HEX-коды или CSS-переменные.
Конвертер BBCode в HTML
Преобразуйте BBCode (разметку форумов) в чистый HTML. Поддерживает теги форматирования, списки, цитаты, код, изображения, ссылки и таблицы.
Выбор цвета HEX
Выберите цвет визуально и получите значения HEX, RGB, HSL, HSV и CMYK, а также контраст на белом и чёрном фоне.
Конвертер двоичного кода в ASCII
Вставьте двоичный код (байты через пробел или длинный поток битов) и получите текст ASCII, который он представляет. Поддерживает 7-битные и 8-битные кодировки.
Генератор цветовой палитры
Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.
Конвертер ASCII в Hex
Переводите ASCII text в hexadecimal byte values. Вывод использует две hex digits на символ и готов для memory dumps, packet traces или firmware tables.