Бесплатный инструмент
Один цвет,
целая палитра
Введите цвет вашего бренда. Инструмент построит из него шкалу из 11 оттенков, покажет, где работает каждый из них и годится ли он для текста. Код копируется одной кнопкой.
Ваша палитра
Нажмите на оттенок, чтобы скопировать код. 500 это ваш основной цвет.
Фон
Рамка, иконка
Кнопка
Наведение, нажатие
Текст
Контраст измеряется по WCAG: не меньше 4,5:1 для обычного текста, 3:1 для крупного текста и иконок.
Как это выглядит на сайте
Пример собран только из этой шкалы. В тёмной теме шкала читается наоборот: 50 меняется местами с 950, 100 с 900.
Летняя распродажа началась
Скидки на избранные товары действуют до конца недели.
Бесплатная доставка по городу.
Летняя распродажа началась
Скидки на избранные товары действуют до конца недели.
Бесплатная доставка по городу.
Тот же цвет, смешанный с белым и чёрным
Частый способ: для светлых оттенков добавить белый, для тёмных чёрный. Светлые выходят блёклыми, тёмные грязными. Шкала выше сохраняет живость цвета благодаря расчёту в OKLCH.
Этот инструмент
С белым и чёрным
Забрать код
:root {
--brand-50: #f2f0ff;
--brand-100: #e1ddff;
--brand-200: #cac3ff;
--brand-300: #ab9eff;
--brand-400: #8066ff;
--brand-500: #5f1fff;
--brand-600: #5000df;
--brand-700: #4300be;
--brand-800: #36009e;
--brand-900: #2c0085;
--brand-950: #1a0356;
}Работа с палитрой
Каждый оттенок на своём месте
Шкала это набор готовых решений. Вместо того чтобы каждый раз подбирать цвет на глаз, вы даёте каждой задаче свой оттенок, и весь сайт выглядит как одна семья.
Самые светлые оттенки: фон
Разделы, карточки, блоки уведомлений. Не утомляют глаз, но цвет бренда в них чувствуется.
Светлые и средние: рамки и иконки
Линии, рамки, иконки. Не используйте их для обычного текста на белом: контраста не хватит.
Основной оттенок: кнопки
Кнопки, ссылки, акценты. Один оттенок на всём сайте, и посетитель быстро понимает, что можно нажать.
На шаг-два темнее: наведение и нажатие
При наведении кнопка темнеет на один шаг, при нажатии ещё на один. Придумывать новый цвет не нужно.
Самые тёмные: текст
Заголовки и текст. Тёмный оттенок бренда вместо обычного серого делает и текст частью цветовой семьи.
Для начала хватит трёх шкал
- Шкала бренда: кнопки, ссылки, акценты
- Серая шкала: текст, рамки, фон
- Цвета статусов: успех, предупреждение, ошибка, информация
- Для тёмной темы новых цветов не нужно: та же шкала наоборот
Упорядоченный список цветов сайта. У каждого цвета несколько оттенков, и у каждого оттенка своя задача: фон, кнопка, текст. Так на сайте не остаётся случайных цветов.
11 ступеней от 50 до 950 это стандарт Tailwind CSS и многих дизайн-систем. Шаг между ступенями небольшой, поэтому легко найти оттенок с нужным контрастом между текстом и фоном.
Основной цвет это середина шкалы: светлые оттенки рассчитываются от него к белому, тёмные к чёрному. Если ваш цвет очень светлый или очень тёмный, инструмент предупредит: такой цвет лучше использовать для фона или текста, а для кнопок взять другой оттенок.
Это разница яркости между текстом и фоном. По WCAG для обычного текста нужно не меньше 4,5:1, для крупного текста и иконок не меньше 3:1. Инструмент измеряет каждый оттенок на белом и тёмном фоне и пишет, для чего он годится.
С белым цвет становится блёклым, с чёрным грязным и сероватым. Инструмент работает в цветовой модели OKLCH: меняет светлоту, а насыщенность рассчитывает отдельно для каждой ступени.
Переменные CSS подходят для любого сайта, код Tailwind для проектов на Tailwind CSS, JSON для плагинов Figma и других инструментов. Скопируйте его и вставьте в проект.
Следующий шаг
Обсудим ваш проект!
