Desenvolvedor 🔒 Roda no seu navegador — nenhum dado é enviado

Conversor de Cores

Converta HEX, RGB, HSL, HSV, CMYK e OKLCH, crie paletas e confira o contraste — no seu navegador.

Cor de entrada

Seletor:

Digite uma cor para converter...

Como Usar

1. Cole uma cor em qualquer notação ou escolha com o seletor — Detecção automática descobre o formato.
2. A aba Formatos lista HEX, RGB, HSL, HSV, CMYK e OKLCH, cada um com seu botão Copiar.
3. A aba Paleta monta uma escala de onze passos de tons claros e escuros, além de harmonias complementar, análoga, triádica e tetrádica.
4. A aba Contraste mede a razão WCAG contra qualquer fundo e marca os limiares AA e AAA.
Tudo roda no seu navegador — nada é enviado a um servidor.

Perguntas Frequentes

Quais formatos de cor são aceitos?

A entrada é detectada sozinha: HEX com ou sem #, rgb() e rgba(), hsl() e hsla(), valores modernos como oklch(), hwb() e lab(), e os 148 nomes de cor do CSS. A saída traz HEX, RGB, HSL, HSV, CMYK e OKLCH, e o canal alfa é preservado em vez de descartado.

Posso escolher uma cor visualmente em vez de digitar valores?

Sim, use o seletor de cores ao lado do campo de entrada — ele preenche o valor HEX automaticamente e faz a conversão.

Ele suporta códigos HEX abreviados como #FFF?

Sim, códigos HEX abreviados de 3 dígitos são expandidos automaticamente para o equivalente de 6 dígitos.

Esta ferramenta é precisa para trabalho de design?

Sim, as conversões usam a matemática padrão do espaço de cores e coincidem com os valores obtidos em ferramentas de design como Figma ou Photoshop.

Dá para montar uma paleta de cores?

Sim. A aba Paleta transforma sua cor em uma escala de onze passos numerada de 50 a 950, além de harmonias complementar, análoga, triádica, complementar dividida e tetrádica. Copiar como CSS copia a escala inteira como propriedades personalizadas.

Ele verifica o contraste para acessibilidade?

Sim. A aba Contraste mostra a razão WCAG contra qualquer fundo, marca AA e AAA para texto normal e grande e para elementos de interface não textuais, e sugere o tom mais próximo do mesmo matiz que passa quando a combinação fica aquém.

Como converto HEX para RGB?

Cole o código HEX, com ou sem #, e o valor RGB aparece na hora ao lado de HSL, HSV, CMYK e OKLCH. Um HEX de 4 ou 8 dígitos mantém o alfa como rgba().

Converte para CMYK para impressão?

Sim. CMYK aparece em toda conversão. É uma conversão matemática, então para trabalhos em que a cor é crítica compare com uma amostra impressa.

Conversor de cores - HEX para RGB, RGB para HEX e HSL online

Atualizado em 30 de setembro de 2026 · Por Saman

A ferramenta de design entrega um formato de cor, o CSS quer outro e a API de canvas quer um terceiro. Este conversor de cores gratuito aceita qualquer uma das três notações comuns - #0A84FF, rgb(10,132,255) ou hsl(210,100%,52%) - e devolve o equivalente exato no formato de que você realmente precisa.

Cole o valor, escolha o formato de saída e clique em Converter. Não há nada para instalar nem cadastro, e como a conversão roda no seu navegador, ela funciona até offline.

Uma cor HEX são três pares de dígitos hexadecimais para vermelho, verde e azul. #0A84FF é rgb(10, 132, 255), e essa mesma cor escrita em HSL é hsl(210, 100%, 52%).

Os três formatos e quando cada um vence

Formato	Aparência	Melhor para
HEX	`#0A84FF`	Entregas de design, manuais de marca e qualquer lugar em que a cor é escrita ou colada
RGB	`rgb(10, 132, 255)`	Canvas, SVG, processamento de imagem e todo código que manipula canais
HSL	`hsl(210, 100%, 52%)`	Design systems: ajustar luminosidade para hover, desabilitado e modo escuro

