Генератор палитры цветов

Онлайн-генератор палитры подбирает гармоничные цветовые сочетания по правилам теории цвета: комплементарные, аналоговые, триадные, тетрадные, монохромные и расщеплённо-комплементарные. Введите базовый HEX-цвет или выберите его пипеткой — получите палитру из 5 цветов в форматах HEX, RGB и HSL с возможностью копирования в один клик и экспорта в CSS, SCSS, Tailwind или JSON.

Каждый цвет можно закрепить (lock) — он останется при следующей генерации, пока остальные пересчитываются. Встроенная проверка контрастности по WCAG показывает, подходит ли пара цветов для текста на фоне с учётом стандартов AA, AA Large и AAA. Все вычисления — в браузере, ничего не отправляется на сервер.

Комплементарная — два противоположных цвета на цветовом круге (синий + оранжевый, красный + зелёный). Максимальный контраст, ярко и динамично, подходит для CTA-кнопок и акцентов. Аналоговая — 3–5 соседних цветов (зелёный + бирюзовый + голубой). Спокойная, естественная палитра, часто встречается в природе — идёт корпоративным сайтам и интерьерам.

Триадная — 3 цвета на равном расстоянии 120° друг от друга. Яркая, сбалансированная палитра для детских товаров, игр, иллюстраций. Тетрадная — 4 цвета по углам прямоугольника (две комплементарные пары). Самая сложная: один цвет основной, остальные — акценты. Монохромная — 3–5 оттенков одного цвета, разной светлоты и насыщенности. Элегантная и минималистичная, для премиум-брендов. Расщеплённо-комплементарная — базовый + два цвета по сторонам от его комплементарного: контраст мягче, чем у обычной комплементарной.

WCAG (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента. Контраст между текстом и фоном измеряется коэффициентом от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Минимальные требования: AA для обычного текста — 4,5:1, AA Large для крупного (≥18px или ≥14px жирный) — 3:1, AAA (повышенный) — 7:1.

Сайт, не проходящий WCAG AA, недоступен для людей со слабым зрением, дальтонизмом или при ярком солнечном свете на смартфоне. Генератор палитры на ToolFox автоматически считает коэффициент контраста для любой пары цветов из палитры и показывает, какие стандарты пройдены. Перед публикацией дизайна — обязательно проверьте контраст всех пар «текст на фоне».

Готовую палитру можно экспортировать в 5 форматов одним кликом. CSS — стандартные custom properties в :root, готово к подключению (--color-1: #6366F1; ...). SCSS — переменные через знак доллара ($color-1: #6366F1;). Tailwind — фрагмент конфига для tailwind.config.js (colors: { "custom-1": "#6366F1" }). JSON — структурированный объект с HEX/RGB/HSL для каждого цвета, удобно для передачи между инструментами и через API. Текст — человекочитаемый формат для документации, презентаций и переписки с клиентом.

Если нужно перенести палитру в Figma, Photoshop, Sketch или другой редактор — копируйте HEX-коды отдельных цветов прямо из карточек. Каждое значение копируется в один клик. Для Adobe Color подойдёт текстовый формат — просто вставьте список HEX в импорт.

Правило 60-30-10: 60% площади занимает основной цвет (обычно нейтральный фон), 30% — дополнительный (карточки, блоки, заголовки), 10% — акцентный (CTA-кнопки, ссылки, иконки уведомлений). Это универсальная формула, которая работает для веб-сайтов, мобильных приложений, презентаций и интерьеров.

Для веб-дизайна: не используйте больше 3–4 хроматических цветов плюс 2–3 нейтральных (белый, серый, чёрный). Тёмный фон + светлый текст или наоборот — самая надёжная пара. Акцентный цвет — для CTA-кнопок и важных уведомлений, его количество на странице должно быть минимальным, иначе он перестаёт «работать» как акцент. Дальтонизм есть у ~8% мужчин и 0,5% женщин — не передавайте критичную информацию только цветом (красный/зелёный, синий/жёлтый), всегда дополняйте иконкой или подписью.