O que você pode fazer com essas ferramentas de CSS e cores
- Conversor de Cores — digite uma cor em HEX, RGB ou HSL e as outras duas se atualizam na hora. Útil quando o design entrega uma e o seu código precisa de outra.
- Gradiente — escolha as cores, selecione Linear ou Radial, defina o ângulo e clique em Copiar CSS.
- Verificador de Contraste — escolha uma cor de texto e uma de fundo para ver se pessoas com baixa visão conseguem ler (WCAG AA e AAA).
- Sombra e Borda — ajuste posição, desfoque e espalhamento para montar um box-shadow, e arredonde os cantos com border-radius. Copie o CSS quando gostar do resultado.
Termos de cor explicados
- HEX — uma cor escrita como # seguido de seis letras ou números, por exemplo #2563EB.
- RGB — a mesma cor como três números: vermelho, verde e azul.
- HSL — matiz, saturação e luminosidade. É mais fácil de ajustar à mão, por exemplo para clarear uma cor.
- Contraste WCAG — uma regra sobre o quanto texto e fundo precisam ser diferentes para o texto continuar legível. AA é o nível que a maioria dos sites busca; AAA é mais rígido.
Bom saber antes de começar
- As cores são totalmente opacas: não há transparência (alfa) nem códigos hex de 8 dígitos.
- Valores HSL são arredondados para números inteiros, então, ao converter de volta, um canal de cor pode diferir em 1.
- Passar ou reprovar no contraste usa as cores exatas; a razão mostrada é arredondada para duas casas, então 4,496 aparece como 4.50:1 mas não passa de 4,5.
- Degradês aceitam até 6 cores, igualmente espaçadas, em ângulo linear ou radial circular.
Perguntas frequentes
Essas ferramentas de CSS são grátis?
Sim. Não tem conta e não há nada para instalar.
Meus dados são enviados para algum lugar?
Não. Tudo é calculado ao vivo no seu navegador.
Como converter HEX para RGB?
Digite ou cole o código HEX no campo HEX do Conversor de Cores. Os valores RGB e HSL são preenchidos sozinhos.
Qual taxa de contraste eu preciso?
Para texto normal, mire pelo menos 4,5:1 (AA). Para texto grande, 3:1 basta. O nível AAA, mais rígido, pede 7:1 em texto normal.