Генератор цветовых палитр
Генератор Colorage собирает палитру в браузере: от двух до десяти цветов для сайта, интерфейса, презентации и графики. Сочетание строится в OKLCH, поэтому соседние оттенки остаются ровными по светлоте. Готовый набор можно скопировать по HEX, поправить вручную, сохранить, отдать по ссылке и выгрузить файлом.
Зачем эта страница
Это рабочее место, а не справочник. Страница нужна, когда уже есть задача: подобрать фон и акцент для экрана, собрать цвета бренда, сравнить несколько гармоний и забрать коды в макет. При открытии генератор сразу показывает набор из пяти цветов и не требует регистрации.
Каталог палитр хранит готовые подборки. Здесь сочетание собирается заново под схему, температуру, тон и насыщенность. Один именованный оттенок с конвертацией лежит в каталоге цветов, а не в генераторе.
Как устроена палитра на экране
Цвета стоят колонками: на широком экране в ряд, на узком — столбиком. В наборе может быть от двух до десяти цветов. Новый цвет добавляется между колонками, лишний удаляется. Колонки перетаскиваются, чтобы сменить порядок.
У каждого цвета есть копирование HEX. Клик по коду открывает настройку именно этого оттенка: тон, насыщенность и яркость меняются отдельно, остальные колонки остаются на месте. Иконка информации открывает карточку цвета с названием и значениями. Отдельный цвет и всю палитру можно сохранить в аккаунт. Кнопки назад и вперёд возвращают предыдущие наборы в текущем сеансе.
Схемы сочетания
Тип палитры задаёт, как оттенки относятся друг к другу. Число колонок при этом не меняется: схема заполняет уже выбранный размер набора.
- Случайная собирает свободный набор без жёсткой гармонии.
- Монохромная держится одного оттенка и меняет светлоту.
- Аналоговая берёт соседние сектора цветового круга.
- Комплементарная ставит цвет напротив базового.
- Раздельно-комплементарная заменяет прямую противоположность двумя оттенками рядом с ней.
- Триадная раскладывает три оттенка через равные промежутки.
Фильтры генерации
Фильтры сужают результат и сочетаются со схемой. Их можно снять и оставить только тип палитры.
- Основной оттенок: красный, оранжевый, коричневый, жёлтый, зелёный, бирюзовый, голубой, фиолетовый, розовый, серый, чёрный или белый.
- Температура: тёплая или холодная.
- Тон: светлый, средний или тёмный.
- Насыщенность: пастельная или яркая.
Как собрать палитру
- Откройте генератор. На экране уже есть стартовый набор из пяти цветов. Адрес этой страницы остаётся /palettes/generator.
- Задайте условия. В настройках выберите схему, основной оттенок, температуру, тон и насыщенность. Случайная и монохромная схемы доступны сразу. Аналоговая, комплементарная, раздельно-комплементарная и триадная открываются в расширенном режиме.
- Сгенерируйте набор. Кнопка генерации заменяет цвета новым сочетанием того же размера. Отдельные колонки при этом не закрепляются.
- Поправьте результат. Сдвиньте оттенок в окне настройки, поменяйте порядок перетаскиванием, добавьте колонку или уберите лишнюю. Минимум — два цвета, максимум — десять.
- Заберите палитру. Скопируйте HEX, сохраните набор в аккаунт или откройте экспорт.
Экспорт и ссылка
Экспорт отдаёт ссылку на это сочетание, файл стилей palette.scss с переменными HEX, HSL и градиентами, картинку PNG, файл SVG и лист PDF. Ссылка, стили и PNG доступны сразу. SVG и PDF открываются в расширенном режиме.
В ссылке записаны HEX-коды палитры, поэтому тот же набор открывается у другого человека уже в генераторе: его можно править, копировать и выгружать заново. Контраст текста и фона считается на отдельной странице проверки контраста. Как набор выглядит на макете, показывает визуализация.
Часто задаваемые вопросы
Сколько цветов может быть в палитре?
От двух до десяти. При первом открытии генератор показывает пять цветов. Новую колонку добавляют между существующими, лишнюю удаляют. Схема генерации заполняет текущее число колонок и сама его не меняет.
Какие схемы сочетания есть в генераторе?
Случайная, монохромная, аналоговая, комплементарная, раздельно-комплементарная и триадная. Случайная и монохромная доступны сразу. Четыре схемы гармонии открываются в расширенном режиме. Дополнительно можно задать основной оттенок, тёплую или холодную температуру, светлый, средний или тёмный тон и пастельную или яркую насыщенность.
Можно ли оставить часть цветов и обновить остальные?
Нет. Генерация заменяет весь набор. Отдельный цвет правят в его окне настройки: меняются тон, насыщенность и яркость, соседние колонки не трогаются. Порядок меняется перетаскиванием.
Как скопировать HEX и поделиться палитрой?
HEX копируется с колонки цвета. В экспорте есть ссылка на этот набор: по ней палитра открывается в генераторе с теми же кодами. Туда же выгружаются файл стилей, картинка PNG, SVG и PDF.
Чем генератор отличается от каталога палитр?
Каталог показывает готовые подборки с поиском и фильтрами. Генератор собирает новое сочетание и даёт его править: менять размер, порядок, отдельные оттенки, затем сохранить или выгрузить. Готовую палитру из каталога можно открыть здесь и доработать.
Как проверить, читается ли текст на этих цветах?
В самом генераторе контраст не считается. Пара «текст и фон» проверяется на странице контраста: там видно отношение яркости и уровни AA и AAA. На макете интерфейса, бренда или типографики тот же набор открывается в визуализации.