Генератор палитр
Нажимайте пробел - получайте новую палитру. Закрепляйте понравившиеся цвета, проверяйте контраст и забирайте код для сайта.
Наведите на цвет: замок закрепляет его, точки - перетащить, «+» - добавить цвет рядом. Нажмите на код цвета, чтобы изменить его.Кнопки у каждого цвета: закрепить, копировать, оттенки, удалить. Нажмите на код цвета, чтобы изменить его.
Контраст
Пары цветов палитры по WCAG: AA - обычный текст, AAA - лучший вариант.
Экспорт
Готовые палитры
Быстрые проверки: Фавикон · SEO-превью · Магазин конкурента · Генератор палитр
Как пользоваться
Каждое нажатие пробела даёт новую палитру. Понравился цвет - закрепите его замком, и следующие палитры будут подбираться к нему. Нажмите на код цвета, чтобы поправить яркость, насыщенность и оттенок или ввести свой HEX. Кнопка с полосками показывает светлые и тёмные оттенки цвета - удобно, когда нужен фон или цвет для наведения. Цвета можно перетаскивать, добавлять между соседними и удалять, от 2 до 10.
Палитра из фото и готовый код
Загрузите фото или вставьте его из буфера - инструмент найдёт в нём главные цвета. Готовую палитру можно скопировать как CSS-переменные, SCSS, конфиг Tailwind или JSON, скачать картинкой PNG или SVG, сохранить в профиле или открыть в «Градиенте из фото» и сделать из неё фон. Адрес страницы всегда содержит текущую палитру - им можно просто поделиться.
Частые вопросы
Не нашли ответ - напишите нам, подскажем.
Нажмите пробел или кнопку «Сгенерировать». Понравившиеся цвета закрепите замком - при следующей генерации они останутся, а остальные подберутся к ним в выбранной гармонии.
Аналоговая - соседние оттенки, спокойно и мягко. Монохромная - один оттенок разной яркости. Комплементарная - противоположные цвета, самый яркий контраст. Раздельно-комплементарная, триада и тетрада - 3-4 оттенка, равномерно разнесённых по кругу. «Авто» каждый раз выбирает одну из них.
В этом пространстве одинаковые числа яркости выглядят одинаково светлыми для глаза, поэтому в палитре всегда есть светлые и тёмные цвета, а насыщенность не «прыгает» между оттенками, как в HSL.
В блоке «Контраст» показаны пары цветов из палитры и их контраст по WCAG: от 4.5:1 - обычный текст (AA), от 7:1 - AAA, от 3:1 - только крупные заголовки. Цвет подписи в каждой колонке подбирается автоматически.
Примерно каждый двенадцатый мужчина различает цвета иначе. Включите симуляцию протанопии, дейтеранопии, тританопии или монохромного зрения и проверьте, что важные цвета палитры не сливаются.
Да, без ограничений. Палитры генерируются у вас в браузере, а набор цветов не охраняется авторским правом.