Todos os formatos que o conversor devolve

Não é preciso dizer o que está a colar: Detecção automática lê um código HEX com ou sem #, a sintaxe com vírgulas e com espaços de rgb() e hsl(), valores modernos como oklch(), hwb() e lab(), e os 148 nomes de cor do CSS. Além de HEX, RGB e HSL, recebe HSV para seletores de cor, CMYK para tudo o que vai para impressão, oklch() para tokens de design perceptualmente uniformes e o nome de cor CSS mais próximo. O canal alfa - rgba(), hsla() ou um HEX de oito dígitos - é preservado em vez de descartado.

Como converter uma cor

Cole a cor em qualquer notação ou escolha-a com o seletor - Detecção automática descobre o formato. Nos navegadores que oferecem suporte, como Chrome e Edge no computador, Capturar da tela pega a cor de qualquer pixel da tela; nos demais, o botão não aparece.
A aba Formatos lista HEX, RGB, HSL, HSV, CMYK e OKLCH; copie qualquer linha com o botão ao lado. Também dá nome à cor: Nome CSS quando ela é exatamente uma das cores nomeadas do CSS e, se não, o nome Mais próximo.
A aba Paleta dá uma escala pronta de tons claros e escuros, mais harmonias complementar, análoga, triádica e tetrádica.
Na aba Contraste, defina a cor de fundo e leia a razão WCAG com os veredictos AA e AAA.
Use Aleatório para explorar ou Limpar para reiniciar antes do valor seguinte.

Como funciona um código de cor HEX

Uma cor HEX são três pares de dígitos hexadecimais, um par para vermelho, um para verde e um para azul, cada par cobrindo de 00 a FF, ou seja, de 0 a 255 em decimal. #FF0000 é vermelho puro, #000000 é preto e #FFFFFF é branco. Quando os três pares repetem o dígito, a forma curta funciona: #FFF equivale a #FFFFFF. Um código de quatro ou oito dígitos acrescenta canal alfa, então #0A84FF80 é o mesmo azul com cerca de 50% de opacidade.

Por que HSL é mais fácil de raciocinar

O HSL descreve a cor do jeito que as pessoas descrevem: matiz como ângulo na roda de cores, saturação como intensidade e luminosidade como proximidade do branco ou do preto. Isso o torna a escolha prática para montar uma paleta. Pegue o matiz da sua marca, mantenha a saturação e mude apenas a luminosidade para gerar um estado hover, um estado desabilitado, uma borda e uma variante de modo escuro que claramente pertencem à mesma família. Fazer o mesmo em HEX significa chutar seis dígitos.

Construir uma paleta inteira a partir de uma cor

A aba Paleta transforma uma única cor de marca no conjunto de que você realmente precisa. A escala Tons claros e escuros mantém o matiz e a saturação e mexe apenas na luminosidade ao longo de onze passos, numerados de 50 a 950 como na maioria dos sistemas de design, para que hover, contorno, estado desativado e modo escuro pertençam claramente à mesma família. Copiar como CSS coloca a escala completa na área de transferência como propriedades personalizadas, prontas para :root.

Abaixo da escala estão as harmonias do círculo cromático: complementar (o matiz oposto), análoga (vizinhas a 30 graus), triádica e Complementar dividida para acentos equilibrados, e tetrádica para um esquema de quatro cores. Clique numa amostra para copiar o HEX ou faça duplo clique para a tornar a cor atual.

Verificar o contraste antes de publicar

A aba Contraste mede a razão de contraste WCAG entre a sua cor e qualquer fundo. Mostra a razão com duas casas decimais e marca cada limiar como aprovado ou reprovado: AA texto normal com 4,5:1, AA texto grande com 3:1, AAA texto normal com 7:1, AAA texto grande com 4,5:1 e Componentes de interface, como ícones e contornos de campos, com 3:1. Inverter troca as cores do texto e do fundo com um clique. Uma amostra ao vivo mostra a combinação a 16px e a 24px negrito, porque uma razão insuficiente para texto corrido pode servir para um título.

