Como converter HEX para RGB e verificar o contraste do texto online grátis

Você escolheu uma cor para o seu site, e agora o design diz HEX mas o seu código quer RGB. Ou fez um botão bonito e não tem certeza de que alguém consegue ler o texto nele. As Ferramentas de CSS e Cores do GetPlugzz fazem as duas coisas, e mais duas: montam gradientes e geram CSS de box-shadow e border-radius. Tudo fica numa página só, atualiza ao vivo enquanto você digita e roda no seu navegador, então não tem conta e nada é enviado.

As quatro ferramentas, em um minuto

Abra as Ferramentas de CSS e Cores e escolha uma aba:

• Conversor de Cores. Digite uma cor como HEX, RGB ou HSL, e as outras duas se atualizam na hora. Você também pode clicar na amostra para escolher uma cor.
• Gradiente. Escolha as cores (dá para adicionar mais), decida entre linear ou radial, ajuste o ângulo e aperte Copiar CSS.
• Verificador de Contraste. Escolha uma cor de texto e uma de fundo e veja se pessoas com visão fraca conseguem ler, com resultado para WCAG AA e AAA.
• Sombra e Borda. Deslize o deslocamento, o desfoque e a expansão para montar um box-shadow, e arredonde os cantos com border-radius. Copie o CSS quando estiver bom.

HEX, RGB e HSL: uma cor, três jeitos de dizer

Pense numa mesma cor de tinta escrita em três etiquetas diferentes. A tinta é a mesma, só a receita está escrita de outro jeito:

• HEX é o código curto: um # seguido de seis letras ou números, como #2563EB.
• RGB é a receita: três números que dizem quanto de vermelho, verde e azul misturar.
• HSL são os botões de ajuste: matiz, saturação e luminosidade. É o mais fácil de ajustar à mão. Quer a mesma cor um pouco mais clara? É só girar um botão.

Os designs costumam dar um desses e o seu código precisa de outro, e é exatamente aí que um conversor economiza uns minutos.

Como converter HEX para RGB

1. Abra o Conversor de Cores. É a primeira aba.
2. Digite ou cole o código HEX no campo HEX.
3. Leia o resultado. Os valores RGB e HSL se preenchem sozinhos, junto com a amostra.

Funciona também ao contrário. Digite em qualquer um dos três campos e os outros dois acompanham.

O seu texto é mesmo legível? (o problema do sussurro)

Texto cinza claro em fundo branco fica elegante na sua tela. Para quem tem visão fraca, ou com o celular sob sol forte, é um sussurro numa sala barulhenta. O Verificador de Contraste mede o quanto a cor do texto e a do fundo se diferenciam e diz se passa.

Ele usa o WCAG, as Diretrizes de Acessibilidade para Conteúdo Web, que definem um contraste mínimo para o texto continuar legível para pessoas com baixa visão. Há dois níveis: AA é o padrão que a maioria dos sites busca, e AAA é mais rigoroso. O que você precisa:

• Texto normal: no mínimo 4,5:1 para AA e 7:1 para AAA.
• Texto grande: 3:1 basta para AA. Grande quer dizer 18pt ou mais, ou 14pt ou mais em negrito.

A ferramenta mostra a taxa e um resultado para texto normal e grande nos dois níveis, então você não precisa fazer conta nenhuma.

Gradientes e sombras sem escrever o CSS à mão

Para um gradiente, escolha as cores, decida entre linear ou radial, ajuste o ângulo e aperte Copiar CSS. Esse é o trabalho todo.

Para uma sombra, pense numa lâmpada acima de uma caixa. O deslocamento muda onde a sombra cai, um desfoque maior a deixa mais suave e a expansão a deixa maior. Você pode definir a cor e a opacidade da sombra, ou deixá-la interna. Depois arredonde os cantos com border-radius, todos de uma vez, e copie o CSS quando estiver bom.

Quando você realmente vai precisar disso

• Um design te dá um código HEX e o seu código quer RGB ou HSL.
• Um botão ou um título em que você quer conferir se o texto é legível.
• Um fundo de página ou de card que precisa de um gradiente bonito.
• Um card que deve se destacar da página com sombra suave e cantos arredondados.
• Uma checagem de acessibilidade para um cliente, um trabalho da escola ou o seu próprio site.

Bom saber antes de começar

Perguntas frequentes