Цветовой калькулятор онлайн

Представьте: вы открываете редактор и видите пустое поле. Курсор мигает. Нужно выбрать цветовую схему для сайта, презентации или баннера. С чего начать? Интуитивный подбор часто даёт дисгармоничные сочетания – цвета «спорят» друг с другом, и даже профессиональный глаз это замечает. Цветовой калькулятор решает эту проблему: он генерирует палитры по законам теории цвета и мгновенно показывает результат в любом нужном формате.

Что такое цветовой калькулятор

Цветовой калькулятор – это инструмент, который работает с цветовыми моделями и применяет правила колориметрии для создания гармоничных сочетаний. Вместо подбора наугад вы указываете базовый цвет, а калькулятор рассчитывает дополнительные оттенки по определённым алгоритмам.

Что умеет делать такой калькулятор:

• генерировать готовые палитры на основе одного цвета;
• конвертировать значение между форматами HEX, RGB, HSL, HSV;
• показывать комплементарные, аналоговые, триадные и другие сочетания;
• проверять контрастность между двумя цветами по стандартам WCAG;
• копировать код цвета в один клик.

Калькулятор работает в браузере без установки. Результат можно сразу использовать в Figma, Photoshop, VS Code или на сайте через CSS.

Цветовые модели: краткий ликбез

Прежде чем пользоваться калькулятором, полезно понимать, как кодируются цвета. Основные модели:

HEX – шестнадцатеричный код, который используется в веб-вёрстке. Формат: #RRGGBB, где каждая пара – значение красного, зелёного и синего от 00 до FF. Например, чистый красный – #FF0000, нейтральный серый – #808080.

RGB – модель с тремя каналами: красный, зелёный, синий. Значения каждого канала – от 0 до 255. rgb(255, 0, 0) – тот же красный. Прозрачность добавляет альфа-канал: rgba(255, 0, 0, 0.5).

HSL – оттенок (Hue), насыщенность (Saturation), светлота (Lightness). Удобна для интуитивного изменения цвета. Оттенок измеряется в градусах от 0 до 360: 0° – красный, 120° – зелёный, 240° – синий. Насыщенность и светлота – в процентах.

HSV – похожа на HSL, но вместо светлоты используется значение (Value). Применяется в графических редакторах вроде Photoshop.

Модель CMYK нужна для печати: голубой, пурпурный, жёлтый, ключевой чёрный. В веб-дизайне используется редко.

Типы цветовых гармоний

Цветовой круг – основа теории. Все гармоничные сочетания строятся по геометрическим принципам относительно выбранной точки.

Комплементарная гармония – противоположные цвета на круге (угол 180°). Добавляет энергию и драматизм. Пример: синий и оранжевый. Подходит для акцентов и CTA-кнопок, но в большом количестве утомляет.

Аналоговая гармония – соседние цвета (разница 30–60°). Создаёт спокойствие и единство. Пример: оттенки зелёного и бирюзового. Идеально для фонов, где не нужен резкий контраст.

Триадная гармония – три равноудалённых цвета (угол 120°). Яркая и сбалансированная. Пример: красный, жёлтый, синий – классическая триада. Требует аккуратного распределения: один цвет доминирует, два – поддерживают.

Расщеплённая комплементарная – основной цвет плюс два цвета по обе стороны от его комплемента. Меньше напряжения, чем чистая комплементарная схема, но сохраняется контраст.

Тетрадная (двойная комплементарная) – четыре цвета, образующих две пары противоположностей. Богатая палитра, сложная в балансировке. Подходит для иллюстраций и сложных интерфейсов.

Как подобрать цветовую схему для проекта

Выбор зависит от задачи и настроения, которое нужно передать.

Для корпоративного сайта подходит аналоговая или монохромная схема: она выглядит профессионально и не отвлекает. Возьмите один основной цвет и варьируйте его насыщенность и светлоту.

Для лендинга или рекламного баннера используйте комплементарную или триадную схему. Контрастные цвета привлекают внимание и работают на конверсию.

Для приложения или сервиса ориентируйтесь на стандарты доступности. Проверяйте соотношение контрастности текста и фона: минимум 4.5:1 для обычного текста по критериям WCAG AA.

Для персонального блога или портфолио можно экспериментировать. Цвет задаёт настроение: тёплые оттенки ассоциируются с дружелюбием, холодные – с надёжностью и профессионализмом.

Конвертация между форматами

Калькулятор переводит цвета из одной модели в другую мгновенно. Это экономит время при работе с кодом и дизайном.

Допустим, дизайнер отправил макет с цветом в HEX #3498DB. В CSS для полупрозрачного элемента нужен формат RGBA. Калькулятор покажет: rgba(52, 152, 219, 1). Остаётся только изменить последнее значение на нужную прозрачность.

Обратная ситуация: вы нашли вдохновляющий цвет в палитре и видите только RGB rgb(155, 89, 182). Вставляете значения – получаете HEX #9B59B6 и HSL hsl(288, 38%, 53%) для использования в любом контексте.

Практические сценарии использования

Веб-разработка. Генерируете основной цвет бренда в Figma, а в коде нужны его вариации для hover-состояний и фонов. Задайте основной цвет – получите палитру из 5–10 оттенков автоматически.

Контент-маркетинг. Создаёте инфографику или презентацию. Подберите 2–3 гармоничных цвета, которые будут считываться при печати и на экране.

Реклама. Проверяете контрастность текста на баннере. Если соотношение ниже 3:1, меняете цвет фона или текста до прохождения стандарта.

Ремонт и интерьер. Подбираете сочетание отделочных материалов, обоев, мебели. HEX-коды удобно записывать и сравнивать.

Частые ошибки при работе с цветом

Игнорирование насыщенности. Яркие цвета в большом количестве вызывают визуальный шум. Используйте один насыщенный акцент на нейтральном фоне.

Пренебрежение контрастом. Текст, который невозможно прочитать на фоне, – это потерянная аудитория. Всегда проверяйте соотношение.

Хаотичный выбор. Случайный набор цветов без опоры на теорию почти всегда даёт дисгармонию. Цветовой калькулятор убирает этот риск.

Цветовой калькулятор – это не замена чувству цвета, а инструмент, который снимает рутину и снижает вероятность ошибки. Выбираете базовый оттенок, задаёте тип гармонии – получаете готовую палитру, которую можно сразу внедрять. Для дизайнера или разработчика экономия времени ощутима: вместо подбора и проверки вручную вы получаете результат за секунды.

Информация о цветовых моделях и стандартах контрастности актуальна на 2026 год. Для критически важных проектов уточняйте требования в документации.