Ferramentas CSS: Cores, Contraste, Clamp e Unidades

São quatro abas. Cores HEX/RGB/HSL converte uma cor entre as três notações e aceita HEX de 3, 4, 6 ou 8 dígitos, rgb() e hsl(). Contraste WCAG calcula a razão entre a cor do texto e a do fundo e diz quais critérios de acessibilidade passam. CSS clamp() monta a expressão de tipografia fluida a partir de dois tamanhos e duas larguras de tela. Unidades px/rem/em converte uma medida para px, rem, em, vw e vh. A tabela pronta de px em rem fica numa página própria, o conversor de px para rem.

Separe o HEX em três pares e converta cada par de hexadecimal para decimal. Em #2563eb, 25 vira 37, 63 vira 99 e eb vira 235, e o resultado é rgb(37, 99, 235). Cada par vai de 00 a ff, ou seja, de 0 a 255. O HEX curto de três dígitos repete cada dígito: #f80 é o mesmo que #ff8800. Na aba Cores basta colar o HEX: a página mostra o RGB e o HSL, hsl(221, 83%, 53%), cada um com botão de copiar.

A ferramenta calcula a luminância relativa de cada cor pela fórmula da WCAG e divide a mais clara pela mais escura, depois de somar 0,05 às duas. A escala vai de 1:1, com duas cores iguais, a 21:1, preto sobre branco. O resultado é comparado com os pisos da WCAG 2.2: 4,5:1 para texto normal e 3:1 para texto grande no nível AA (critério 1.4.3), e 7:1 e 4,5:1 no nível AAA (critério 1.4.6). A comparação usa a razão sem arredondar, como pede o W3C.

Para texto normal no nível AA é o #767676, com 4,54:1. Um tom acima, o #777777, dá 4,48:1 e já reprova, embora na tela os dois pareçam iguais. No nível AAA, com piso de 7:1, o limite é o #595959. Para texto grande no AA, com piso de 3:1, dá para clarear até o #949494. Os três limites saem da mesma conta da ferramenta, aplicada aos 256 tons de cinza neutro.

Com o vermelho puro do CSS, não. Texto branco sobre #ff0000 dá 4,00:1, abaixo dos 4,5:1 que o nível AA pede para texto normal. O mesmo fundo com texto preto dá 5,25:1 e passa. O branco só vale ali para texto grande, de 18 pontos, ou 14 pontos em negrito, que o W3C converte para cerca de 24 px e 18,5 px. Um vermelho mais escuro resolve: o maroon do CSS (#800000) dá 10,95:1 com texto branco.

clamp(mínimo, preferido, máximo) devolve o valor preferido enquanto ele fica entre os dois limites. Quando o preferido mistura rem e vw, a fonte cresce com a largura da tela e para nos limites. A aba abre com uma fonte que vai de 16 px, numa tela de 320 px, a 24 px, numa de 1280 px, e devolve clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). Numa tela de 768 px a fonte fica em cerca de 19,7 px. Serve para título e texto que precisam funcionar do celular ao monitor sem media query.

Sim. 1vw é 1% da largura da janela e 1vh é 1% da altura, então a mesma medida em px vira um vw diferente em cada tela. Para dar um número, a aba Unidades usa uma janela de referência de 1280 por 800 px, escrita ao lado do resultado: nela, 16 px são 1.25vw e 2vh. Já rem e em usam a base de fonte que você informar. No celular, a barra de endereço que aparece e some muda a altura visível, e foi para isso que o CSS criou as unidades svh, lvh e dvh.

Não. As quatro conversões rodam em JavaScript no seu navegador, e nenhuma cor, medida ou expressão é transmitida ou gravada. Depois que a página carrega, as ferramentas continuam funcionando mesmo sem internet. Isso vale também para a paleta de um cliente que ainda não foi lançada: as cores que você testa aqui não saem do seu computador.

Sim. Na aba Cores, cada linha (HEX, RGB e HSL) tem um botão Copiar, e o texto sai no formato que o CSS aceita, como rgb(37, 99, 235). No clamp(), o botão copia a declaração inteira, font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);, pronta para colar numa regra. Na aba Unidades os valores aparecem com até quatro casas decimais. Para a tabela das medidas mais usadas já convertidas em rem, na base que você escolher, use o conversor de px para rem.

Cada quadro é um critério da WCAG 2.2. AA texto normal (4.5:1) é o piso do critério 1.4.3 para texto comum; AA texto grande (3:1) vale para texto de 18 pontos, ou 14 pontos em negrito; os dois quadros AAA são os pisos do critério 1.4.6. Passa quer dizer que a razão calculada, sem arredondar, é igual ou maior que o piso. Reprova quer dizer que ficou abaixo, mesmo que por milésimos. Quando o arredondamento em duas casas faria o número encostar no piso, a tela mostra três: o cinza #959595 sobre branco aparece como 2.995:1, e não como 3.00:1.

São as larguras de tela, em px, entre as quais o tamanho cresce. Com a tela na largura de Viewport mín, a fonte vale o Mín (px); na de Viewport máx, vale o Máx (px); entre as duas, cresce em linha reta. Fora desse intervalo o clamp() trava o valor. O campo Base rem (px) diz quanto vale 1rem na sua página, e a expressão sai dividida por ele. Se o Máx for menor que o Mín, a fonte encolhe quando a tela cresce, e a ferramenta ordena os limites para o clamp() continuar válido.

Porque uma cor com canal alfa, como rgba(0, 0, 0, 0.5) ou #00000080, não é a cor que aparece na tela: o navegador a mistura com o que estiver atrás. A razão de contraste só faz sentido com a cor final. A ferramenta lê o alfa, calcula com a cor cheia e avisa que fez isso, em vez de mostrar um número que ninguém enxerga. Para um resultado fiel, faça a mistura antes: com 50% de preto sobre branco, por exemplo, a cor que aparece é um cinza médio, e é esse cinza, sem canal alfa, que vai no campo.