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

Генерируйте палитры из одного исходного цвета

Полезный генератор палитр превращает один цвет в небольшой набор родственных вариантов, которые можно по-настоящему проверить в дизайне. Вместо случайных образцов этот инструмент использует классические соотношения цветового круга и изменения яркости в HSL. Выберите базовый цвет, выберите гармонию — и палитра мгновенно обновится со значениями HEX, которые можно скопировать. Это достаточно быстро для поиска идей и достаточно предсказуемо, чтобы после доработки задокументировать результат как дизайн-токены.

Генератор работает полностью в вашем браузере, поэтому безопасен для неопубликованных фирменных цветов, мудбордов клиентов и внутренних тем продуктов. Никаких загрузок, аккаунтов и внешних сервисов палитр. Вычисления детерминированы: один и тот же базовый цвет и гармония дают одни и те же образцы, так что к палитре легко вернуться позже или сравнить несколько направлений во время дизайн-ревью.

Выбор подходящей гармонии

Комплементарные палитры сочетают цвет с противоположным оттенком на цветовом круге. Они создают сильный контраст и полезны для призывов к действию, диаграмм или акцентов, которые должны выделяться. Аналоговые палитры используют соседние оттенки, которые обычно выглядят спокойнее и целостнее; они хорошо подходят для фонов, иллюстраций и более мягких тем продуктов. Триадные палитры равномерно распределяют оттенки по кругу, давая разнообразие без опоры на один доминирующий противоположный цвет. Монохромные палитры сохраняют неизменный оттенок и меняют яркость, что идеально для состояний интерфейса, карточек, границ и неброских поверхностей.

От сгенерированных цветов к рабочей дизайн-системе

Сгенерированные палитры — это отправная точка, а не замена тестированию. Скопируйте цвета в свой реальный интерфейс и проверьте, как они ведут себя с текстом, иконками, тенями и соседними поверхностями. Некоторые цвета, выглядящие сбалансированно как образцы, могут казаться слишком яркими на больших областях или слишком слабыми на мелких элементах управления. Выбрав направление, воспользуйтесь проверкой контраста для читаемого текста и подумайте о том, чтобы называть итоговые цвета по назначению — основной, акцентный, поверхность или предупреждение, — а не только по оттенку. Названия по назначению упрощают будущие редизайны, потому что код передаёт замысел.