Генератор цветовой палитры
Генерируйте шкалу оттенков и тонов, а также дополнительные, аналогичные и триадные цвета из базового цвета.
Похожие инструменты
Как использовать Цветовая палитра
- 01
Выберите базовый цвет или введите hex-значение.
- 02
Просматривайте шкалу от светлого к тёмному и гармоничные цвета.
- 03
Нажмите на любой образец, чтобы скопировать его hex-код.
Что делает этот генератор
Этот генератор цветовых палитр превращает один базовый цвет в полную шкалу от светлого к тёмному плюс комплементарные, аналоговые и триадные сочетания, где каждый образец копируется как шестнадцатеричный код одним нажатием.
Всё вычисляется в вашем браузере из введённого вами цвета, поэтому ничего не загружается на сервер.
Как строится шкала оттенков и затемнений
Шкала оттенков и затемнений сохраняет тон и насыщенность базового цвета и распределяет светлоту от светлого к тёмному, давая единообразный набор шагов. Это ровно та шкала, которую дизайн-система использует для фонов, границ, текста и состояний.
Комплементарные, аналоговые и триадные сочетания
Сочетания взяты из теории цвета и основаны на повороте тона по цветовому кругу. Комплементарное это противоположный тон для сильного контраста, аналоговое это соседние тона для спокойного цельного вида, а триадное это три равномерно расположенных тона для сбалансированного и живого набора.
Построение палитры от фирменного цвета
Вместе это даёт практичную стартовую палитру от фирменного цвета: шкалу для нейтральных тонов и затемнений и сочетания для акцентов и выделений, без подбора шестнадцатеричных кодов вручную.
Задайте базовый цвет образцом или шестнадцатеричным кодом, и палитра обновится сразу, чтобы вы могли быстро перебирать варианты.
Часто задаваемые вопросы
Как строится шкала?
Сохраняются оттенок и насыщенность базового цвета, а светлость распределяется от светлого к тёмному, давая согласованный набор тонов и оттенков, аналогично цветовой шкале дизайн-системы.
Что такое дополнительные, аналогичные и триадные цвета?
Это отношения цветовой гармонии, основанные на вращении оттенка: дополнительный -- противоположный, аналогичный -- близкий, триадный -- равномерно распределённый по кругу.
Загружается ли что-либо?
Нет. Палитра вычисляется полностью в браузере из введённого вами цвета.