Como converter cores entre HEX, RGB e HSL
Resposta rápida
Para converter uma cor: abra o Color Converter, insira uma cor em qualquer formato (HEX, RGB, HSL) e a ferramenta exibe o equivalente em todos os outros formatos instantaneamente. Todas as conversões acontecem localmente no seu navegador – nenhum dado é carregado.
Introdução
As cores podem ser representadas em vários formatos: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) e outros. Ferramentas e contextos diferentes usam formatos diferentes — CSS geralmente usa HEX ou RGB, ferramentas de design podem usar HSL e APIs pode usar qualquer um. A conversão entre formatos permite usar uma cor definida em um sistema em um contexto que requer outro. Este guia mostra como converter cores em seu navegador.
Passo a passo
-
Abra a ferramenta Conversor de Cores
Vá para a página da ferramenta Color Converter. A ferramenta suporta os formatos HEX, RGB, HSL, HSV e CMYK.
-
Digite sua cor
Digite ou cole um valor de cor em qualquer formato compatível. Exemplos: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. A ferramenta detecta automaticamente o formato de entrada.
-
Revise todos os equivalentes de formato
A ferramenta exibe a cor em todos os formatos simultaneamente: HEX, RGB, HSL, HSV e CMYK. Ele também mostra uma amostra de visualização de cores para que você possa verificar se a conversão está correta.
-
Copie o formato que você precisa
Clique no botão Copiar ao lado de qualquer formato para copiar esse valor para a área de transferência. Use-o em seu CSS, ferramenta de design ou aplicativo.
-
Ajuste a cor (opcional)
Algumas ferramentas permitem ajustar a cor com controles deslizantes (para HSL: matiz, saturação, luminosidade) e ver todos os formatos atualizados em tempo real. Isto é útil para encontrar cores ou tons relacionados.
Exemplos
HEX a RGB e HSL
Entrada: #ff6600
Saída: RGB: rgb(255, 102, 0)
HSL:hsl(24, 100%, 50%)
RGB a HEX
Entrada: rgb(0, 128, 255)
Saída: HEX: #0080ss
HSL:hsl(210, 100%, 50%)
HSL a HEX
Entrada: hsl(120, 100%, 50%)
Saída: HEX: #00ff00
RGB: rgb(0, 255, 0)
Problemas comuns
- HEX com vs sem # —algumas ferramentas requerem o prefixo #, outras não. Nosso conversor aceita ambos.
- HEX de 3 dígitos vs 6 dígitos —#f60 é uma abreviação de #ff6600. Ambos são válidos; o conversor normaliza para 6 dígitos.
- HSL intervalo de matiz — o matiz é de 0 a 360 graus (um círculo). 0 e 360 são ambos vermelhos. Valores acima de 360 são envolventes.
- As diferenças de espaço de cores —HEX, RGB e HSL são todas sRGB. CMYK é um espaço de cores diferente (impressão) e a conversão é aproximada.
Dicas
- Use HSL para criar variações de cores – ajustar matiz, saturação ou luminosidade é mais intuitivo do que RGB.
- Use HEX para CSS — é o formato mais compacto e amplamente suportado em folhas de estilo.
- Use RGB quando precisar definir a transparência alfa —rgb(255, 102, 0, 0.5) para 50% de opacidade (ou use HEX de 8 dígitos: #ff660080).
- Use nosso Conversor de Cores para conversão instantânea e privada entre todos os formatos de cores.