Você encontrou a cor perfeita em formato HEX, mas a ferramenta de design que está usando requer RGB. Ou um cliente enviou uma cor em RGB e você precisa do valor HSL para seu CSS. A conversão de formatos de cor é uma tarefa diária para designers e desenvolvedores. Nosso Conversor de Cores torna isso instantâneo.
O que você precisa
- Um valor de cor em qualquer formato (HEX, RGB, HSL ou outros)
- Um navegador web (Chrome, Firefox, Safari ou Edge)
- Nenhuma conta ou instalação necessária
Guia passo a passo
Insira seu valor de cor
Abra a ferramenta Conversor de Cores. Digite ou cole seu valor de cor em qualquer formato suportado. Por exemplo, insira #3B82F6 como valor HEX, rgb(59, 130, 246) como RGB, ou hsl(217, 91%, 60%) como HSL. A ferramenta reconhece o formato automaticamente.
Veja todas as conversões de formato
A ferramenta exibe instantaneamente sua cor em todos os formatos suportados: HEX, RGB, HSL e mais. Você pode ver uma pré-visualização ao vivo da cor junto com todos os seus valores equivalentes. Se precisar ajustar a cor, use o seletor de cores para refiná-la visualmente.
Copie o formato que precisa
Clique no botão de copiar ao lado de qualquer formato para copiar o valor para sua área de transferência. Cole diretamente no seu arquivo CSS, ferramenta de design ou onde precisar. Sem necessidade de redigitar manualmente.
Bom saber O Conversor de Cores funciona inteiramente no seu navegador. Funciona offline após carregado e não requer conta ou instalação.
Entendendo os formatos de cor
Diferentes ferramentas e contextos usam diferentes formatos de cor. Veja quando usar cada um:
HEX
O formato mais comum na web. Uma cor HEX começa com # seguido por seis caracteres (letras e números), como #FF5733.
- Usado em: CSS, HTML, ferramentas de design (Figma, Sketch, Photoshop)
- Formato:
#RRGGBBonde cada par é um valor hexadecimal de 00 a FF - Exemplo:
#3B82F6(um azul médio)
RGB
Descreve uma cor usando seus componentes Vermelho, Verde e Azul, cada um variando de 0 a 255.
- Usado em: CSS (função
rgb()), linguagens de programação, iluminação LED - Formato:
rgb(vermelho, verde, azul) - Exemplo:
rgb(59, 130, 246)
HSL
Descreve uma cor usando Matiz (0-360 graus na roda de cores), Saturação (0-100%) e Luminosidade (0-100%).
- Usado em: CSS (função
hsl()), teoria das cores, sistemas de design - Formato:
hsl(matiz, saturação%, luminosidade%) - Exemplo:
hsl(217, 91%, 60%)
Dica HSL é o formato mais intuitivo para ajustar cores. Quer um tom mais claro? Aumente o valor de luminosidade. Quer um tom mais suave? Diminua a saturação. Isso torna o HSL ideal para construir sistemas de cores e criar variações de uma cor base.
Quando usar cada formato
| Situação | Formato recomendado |
|---|---|
| Escrevendo CSS manualmente | HEX (curto e familiar) ou HSL (fácil de ajustar) |
| Especificações de ferramentas de design | HEX (padrão da indústria) |
| Manipulação dinâmica de cores em código | HSL (mais fácil de ajustar programaticamente) |
| Comunicando cores para clientes | HEX (mais universalmente reconhecido) |
| Design para impressão | CMYK (separado dos formatos de tela) |
Indo além de cores individuais
Uma vez que sua cor esteja convertida, você pode explorar ferramentas relacionadas:
- Gerador de Gradientes: Crie gradientes CSS suaves usando suas cores. Insira duas ou mais cores e obtenha o código do gradiente pronto para colar na sua folha de estilos.
- Gerador de Paleta de Cores: Gere paletas de cores harmoniosas a partir da sua cor inicial. Obtenha esquemas complementares, análogos, triádicos e outros automaticamente.
Essas ferramentas funcionam em conjunto com o Conversor de Cores para ajudá-lo a construir um sistema de cores completo para seu projeto.
Importante As cores podem parecer diferentes em telas diferentes devido à calibração do display, perfis de cor e configurações de brilho. Quando a precisão das cores é crítica (branding, design para impressão), sempre verifique suas cores no meio-alvo, não apenas na sua tela.
Perguntas frequentes
Qual é a diferença entre HEX e RGB?
Eles representam a mesma informação em notações diferentes. HEX usa hexadecimal (base 16) e RGB usa decimal (base 10). #FF0000 e rgb(255, 0, 0) são ambos vermelho puro.
Posso converter para CMYK para impressão? Formatos de cor de tela (HEX, RGB, HSL) e formatos de impressão (CMYK) são modelos de cor fundamentalmente diferentes. Uma conversão matemática existe, mas para cores de impressão precisas você deve usar uma ferramenta profissional de gerenciamento de cores.
E a transparência (alfa)?
HEX suporta alfa com dois caracteres extras (#3B82F680). RGB e HSL suportam como funções rgba() e hsla(). O Conversor de Cores também lida com esses formatos.
Próximos passos
Com suas cores convertidas, experimente o Gerador de Gradientes para criar gradientes CSS bonitos, ou use o Gerador de Paleta de Cores para construir um esquema de cores completo em torno da cor escolhida.