Color Palette Generator
Generate color palettes
Generate color palettes Запускается локально в вашем браузере
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
Генератор цветовой палитры берет один базовый цвет и выводит из него стандартные схемы гармонии: дополнительные, аналогичные, триадные, разделенные дополнительные и тетрадные, а также плавное изменение оттенков в сторону белого и оттенков в сторону черного. Гармонии рассчитываются в HSL путем вращения оттенка при сохранении насыщенности и яркости, поэтому результаты остаются связанными с вашей базой, а не смещаются. Рампа — это та часть, которая действительно нужна большинству палитр, потому что рабочему интерфейсу требуется несколько значений одного и того же оттенка для наведения, активного и отключенного состояний, а не только один акцентный цвет.
Where people use the
- Построение палитры вокруг одного цвета бренда.
- Изготовление ховера, активного и отключенного вариантов из одного акцента.
- Изучение альтернатив цвету, который не прошел проверку контрастности.
- Создание нейтрального пандуса для поверхностей и границ.
How to use the
- 1
Выберите базовый цвет
Введите шестнадцатеричное значение, например 4ECDC4, или воспользуйтесь средством выбора. Все остальное происходит от этого одного цвета.
- 2
Читать схемы гармонии
Каждая схема представляет собой разное вращение оттенка. Дополнительный – 180 градусов, тройственный – 120 и 240 и так далее.
- 3
Возьмите рампу оттенка и оттенка
Пять оттенков белого и пять оттенков черного дают вам те состояния и возвышения, которые вам нужны в реальном интерфейсе.
- 4
Скопируйте значения
Полный список сгенерированных шестнадцатеричных значений находится в одном блоке, который можно вставить в таблицу стилей или файл токена дизайна.
- 5
Проверьте контрастность перед отправкой
Пропустите любую пару текста и фона из палитры через средство проверки контрастности. Гармонично – это не то же самое, что читабельно.
Советы и лучшие практики
- Выберите базовый цвет бренда, а затем отрегулируйте яркость только для состояний.
- Зарезервируйте дополнительный цвет для одного действия, которое вы хотите заметить.
- Всегда проверяйте контрастность окончательного соединения перед отправкой.
Часто задаваемые вопросы
В чем разница между схемами?
В дополнении используется противоположный оттенок, который дает самый сильный контраст и соответствует призыву к действию. Аналог использует соседей по 30 градусов в каждую сторону, что спокойно и безопасно. Триадный режим равномерно распределяет три оттенка, что делает его более ярким и трудным для контроля. Разделение дополнительных цветов смягчает взаимодополняющее столкновение за счет использования двух оттенков по обе стороны от противоположного. Tetradic использует четыре оттенка под прямым углом, что подходит для сложных информационных панелей.
Почему сгенерированные цвета имеют одинаковую насыщенность и яркость?
Потому что вращение только оттенка — это то, что сохраняет их узнаваемую связь. Одновременное изменение яркости дает цвета, которые выглядят несвязанными, что противоречит сути палитры.
Оттенки — это просто цвет, смешанный с белым?
Фактически да, но вычисляется в HSL путем повышения яркости при сохранении оттенка и насыщенности. Это сохраняет оттенок стабильным, тогда как наивное смешивание RGB смещается в сторону серого.
Сколько цветов должно быть в палитре?
Для большинства интерфейсов достаточно двух или трех оттенков плюс нейтральный градиент. Схему с пятью насыщенными оттенками сложно использовать последовательно, и обычно она выглядит случайной.
Проверяет ли он доступность?
Нет, он генерирует только цвета. Используйте средство проверки контрастности для любого сочетания, которое вы собираетесь использовать для текста.