color/

Nomes de cores não são aceitos; você verá a mensagem "Formato não reconhecido". São aceitos HEX (3, 4, 6 ou 8 dígitos, # opcional), rgb() / rgba(), hsl() / hsla() e oklch(), com argumentos separados por vírgula ou por espaços, usando uma barra para a opacidade (por exemplo, rgb(255 0 0 / 50%)). O matiz no HSL pode ter a unidade deg, rad, grad ou turn. A saída é sempre HEX, RGB, HSL e OKLCH; não há CMYK nem HSV.

Fica nos dois últimos dígitos, no formato #RRGGBBAA, igual ao CSS. O formato #AARRGGBB, comum no Android, coloca o alfa no início, então mova os dois primeiros dígitos para o final antes de colar. Dois dígitos hexadecimais dão só 256 níveis, por isso 80 (128 em decimal) converte para 0,502 e não para um 0,5 redondo; no sentido contrário, uma opacidade de 0,5 gera 80 no final do HEX.

Quando uma cor fica fora do que o sRGB consegue exibir, a ferramenta limita os canais vermelho, verde e azul separadamente ao intervalo válido e mostra a cor limitada. Valores como rgb() acima de 255 ou saturação ou luminosidade de HSL acima de 100% são limitados sem aviso; só o OKLCH mostra o aviso "Fora da gama sRGB", porque ele consegue descrever cores mais vivas que as do sRGB. O OKLCH da saída é recalculado a partir da cor limitada, então é diferente do que você digitou. Em telas de gama ampla, escrever oklch() direto no CSS pode ficar mais vivo do que a prévia daqui.

A ferramenta só compara a sua cor com branco puro e preto puro, tratando-a como cor do texto sobre um fundo branco e sobre um fundo preto; não dá para escolher outro fundo. Ela segue a WCAG 2.x: cada canal sRGB é convertido para um valor linear, ponderado por 0,2126; 0,7152 e 0,0722 para obter a luminância relativa L, e contraste = (L mais claro + 0,05) ÷ (L mais escuro + 0,05). Para duas outras cores quaisquer, aplique você mesmo a mesma fórmula.

AA e AAA são os dois níveis de conformidade da WCAG para o contraste de texto, e o AAA é mais rigoroso. Para texto normal, o AA exige 4,5 : 1 e o AAA exige 7 : 1; para texto grande, o AA exige 3 : 1 e o AAA exige 4,5 : 1. A ferramenta marca cada um como aprovado ou reprovado. "Texto grande" é texto a partir de 18pt (cerca de 24px), ou em negrito a partir de 14pt (cerca de 18,7px). Em sites, o alvo costuma ser o AA.

Primeiro a cor é misturada com o fundo de acordo com a opacidade, e o contraste é calculado sobre o resultado. A linha "Sobre branco" mistura sobre branco puro e a linha "Sobre preto" sobre preto puro, então a mesma cor semitransparente é, na prática, uma cor diferente em cada linha. Se o fundo real da sua página não for branco nem preto puro, o resultado será diferente, então confira você mesmo.

Não. O seletor é um controle nativo do navegador e só escolhe cores HEX opacas de 6 dígitos. Depois de escolher uma cor com ele, a caixa de entrada passa a mostrar #rrggbb e qualquer opacidade anterior se perde; para uma cor semitransparente, digite um HEX de 8 dígitos ou rgb(255 0 0 / 50%) direto na caixa. Quando a caixa tem uma cor semitransparente, o seletor mostra só a parte opaca dela.

Copie-as para uma regra :root e já dá para usar. As quatro linhas são o HEX, os três números R G B separados por espaços, os três valores H S L e o oklch() completo. --color-rgb e --color-hsl não incluem opacidade, então você pode ajustá-la na hora, como em rgb(var(--color-rgb) / 50%); essa sintaxe com espaço e barra exige um navegador razoavelmente recente. Quando a própria cor é semitransparente, só --color e --color-oklch incluem a opacidade.