Quando a combinação fica aquém, a ferramenta propõe o tom mais próximo do mesmo matiz que chega a 4,5:1, para corrigir o contraste sem abandonar a cor de marca. Uma cor translúcida é primeiro composta sobre o fundo, porque é isso que o leitor vê; testar o valor rgba() em bruto seria otimista demais.

Onde a conversão de cores aparece

Levar cores de marca de um arquivo de design para propriedades personalizadas de CSS.
Definir fillStyle em um canvas ou um atributo de cor em SVG, que preferem RGB.
Montar templates de e-mail em HTML, em que HEX é a notação mais segura entre clientes.
Gerar um conjunto consistente de tons claros e escuros para um design system.
Escolher paletas de gráficos e painéis em que os matizes precisam de espaçamento uniforme.
Traduzir uma cor de uma captura de tela ou de um PDF de marca em algo utilizável no código.

Cor e legibilidade

Converter uma cor não diz se o texto será legível sobre ela. O contraste depende da luminância relativa, e as diretrizes WCAG pedem uma razão de pelo menos 4,5 para 1 em texto normal e 3 para 1 em texto grande. A luminosidade HSL é uma primeira aproximação útil - se dois valores de luminosidade estiverem próximos, o contraste quase com certeza não chega - e a aba Contraste resolve isso com exatidão, para qualquer par de cores, antes de publicar.

Detalhes que valem a pena saber

Arredondamento. O HSL usa graus e porcentagens inteiros, então converter de HEX para HSL e voltar pode deslocar um canal em uma unidade. Mantenha um formato como fonte da verdade.
Alfa. rgba() e o HEX de oito dígitos carregam opacidade; um HEX de seis dígitos não consegue representá-la.
Porcentagens em RGB. rgb(100%, 0%, 0%) é CSS válido e significa o mesmo que rgb(255,0,0).
Gamute ampliado. Funções CSS recentes como oklch() e color(display-p3 ...) expressam cores fora do sRGB que o HEX não alcança.
Cores nomeadas. Palavras-chave CSS como tomato correspondem a valores HEX fixos, mas são limitadas e encaixam mal em um sistema.

Roda localmente

A conversão é aritmética simples executada no seu navegador. Nenhuma cor colada é enviada para lugar nenhum, o que importa quando você trabalha com uma paleta de marca ainda não divulgada.

A fórmula de HEX para RGB, e a conversão em código

Um código HEX são três bytes escritos em base 16. Separe #0A84FF em 0A, 84 e FF, converta cada par para decimal (0A = 10, 84 = 132, FF = 255) e você tem rgb(10, 132, 255). No sentido inverso, escreva cada canal com dois dígitos hexadecimais e complete com zero quando for menor que 16.

Linguagem	HEX para RGB	RGB para HEX
JavaScript	`parseInt(hex.slice(1, 3), 16)` para o vermelho, depois 3-5 e 5-7	`'#' + [r, g, b].map(c => c.toString(16).padStart(2, '0')).join('')`
Python	`tuple(int(h[i:i+2], 16) for i in (0, 2, 4))`	`'#%02x%02x%02x' % (r, g, b)`
PHP	`sscanf('#0A84FF', '#%02x%02x%02x')`	`sprintf('#%02x%02x%02x', $r, $g, $b)`
CSS (navegadores modernos)	`rgb(from #0A84FF r g b)`	não precisa: as duas notações são valores de cor válidos

Ferramentas relacionadas

O trabalho de front-end raramente para na cor. Formate tokens de design com o formatador JSON, embuta um ícone pequeno como data URI com o codificador Base64, encontre todos os códigos de cor de uma folha de estilo com o testador de regex e converta imagens com o conversor de imagens. Para transformar as cores em gradientes e sombras, use o Gerador de CSS.