Оттенки и тона
Построить полную шкалу из одного цвета, от светлого к тёмному.
Светлые — с примесью белого
Тёмные — с примесью чёрного
Приглушённые — с примесью серого
Одного фирменного цвета всегда мало: нужен светлее для фона, темнее для наведения и приглушённый для границы. Здесь сразу три семейства. Светлые смешаны с белым, тёмные с чёрным, приглушённые с серым, и любой шаг копируется одним щелчком.
Как пользоваться
- Введите свой цвет.
- Просмотрите три шкалы.
- Щёлкните по образцу, чтобы скопировать hex.
Почему этот инструмент
Полная конфиденциальность
Всё работает внутри браузера. Ваши файлы и текст никогда не отправляются на сервер.
Бесплатно и без ограничений
Без регистрации, без водяных знаков и без лимита на количество использований.
Мгновенный результат
Не нужно ничего загружать и ждать очереди — результат появляется так быстро, как позволяет ваше устройство.
Работает на любом устройстве
Любой современный браузер на телефоне, планшете или компьютере. Ничего устанавливать не нужно.
Частые вопросы
- Чем отличаются светлый, тёмный и приглушённый?
- Светлый добавляет белый. Тёмный добавляет чёрный. Приглушённый добавляет серый: цвет становится спокойнее, не становясь заметно светлее или темнее — часто именно это нужно границе или неактивному состоянию.
- Годятся ли они как готовая шкала для дизайна?
- Это хорошая отправная точка, и шаги равномерны по построению. Для настоящей интерфейсной шкалы проверьте те ступени, на которых будет текст, в проверке контраста: равномерность и читаемость — не одно и то же.
- Почему некоторые шаги выглядят ближе друг к другу?
- Потому что глаз нелинеен. Равные доли примеси не дают одинаково различимых цветов, особенно ближе к белому, где небольшие изменения плохо заметны.
Похожие инструменты
Смешивание цветов
Смешайте два цвета в любой пропорции и скопируйте результат в hex. Всё считается в браузере, ничего никуда не отправляется.
Генератор палитры
Пять сочетающихся цветов. Закрепите удачные, остальные — заново.
Генератор CSS-градиентов
Собрать градиент, который не сереет в середине.
Подбор цвета
Один цвет, все коды и то, с чем он сочетается.
Проверка контраста
Проверить, читается ли текст на своём фоне.
Цвет с изображения
Взять любой цвет с картинки или сразу всю палитру.
Чёрно-белое фото
Сделать картинку чёрно-белой или настроить яркость и контраст.