Ferramentas CSS: Cores, Contraste, Clamp e Unidades
Converta cores HEX, RGB e HSL, calcule contraste WCAG, gere CSS clamp() e converta px, rem, em, vw e vh no navegador. Suíte frontend 100% local.
Processamento 100% local no seu navegador. Nenhum dado, texto, arquivo ou senha é enviado para servidor.
#2563ebrgb(37, 99, 235)hsl(221, 83%, 53%)Converta cores entre HEX, RGB e HSL, verifique o contraste de acessibilidade, gere CSS clamp() e converta unidades px, rem, em, vw e vh, tudo no navegador.
Como funciona este cálculo
As conversões de cor usam as fórmulas padrão entre os espaços HEX, RGB e HSL. O contraste segue o cálculo de luminância relativa da WCAG. O clamp() é derivado de uma reta entre dois breakpoints, e a conversão de unidades usa a base de fonte informada e um viewport de referência.
Para gerar imagens com cores definidas aqui, veja o gerador de QR Code; para formatar a folha de estilo, o formatador de código.
Fórmula
contraste = (L1 + 0,05) / (L2 + 0,05)
1rem = base font-size (px)
Referências: WCAG 2.1 (contraste) e CSS Values and Units (MDN). Cálculos locais no navegador.
Limitações
- O contraste considera apenas as duas cores informadas, sem opacidade ou sobreposição.
- vw e vh dependem do tamanho real da tela; aqui usa-se um viewport de referência.
- Cores fora dos formatos HEX, rgb() e hsl() não são reconhecidas.
Calculadoras relacionadas
Cálculo auditável, com fórmula e fontes transparentes
Atualizado em . Fontes: WCAG 2.1 (contraste) / CSS Values and Units / MDN.
Perguntas frequentes
Quais ferramentas estão reunidas aqui?
Conversão de cores entre HEX, RGB e HSL; verificação de contraste pelas regras de acessibilidade WCAG; gerador de CSS clamp() para tipografia fluida; e conversão de unidades entre px, rem, em, vw e vh.
Como funciona a verificação de contraste WCAG?
A ferramenta calcula a razão de contraste entre a cor do texto e a do fundo e compara com os limites das diretrizes WCAG 2.1: 4.5:1 para texto normal e 3:1 para texto grande no nível AA, e 7:1 e 4.5:1 no nível AAA. Ela indica quais critérios passam.
O que é o CSS clamp() e quando usar?
clamp() define um valor mínimo, um valor preferido e um máximo, permitindo tipografia e espaçamentos que crescem suavemente com a largura da tela. A ferramenta calcula a expressão a partir dos tamanhos em pixels e dos breakpoints informados.
Os valores de vw e vh dependem da tela?
Sim. Como vw e vh são relativos ao tamanho da janela, a conversão usa um viewport de referência de 1280 por 800 pixels, exibido junto ao resultado. rem e em usam a base de fonte que você informar.
Meus dados são enviados para servidor?
Não. Todas as conversões e cálculos acontecem no navegador, sem enviar nada para servidor. As ferramentas funcionam mesmo offline depois que a página carrega.
Posso copiar os resultados direto para o meu CSS?
Sim. Cada resultado (cor em HEX, RGB ou HSL, expressão clamp e valores convertidos) pode ser copiado com um clique, no formato pronto para colar na sua folha de estilo.