Escolha cores, monte gradientes, confira o contraste e gere CSS de sombra e borda — tudo em um só lugar. Nada é enviado, tudo atualiza ao vivo enquanto você digita.
Clique na amostra para escolher uma cor
HEX
RGB
HSL
Digite em qualquer campo — HEX, RGB ou HSL — e os outros dois são atualizados automaticamente, junto com a amostra.
Cores
Tipo
Ângulo 90°
Cor do texto
Cor de fundo
A rápida raposa marrom
Pula sobre o cão preguiçoso — é assim que fica um texto normal do corpo da página.
Taxa de contraste21:1
Texto normal — AA
Texto normal — AAA
Texto grande — AA
Texto grande — AAA
O WCAG (Diretrizes de Acessibilidade para Conteúdo Web) define taxas mínimas de contraste para que o texto continue legível para pessoas com baixa visão. AA é o padrão que a maioria dos sites busca; AAA é mais rigoroso. "Texto grande" significa 18pt ou mais (ou 14pt em negrito ou mais).
Sombra (Box Shadow)
Posição X8px
Posição Y8px
Desfoque24px
Espalhamento0px
Cor da sombra
Opacidade 20%
Raio da Borda (Border Radius)
Todos os cantos12px
Assista: gradientes CSS, conversor de cores, verificador de contraste e sombras em uma só ferramenta
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.