Работа с #3D0D65

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

Настройте OKLCH и сразу проверьте честный sRGB-вариант.

Меняйте воспринимаемую светлоту, цветовую насыщенность и тон. Инструмент не смешивает исходное значение OKLCH с шестизначным sRGB-вариантом, который используется в остальных расчётах.

В пределах sRGB Для этого значения преобразование цветового охвата не требуется.

L Светлота C Цветовая насыщенность H Тон

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

Эти записи CSS, включая перцептивный OKLCH, вычислены из одного нормализованного шестизначного значения sRGB.

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

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

Рекомендуемый цвет текста: #FFFFFF · 14,54:1

Белый текст14,54:1

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

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

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

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

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

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

Тинты

Затемнения

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

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

Готовый CSS

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

--color-hex-3d0d65: #3D0D65;
--color-hex-3d0d65-rgb: 61 13 101;
--color-hex-3d0d65-hsl: 273 77% 22%;
--color-hex-3d0d65-oklch: oklch(29.9% 0.1397 303.03);
color: #FFFFFF;
background-color: var(--color-hex-3d0d65);