Работа с #2D9EE0

Сравните форматы, контраст текста, шаги палитры, связи по цветовому кругу и готовый CSS для любого непрозрачного цвета sRGB в формате HEX, RGB, HSL, HWB или ключевого слова CSS.

Эквивалентные форматы цвета

Эти записи sRGB вычислены из одного нормализованного шестизначного HEX-значения.

Контраст чёрного и белого текста

Сравните коэффициенты относительной яркости WCAG перед выбором текста. Прохождение порога не отменяет проверку всего интерфейса.

Рекомендуемый цвет текста: #000000 · 7,08:1

Белый текст2,97:1

AA обычный текст: Нет
AA крупный текст: Нет
AAA обычный текст: Нет
AAA крупный текст: Нет

Чёрный текст7,08:1

AA обычный текст: Да
AA крупный текст: Да
AAA обычный текст: Да
AAA крупный текст: Да

Продолжить в лаборатории контрастаСравнить #2D9EE0 с другим цветомОткройте полную проверку пары WCAG: этот цвет и наиболее контрастный чёрный или белый передний план уже будут подставлены.

Расчётные тинты и затемнения

Используйте воспроизводимые смеси sRGB как отправные точки и проверяйте их в реальном интерфейсе.

Тинты

Затемнения

Отправные точки на цветовом круге

Варианты поворачивают тон HSL, сохраняя насыщенность и светлоту. Это математические варианты, а не автоматические рекомендации по дизайну.

Готовый CSS

Начните с custom properties для нормализованного цвета и чёрного или белого текста с более высоким контрастом.

--color-hex-2d9ee0: #2D9EE0;
--color-hex-2d9ee0-rgb: 45 158 224;
--color-hex-2d9ee0-hsl: 202 74% 53%;
color: #000000;
background-color: var(--color-hex-2d9ee0);