Разные цвета одного тона
Несколько разных цветов одной светлоты и насыщенности. На иконках, метках, графиках и слайдах они смотрятся как один набор.
Нажмите на цвет, чтобы скопировать HEX.
Как они смотрятся вместе
- Главная
- Сообщения
- Календарь
- Файлы
- Фото
- Музыка
Код
#ea6a64
#bf9000
#4db155
#00acba
#6793fa
#c972ceПроверить свои цвета
Вставьте цвета, которые уже используете, каждый с новой строки или через пробел. Покажем, на одном ли они уровне, и дадим исправленный набор с теми же оттенками.
Вопросы и ответы
Почему цвета с одинаковой светлотой в HSL выглядят неровно?
HSL считает все оттенки одинаково, а глаз нет: жёлтый и зелёный при тех же числах HSL выглядят намного светлее синего. Этот инструмент работает в OKLCH, где одинаковая светлота и выглядит одинаково, поэтому ни одна иконка или столбик графика не выбивается.
Сколько разных цветов человек различает?
На графике или в легенде большинство быстро различает 6–8 цветов. До 12 работает, если рядом есть подписи. Если категорий больше, объедините мелкие или добавьте подписи, штриховку или значки.
Какой стиль выбрать?
Пастельные и мягкие подходят для фона меток и бейджей с тёмным текстом. Яркие и насыщенные подходят для иконок, столбиков и линий графика на белом фоне. Глубокие и тёмные подходят для плашек с белым текстом и для акцентов на тёмной теме.
Можно ли писать текст на этих цветах?
Да. В предпросмотре для каждого цвета выбран чёрный или белый текст. Светлым стилям подходит тёмный текст, глубоким белый. Для основного текста проверьте точную пару в проверке контраста.
Подходят ли цвета одного уровня людям с дальтонизмом?
Цвета одного уровня отличаются только оттенком, а это самое сложное для людей с нарушением цветового зрения. На графиках добавьте подписи или штриховку либо проверьте набор в симуляторе дальтонизма. Для иконок с подписями обычно всё в порядке.