Перевод CSS-цветов и контраст текста на непрозрачном фоне с учётом прозрачности.
1
Введите цвет текста и фона
2
Выполните перевод и проверьте пороги контраста
3
Скопируйте формат или выгрузите CSS и JSON
CSS-цвета и проверка контраста
Введите значение цвета CSS, например #ff6600, ff6600, rgb(255 102 0) или hsl(24 100% 50%). Инструмент покажет цвет и преобразует его в распространенные форматы CSS.
Значения преобразуются браузером в sRGB. Зависимые от окружения currentColor, var() и системные цвета не принимаются. Широкий цветовой охват и функции CSS Color 4 не входят в поддерживаемые форматы ввода. Прозрачность сохраняется в RGBA, HSLA и HEX с альфа-каналом. RGB и HSL не содержат прозрачность. Порог контраста не заменяет полную проверку доступности.
Введите допустимое значение цвета CSS.
Данные изменены. Ниже остаётся отчёт последнего успешного запуска.
Здесь появится образец цвета
HEX
—
RGB
—
RGBA
—
HSL
—
HSLA
—
CSS-ввод
—
Контраст WCAG:
Aa
AA · 4.5:1
AA · 3:1
AAA · 7:1
4.5:1 — порог AA для обычного текста; 3:1 применяется только к достаточно крупному. 7:1 — AAA для обычного текста. Проверка пары цветов не подтверждает доступность всей страницы.
Зачем использовать онлайн-проверку CSS-цвета?
Этот инструмент поможет вам быстро визуализировать любое значение цвета CSS прямо в браузере. Вы можете вставлять коды из дизайн-системы, руководства по стилю или макета и сразу видеть, как они выглядят на экране.
Используйте его при подготовке стилей для сайта, подборе фирменных цветов или отладке существующих макетов. Инструмент поддерживает стандартные CSS-форматы: HEX, RGB, RGBA, HSL и именованные цвета.
Отзывы проходят модерацию. Публикуем реальные положительные отзывы и конкретную критику. Спам и оскорбления без полезных подробностей не публикуем; мат и личные данные скрываем символами. Плюсы учитываются сразу, минусы — после проверки.
Отзывы описывают опыт пользователей и не гарантируют результат или отсутствие ограничений сервиса. Оставить отзыв можно с помощью кнопок оценки выше.
