Цвет и доступность
Задайте базовый HEX, сравните правила гармонии и проверьте контраст белого текста на каждом образце.
Вычисления выполняются в этой вкладке браузера; цвета не загружаются на сервер.
Показано 5 из 5 цветов
Фирменный синий уже выбран, но цвет для фона, границ и акцентов ещё приходится подбирать вручную. Генератор цветовых палитр оставляет исходный оттенок неизменным и показывает аналоговую, комплементарную и триадную схемы. Такой подбор цветов даёт повторяемые варианты, но не выносит субъективный вердикт о красоте оформления.
Генератор цветовых палитр также раскрывает базовый цвет в девять светлых и тёмных ступеней, смешивает его со вторым цветом и показывает контрастность цветов для белого текста. После фильтра в CSS-переменные попадают только видимые образцы палитры, вся шкала и результат смешивания.
Цветовой круг предлагает сочетания, а контраст проверяет конкретный текст на фоне.
При том же HEX можно перейти от соседних оттенков к противоположному или трём равноудалённым направлениям. Генератор цветовых палитр не подменяет фирменный цвет случайным значением. Девятиступенчатая шкала также строится вокруг исходной базы, поэтому различия правил видны отдельно.
Для каждого образца показано отношение контраста с белым текстом. Фильтр 4,5:1 убирает неудачные для обычного текста варианты и из видимой палитры, и из CSS. Цветовые сочетания могут выглядеть контрастными по тону, но всё равно плохо работать как фон для букв.
Принимаются трёх- и шестизначные HEX-коды, а также системный выбор цвета. Пример начинается с #3B82F6; после короткой паузы результат обновляется автоматически. Чтобы сначала изменить несколько параметров, выключите автоматику и нажмите Ctrl либо Cmd вместе с Enter.
По умолчанию стоит спокойная аналоговая схема. Другие правила меняют углы на цветовом круге, а иногда и число образцов. Отдельное смешивание берёт второй HEX с начальной долей 50%; RGB и HSL могут дать разные промежуточные цвета.
Посмотрите отношение для белого текста и число видимых вариантов. Фильтр AA иногда оставляет ноль, не исправляя исходный цвет. Можно копировать отдельный HEX либо скачать CSS с видимой палитрой, всеми девятью ступенями и смесью.
Аналоговая, комплементарная, триадная, расщеплённая комплементарная, тетрадная и монохромная схемы выводятся из одной базы. Введённый фирменный цвет остаётся прежним.
Четыре более светлых цвета, точная база и четыре более тёмных дают варианты для фона, границ, наведения и текста. Ступени получаются числовым RGB-смешиванием с белым и чёрным.
Ползунок от 0 до 100% задаёт вклад второго цвета. RGB интерполирует каналы, HSL идёт по кратчайшей дуге тона. Результат — экранный HEX, а не прогноз для краски или чернил.
Отношение вычисляется по конечным sRGB-значениям. Можно скрыть цвета ниже 4,5:1, а при выключенном фильтре снова увидеть весь набор. Это не симулятор особенностей цветового зрения.
Блок :root можно скопировать или скачать. В нём видимая палитра, все ступени шкалы и смесь; скрытые фильтром цвета туда не добавляются.
Для начала удобна аналоговая схема: она берёт соседние тона вокруг базы. Комплементарная добавляет сильный акцент, триадная — больше направлений. Даже удачную схему затем проверяйте в реальном интерфейсе.
Это разные способы описать один экранный цвет. Здесь вводится только HEX из трёх или шести цифр; RGB и HSL доступны как модели расчёта смешивания, но текстовые значения rgb() и hsl() в поля не принимаются.
Для обычного белого текста этот инструмент применяет порог WCAG AA 4,5:1. Показанный коэффициент относится к конкретному сплошному фону, а не к всей странице или картинке.
Правила здесь дают от двух до пяти основных образцов, плюс отдельную шкалу из девяти светлых и тёмных ступеней. Распределите роли между основной, вспомогательной и акцентной краской, прежде чем добавлять новые оттенки.
Прямого экспорта в Figma или Photoshop нет. Скопируйте нужные HEX вручную, а для сайта возьмите готовые CSS-переменные. Если включён фильтр, в них попадут только видимые цвета палитры.
Остался вопрос о подборе цвета?
Генератор цветовых палитр помогает сравнить схемы, увидеть читаемость белого текста и забрать выбранные CSS-значения в проект.