Инструменты для цвета
Подбирайте цвета, собирайте палитры и градиенты, смешивайте оттенки и проверяйте контраст и дальтонизм. Бесплатно, всё в браузере, ставить ничего не нужно.
Все инструменты (9)
Проверка контраста
Проверить, читается ли текст на своём фоне.
Генератор CSS-градиентов
Собрать градиент, который не сереет в середине.
Оттенки и тона
Построить полную шкалу из одного цвета, от светлого к тёмному.
Смешивание цветов
Смешайте два цвета в любой пропорции и скопируйте результат в hex. Всё считается в браузере, ничего никуда не отправляется.
Симулятор дальтонизма
Увидеть цвет так, как его видит примерно каждый двенадцатый мужчина.
Цветовые палитры
Палитры, которые хочется забрать, разложенные по настроению.
Генератор палитры
Пять сочетающихся цветов. Закрепите удачные, остальные — заново.
Подбор цвета
Один цвет, все коды и то, с чем он сочетается.
Цвет с изображения
Взять любой цвет с картинки или сразу всю палитру.
Подробнее об этих инструментах
Подбирать цвета на глаз получается ровно до момента, когда их нужно пять и они должны выглядеть набором. Эти инструменты работают в OKLCH, а не в HSL. Звучит академично, а разница видна сразу: светлота в OKLCH совпадает с тем, что видит глаз, поэтому пять оттенков одного синего возвращаются пятью синими, а не четырьмя синими и чем-то уехавшим в бирюзу.
Можно вытащить палитру из фотографии, построить шкалу от одного фирменного цвета, перевести между HEX, RGB, HSL и OKLCH и проверить пару цветов по порогам контраста WCAG до того, как они уйдут в макет. Цвета за пределами sRGB возвращаются внутрь охвата снижением насыщенности бинарным поиском, так что выбранный оттенок сохраняется, а не обрезается во что-то другое.
Контраст — та часть, где ошибаются чаще всего, и единственная, у которой есть число. Основному тексту нужно 4,5:1 к фону, крупному — 3:1. И цвет, проходящий в светлой теме, очень часто не проходит в тёмной: поднять палитру и отзеркалить её — не одно и то же. Проверяйте обе.