color/

Названия цветов не поддерживаются, появится сообщение «Формат не распознан». Можно вводить HEX (3, 4, 6 или 8 цифр, # можно опустить), rgb() / rgba(), hsl() / hsla() и oklch(); аргументы разделяются запятыми либо пробелами, а непрозрачность пишется после косой черты (например, rgb(255 0 0 / 50%)). Тон (hue) в HSL может иметь единицы deg, rad, grad или turn. На выходе всегда четыре формата: HEX, RGB, HSL и OKLCH, CMYK и HSV нет.

В последних двух цифрах, запись #RRGGBBAA, как в CSS. В Android часто встречается форма #AARRGGBB, где альфа-канал стоит первым, поэтому перед вставкой перенесите первые две цифры в конец. Две шестнадцатеричные цифры дают только 256 градаций, поэтому 80 (128 в десятичной системе) переводится в 0.502, а не в ровные 0.5; в обратную сторону непрозрачность 0.5 дает в конце HEX значение 80.

Если цвет выходит за пределы того, что способен показать sRGB, инструмент по отдельности обрезает красный, зеленый и синий каналы до допустимого диапазона и выводит обрезанный цвет. Значения вроде rgb() выше 255 или насыщенность и светлота HSL выше 100% обрезаются без уведомления; сообщение «Вне охвата sRGB» появляется только для OKLCH, потому что он умеет описывать цвета ярче, чем sRGB. OKLCH в результате пересчитывается из обрезанного цвета, поэтому он отличается от введенного вами. На экране с широким цветовым охватом запись oklch() прямо в CSS может выглядеть ярче, чем предпросмотр здесь.

Инструмент сравнивает введенный цвет только с чисто белым и чисто черным: он считается цветом текста на белом и на черном фоне, другой фон выбрать нельзя. Расчет по WCAG 2.x: каналы sRGB переводятся в линейные значения, затем взвешиваются с коэффициентами 0.2126, 0.7152 и 0.0722, и получается относительная яркость L; контраст = (L более светлого + 0.05) ÷ (L более темного + 0.05). Для двух любых других цветов посчитайте по той же формуле самостоятельно.

AA и AAA — два уровня соответствия WCAG по контрасту текста, AAA строже. Для обычного текста AA требует 4.5 : 1, AAA — 7 : 1; для крупного текста AA — 3 : 1, AAA — 4.5 : 1. Инструмент помечает каждый пункт как «пройден» или «не пройден». «Крупным» считается текст от 18pt (около 24px) и полужирный текст от 14pt (около 18.7px). Для сайтов обычно ориентируются на AA.

Сначала цвет накладывается на фон с учетом непрозрачности, затем считается контраст. Строка «На белом» накладывает его на чисто белый фон, строка «На черном» — на чисто черный, поэтому один и тот же полупрозрачный цвет в этих строках участвует в расчете как два разных цвета. Если реальный фон на вашей странице не чисто белый и не чисто черный, результат будет другим, и его нужно проверить отдельно.

Нет. Палитра — это встроенный элемент браузера, и она позволяет выбирать только непрозрачные цвета в виде 6-значного HEX. После выбора в палитре поле ввода заменяется на #rrggbb, и прежняя непрозрачность теряется; для полупрозрачного цвета введите в поле 8-значный HEX или rgb(255 0 0 / 50%). Если в поле введен полупрозрачный цвет, палитра показывает только его непрозрачную часть.

Скопируйте их в правило :root, и они готовы к использованию. Четыре строки — это HEX, три числа R G B через пробел, три значения H S L и полный oklch(). --color-rgb и --color-hsl не содержат непрозрачности, поэтому ее можно подстроить на месте, например rgb(var(--color-rgb) / 50%); такая запись с пробелами и косой чертой требует достаточно свежего браузера. Если сам цвет полупрозрачный, непрозрачность есть только в --color и --color-oklch.