Цвета, которые уже дружат
Нажмите пробел, чтобы получить палитру из 5, 8 или 10 цветов. Закрепите удачные, остальные подстроятся.
Пробел новая палитра · замочек блокирует цвет · клик по коду копирует цвет · Aa примеры текста
Всё, что нужно для цвета в проекте
Градиент из вашей палитры
Каждая палитра сразу превращается в плавный градиент. Нажмите на него, чтобы увеличить и посмотреть примеры текста и цифр.
Проверка контраста
Самый тёмный и самый светлый цвета палитры по стандарту WCAG.
Закрепление
Нашли свой цвет? Закрепите его замочком, и остальные подберутся вокруг.
От 5 до 10 цветов
Хватит и для интерфейса, и для иллюстраций, и для графиков.
Готовые наборы
Нажмите на градиент, чтобы скопировать его CSS, или на любой цвет, чтобы скопировать HEX. Кнопка «Применить» загрузит набор в генератор.
Журнал
Как выбрать цвет текста на градиенте
На градиенте контраст меняется от края к краю, поэтому проверять нужно худший участок, а не середину. Откройте градиент в увеличенном виде, примерьте белый и чёрный текст и посмотрите на минимальный контраст. Если он ниже 4.5:1, добавьте под текст полупрозрачную подложку или сдвиньте текст на более спокойную часть фона.
Почему один и тот же акцент по-разному выглядит на экранах
У мониторов разный охват цветов, яркость и цветовой профиль по умолчанию. Проверяйте акцентный цвет на телефоне, ноутбуке и внешнем мониторе и держите запас по контрасту, чтобы небольшие отличия не ломали читаемость.
Нейтральный цвет, который не выглядит серым
Чистый серый плохо соседствует с насыщенными цветами. Сдвиньте нейтральный оттенок в сторону основного тона, достаточно нескольких процентов насыщенности, и вся палитра станет цельнее.
Как собрать градиент без грязной середины
Грязные оттенки появляются, когда соседние цвета слишком далеко по тону. Добавьте промежуточную точку или интерполируйте в пространстве OKLab, тогда переход получается чистым и ярким.