Подбор цветов и палитр онлайн, проверка контраста — lavarden.ru
Войти
Инструменты

Подбор цветов и палитр

Постройте палитру от одного цвета по цветовому кругу или достаньте её из фотографии, проверьте, читается ли текст на фоне, и посмотрите, как палитру увидят люди с дальтонизмом. Всё считается прямо в браузере.

Нажмите на код цвета, чтобы скопировать его. Замок оставляет цвет на месте при новой генерации. Пробел — новая палитра.

Схема

Палитра из фото

Загрузите картинку — инструмент найдёт пять главных цветов. Файл не покидает ваш компьютер.

Экспорт

Как это работает

Цветовые схемы строятся по цветовому кругу: основной цвет переводится в модель HSL (оттенок, насыщенность, светлота), и от его оттенка откладываются нужные углы — 180° для комплементарной пары, ±30° для аналоговой, 120° для триады, 90° для тетрады. Монохромная схема меняет только светлоту. Чтобы палитра не выглядела «кислотной», насыщенность и светлота производных цветов слегка варьируются.

Палитра из фото: картинка уменьшается, её пиксели группируются по сходству цвета (метод k-средних), и пять самых крупных групп становятся палитрой. Контраст считается по формуле стандарта доступности WCAG 2: из каждого цвета вычисляется относительная яркость, и их отношение показывает, насколько текст отличается от фона. Симуляция дальтонизма использует научные матрицы Machado, Oliveira и Fernandes (2009) для полной формы протанопии, дейтеранопии и тританопии, а также переводит цвета в оттенки серого для монохромного зрения.

Про сами названия цветов — откуда взялись «бирюзовый», «бордовый» и «маренго» — читайте в статье журнала «Названия цветов».

Частые вопросы

Как подобрать цвета, которые сочетаются?

Возьмите один цвет, который вам нравится, и постройте от него схему по цветовому кругу. Комплементарная пара (противоположные цвета) даёт самый яркий контраст, аналоговая (соседние цвета) — спокойную и гармоничную палитру, триада — яркую, но сбалансированную. Главный цвет обычно занимает большую часть площади, остальные — акценты.

Что такое контраст по WCAG и какой нужен?

Это отношение яркостей текста и фона — от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Стандарт доступности WCAG требует для обычного текста не меньше 4,5:1 (уровень AA) или 7:1 (AAA), для крупного текста — 3:1 и 4,5:1. При меньшем контрасте текст тяжело читать людям со слабым зрением, на ярком солнце и на плохих экранах.

Зачем проверять палитру на дальтонизм?

Нарушения цветовосприятия встречаются примерно у 8% мужчин и 0,5% женщин. Чаще всего путаются красный и зелёный. Если график, кнопки или статусы различаются только цветом, часть людей их не различит. Симуляция показывает, какие цвета палитры сливаются, — их стоит развести по яркости или добавить подписи и значки.

Отправляются ли мои фото на сервер?

Нет. Все расчёты, извлечение цветов из картинки и симуляция дальтонизма выполняются прямо в браузере, файл никуда не загружается.