Защо HSL към HEX не се връща точно?

HSL стойностите са закръглени до цели числа, така че преобразуването обратно може да измести канал с една стъпка. Разликата не се вижда.

Поддържа ли прозрачност?

Алфа стойностите в rgba() и hsla() се приемат, но се игнорират, тъй като контрастът зависи от това какво стои зад прозрачен цвят.

Поддържа ли се 3-цифрен HEX?

да #f80 се чете като #ff8800.

Конвертор на цветове и проверка на контраста – HEX, RGB, HSL, WCAG

Конвертор на цветове и проверка на контраста

Въведете цвят във всеки общ формат, за да получите останалите, след което проверете дали е четим на цвета на фона ви.

Работи във вашия браузър

Вашите данни: Този инструмент обработва въведеното от вас в този браузър. CapyHelp не качва този вход, за да генерира вашия резултат. Подробности за поверителност

Как да използвате преобразувателя на цветовете и проверката на контраста

Въведете цвят като HEX (#4f46e5), rgb() или hsl(), или използвайте инструмента за избор.
Въведете цвят на фона, за да проверите контраста.
Вижте коефициента на контраст и дали преминава WCAG AA и AAA за нормален и голям текст.

Разбиране на контрастните съотношения

Указанията за достъпност на уеб съдържанието (WCAG) сравняват относителната яркост на два цвята в скала от 1:1 (идентичен) до 21:1 (черно върху бяло).

АА се нуждае от поне 4,5:1 за нормален текст и 3:1 за голям текст (около 24px или 19px получер).
AAA се нуждае от 7:1 за нормален текст и 4,5:1 за голям текст.

Добрият контраст помага на всички да четат при ярка светлина или на лоши екрани, не само на хора с лошо зрение.

Примери

#4F46E5 текст на бяло

Контраст 6,29:1 · преминава AA, не отговаря на AAA за нормален текст

hsl(243, 75%, 59%)

#5048E5 · rgb(80, 72, 229)