Conversor de Cores — HEX, RGB, HSL e HSV com cópia em um clique

Como usar

• Informe uma cor de três formas: digite um HEX ou nome de cor CSS, use o seletor, ou arraste os controles de matiz/saturação/luminosidade/alfa.
• Mude qualquer valor e HEX, RGB, HSL, HSV e RGBA se atualizam de uma vez, sem botão de converter e em qualquer direção.
• Clique no botão de copiar ao lado de um formato para copiá-lo para a área de transferência; aparece um aviso de “Copiado!”.
• Reduza o controle de alfa para criar uma cor transparente: a pré-visualização mostra um padrão xadrez para ver a transparência.
• Veja o painel de contraste para a relação WCAG e se passa em AA/AAA. Sem instalar, sem cadastro: as cores são calculadas localmente e não são enviadas.

Formatos de cor suportados

HEX (código de cor hexadecimal)

HEX é a forma mais comum de escrever cores na web, como #RRGGBB (e a forma curta #RGB). Converter um hexadecimal para rgb ou hex para hsl leva segundos. Para transparência, o HEX8 usa #RRGGBBAA, em que o último par é o canal alfa.

RGB / RGBA (vermelho, verde, azul + alfa)

RGB descreve uma cor com vermelho, verde e azul de 0 a 255, como rgb(124, 58, 237). O RGBA adiciona um quarto valor, o alfa (0–1), para a transparência, por exemplo rgba(124, 58, 237, 0.5). Digite os valores RGB e o HEX e o HSL se atualizam na hora (rgb para hex, rgb para hsl).

HSL / HSLA (matiz, saturação, luminosidade)

HSL usa matiz (0–360°), saturação (0–100%) e luminosidade (0–100%), o que torna intuitivo ajustar o quão claro ou vivo é uma cor. É muito usado em CSS e o HSLA adiciona o canal alfa. Converter hex para hsl é útil quando você quer mexer só na luminosidade.

HSV (matiz, saturação, valor)

HSV (também chamado HSB) usa matiz, saturação e valor (brilho). É comum em ferramentas de design e seletores de cor, mas não é uma notação oficial de CSS, por isso a mostramos como valor de referência. Para CSS, use HEX, RGB ou HSL.

Recursos

Exibição simultânea e conversão bidirecional

Todos os formatos são exibidos juntos em uma tela e, ao editar qualquer um, o resto se atualiza na hora: hex para rgb, rgb para hex, hex para hsl, hsl para hex e todas as outras direções. Não é preciso apertar nenhum botão de converter.

Cópia em um clique

Cada formato tem um botão de copiar. Clique para copiar o valor para a área de transferência, com um claro aviso de “Copiado!” para você saber que deu certo.

Seletor de cor e controles deslizantes

Use o seletor de cor nativo mais os controles de matiz, saturação, luminosidade (ou valor) e alfa para escolher cores visualmente e ver todos os formatos acompanharem.

Suporte a transparência (alfa)

Crie cores semitransparentes e obtenha RGBA, HSLA e HEX8 (#RRGGBBAA). O controle de alfa vai de 0 a 100% e a pré-visualização usa um padrão xadrez para mostrar a transparência.

Relação de contraste e verificação WCAG

A ferramenta calcula a relação de contraste entre a sua cor e um fundo (branco, preto ou personalizado) e mostra se passa no WCAG AA/AAA (4,5:1 para texto normal, 3:1 para texto grande). Os resultados aparecem com cor e texto, não só com cor.

Casos de uso

Transformar um HEX em RGB / HSL para CSS

Recebeu um HEX de um design? Converta para rgb() ou hsl() e copie para o seu CSS. Com HSL dá para ajustar só a luminosidade para os estados hover e ativo.

Criar cores transparentes (RGBA / HSLA)

Crie uma cor semitransparente como rgba(0, 0, 0, 0.5) com o controle de alfa e copie: ideal para sobreposições, sombras e fundos sutis.

Verificar uma combinação de cores acessível

Confirme que as cores do texto e do fundo atendem ao contraste WCAG AA para que o conteúdo permaneça legível para todos.

Notas e dicas

• HEX, RGB, HSL e HSV são apenas formas diferentes de escrever a mesma cor, então convertem entre si (pequenas diferenças de arredondamento podem ocorrer).
• HSV não é uma notação oficial de CSS: é mostrado como referência. Nas suas folhas de estilo, use HEX, RGB ou HSL.
• Não exibimos CMYK de propósito: a conversão exata de tela para impressão depende de perfis de cor, papel e gráfica, então uma fórmula simples daria valores enganosos. Para impressão, use um gerenciamento de cores adequado.
• O contraste é um guia: a fórmula WCAG é exata, mas a legibilidade real também depende da fonte, do tamanho e das cores ao redor.
• Suas cores nunca são enviadas a lugar nenhum: todas as conversões acontecem localmente no seu navegador.

Perguntas frequentes

Posso converter HEX para RGB (e o contrário)?

Sim. Informe um valor e ele converte em todas as direções de uma vez: hex para rgb, rgb para hex, hex para hsl, hsl para hex, além de HSV e RGBA. Não há botão de converter; os outros formatos se atualizam na hora.

Tem suporte a RGBA e HSLA com transparência?

Sim. Use o controle de alfa para definir a transparência e obtenha RGBA, HSLA e HEX8 (#RRGGBBAA). A pré-visualização mostra um padrão xadrez para ver o quão transparente a cor é.

Como copio um valor?

Clique no botão de copiar ao lado de qualquer formato. O valor é copiado para a área de transferência e uma mensagem de “Copiado!” confirma.

Posso usar nomes como red ou rebeccapurple?

Sim. Os nomes de cor padrão do CSS são aceitos na entrada e convertidos para HEX, RGB, HSL e HSV; por exemplo, rebeccapurple vira #663399.

Dá para converter para CMYK?

Não, de propósito. Um CMYK exato depende de perfis de cor, papel e gráfica, então uma fórmula simples geraria valores enganosos. Para impressão, use ferramentas dedicadas de gerenciamento de cores.

Como uso a relação de contraste?

Ela compara a cor do texto com um fundo e mostra se atende ao WCAG AA/AAA. Use para confirmar que suas combinações de cor são legíveis e acessíveis.

Minhas cores são enviadas a um servidor?

Não. Todas as conversões rodam localmente no seu navegador. Suas cores nunca são enviadas ou armazenadas.