Ferramentas de cor e design

Converta formatos de cor, gere paletas, gradientes e verifique o contraste WCAG com pré-visualização imediata.

Ferramentas nesta categoria

HEX, RGB e HSL são formas diferentes de escrever a mesma cor, não cores diferentes entre si -- mas converter entre elas envolve arredondamento, e isso tem consequências práticas. Este guia explica o que realmente muda ao converter uma cor e quando usar cada representação.

HEX, RGB e HSL

HEX (#RRGGBB) codifica os três canais de cor (vermelho, verde, azul) em hexadecimal; RGB expressa esses mesmos três canais em números de 0 a 255; HSL descreve a cor por matiz (o tom na roda de cores, 0-360°), saturação e luminosidade, um formato mais intuitivo para clarear, escurecer ou dessaturar uma cor em CSS. São três representações do mesmo modelo de cor subjacente, não espaços de cor independentes: converter entre elas não muda qual é a cor, apenas como ela é escrita.

Converter HEX para RGB

Converter RGB para HEX

Converter HEX para HSL

Converter HSL para HEX

Conversão, arredondamento e equivalência

O HEX admitido aqui é de 3 ou 6 dígitos (#RGB ou #RRGGBB); não há suporte para HEX de 8 dígitos com canal de transparência. Converter HEX para HSL e de volta para HEX nem sempre retorna exatamente o mesmo código: o matiz, a saturação e a luminosidade são arredondados para números inteiros ao serem exibidos, e esse arredondamento intermediário pode deslocar o HEX final em relação ao original -- não é um erro, é uma consequência de mostrar valores arredondados em uma etapa intermediária; o deslocamento não fica limitado a uma unidade por canal, por isso vale a pena conferir o resultado em vez de supor que é sempre mínimo. Ao converter RGB para HEX, cada canal também é arredondado antes de ser convertido para hexadecimal.

Transparência

Nenhuma das ferramentas de conversão desta categoria admite um canal alfa (transparência) no HEX de entrada ou saída: se precisar trabalhar com transparência, terá que adicionar o valor alfa separadamente ao usar o resultado em CSS (por exemplo, com rgba() ou o quarto/oitavo dígito de um HEX de 4 ou 8 caracteres, que esta ferramenta não gera).

Escolher o formato conforme o uso

HEX é compacto e comum em design gráfico e em código; RGB é útil quando você precisa trabalhar com os três canais numéricos separadamente; HSL é o mais prático quando você quer ajustar manualmente uma cor -- aumentar a luminosidade para clareá-la, diminuir a saturação para dessaturá-la -- porque esses ajustes correspondem diretamente a um de seus três valores, algo que não é igualmente direto em HEX ou RGB. O seletor de cor permite escolher uma cor visualmente e obter instantaneamente seu valor nos três formatos.

Seletor de cor online

Contraste, paletas e edição

O verificador de contraste calcula a taxa de contraste entre duas cores segundo a fórmula de luminância relativa do WCAG 2.x, e a compara com os limites padrão das diretrizes WCAG (AA texto normal a partir de 4,5:1, AA texto grande a partir de 3:1, AAA texto normal a partir de 7:1, AAA texto grande a partir de 4,5:1). Duas cores "parecerem diferentes" não é o mesmo que superar esses limites: duas cores podem ser visualmente distintas e ainda assim não oferecer contraste suficiente para acessibilidade, por isso esta ferramenta calcula a taxa numérica em vez de se basear numa impressão visual. O gerador de paletas cria cores harmônicas girando o matiz da cor base em passos iguais, mantendo a mesma saturação e luminosidade -- gera uma paleta com relação de cor entre si, não verifica se essas cores têm contraste suficiente entre elas para texto e fundo: para isso existe o verificador de contraste, separadamente. Os geradores de gradiente CSS, de sombra (box-shadow) e de cantos arredondados (border-radius) não convertem cores: constroem diretamente o código CSS a partir dos valores que você escolhe (cores, ângulo, desfoque, raio), com pré-visualização ao vivo.

Verificar contraste de cor (WCAG)

Gerador de paletas de cores

Gerador de gradientes CSS

Gerador de sombras CSS

Gerador de cantos arredondados

Privacidade e limites

As 10 ferramentas desta categoria calculam no seu navegador: nenhuma cor, paleta ou valor de contraste é enviado a um servidor. Tenha em conta o arredondamento ao encadear várias conversões (por exemplo HEX para HSL e de volta para HEX) e a ausência de canal alfa no HEX manipulado por estas ferramentas.

Perguntas frequentes

HEX, RGB e HSL são cores diferentes?

Não. São três formas diferentes de escrever a mesma cor. Converter entre elas não muda a cor, apenas sua representação.

Converter HEX para HSL e de volta para HEX sempre dá exatamente o mesmo código?

Nem sempre. O matiz, a saturação e a luminosidade são arredondados para números inteiros ao serem exibidos, e esse arredondamento pode deslocar o HEX resultante em relação ao original em uma quantidade que varia conforme a cor, nem sempre limitada a uma unidade por canal.

Estas ferramentas admitem um HEX com canal de transparência (8 dígitos)?

Não. Admitem apenas HEX de 3 ou 6 dígitos, sem canal alfa; a transparência precisa ser adicionada separadamente ao usar o resultado em CSS.

Duas cores parecerem diferentes significa que têm contraste suficiente para acessibilidade?

Não necessariamente. O verificador de contraste calcula uma taxa numérica segundo a fórmula WCAG e a compara com limites específicos; uma diferença visual perceptível não garante superar esses limites.

O gerador de paletas verifica se as cores geradas têm bom contraste entre si?

Não. Gera cores harmônicas girando o matiz da cor base, sem avaliar contraste ou legibilidade; para isso existe o verificador de contraste, uma ferramenta separada.

Os geradores de gradiente, sombra e border-radius convertem cores?

Não. Constroem código CSS a partir dos valores que você escolhe (cores, ângulo, desfoque, raio); não realizam nenhuma conversão entre formatos de cor.