Conversor e seletor de cores
Escolha qualquer cor e veja na hora os valores HEX, RGB e HSL. Clique para copiar o formato que quiser — perfeito para CSS, ferramentas de design e código.
Uma ferramenta de cores feita para designers e desenvolvedores
Converta entre HEX, RGB e HSL em tempo real — e copie direto para o seu CSS, Figma ou design tokens.
Conversão em tempo real
Edite qualquer formato e veja HEX, RGB e HSL serem recalculados assim que você digita. Sem botão de converter, sem espera.
Três formatos sincronizados
HEX para código, RGB para cálculos, HSL para ajustes intuitivos. Os três ficam conectados, então você usa o seu favorito.
Cópia com um clique
Cada formato tem um botão de copiar próprio que coloca valores prontos para CSS na sua área de transferência. É só colar direto na sua folha de estilos.
Seletor visual de cores
Escolha qualquer cor visualmente com um seletor de espectro completo. Ótimo para amostragem, ajustes finos e exploração de paletas.
Saída pronta para CSS
Todos os formatos são gerados como CSS válido — sem reformatar, sem converter de novo. Funciona com todos os navegadores modernos e ferramentas de design.
100% privado — sem servidor
Todos os cálculos de cor rodam no seu navegador. Cores, paletas e valores nunca saem do seu dispositivo.
Quem usa o conversor de cores
De quem está aprendendo CSS a equipes de marca que mantêm um design system — uma ferramenta, qualquer fluxo de trabalho.
Desenvolvedores web
Converta design tokens entre propriedades personalizadas do CSS, configurações do Tailwind e códigos HEX copiados do inspetor do navegador.
- Variáveis CSS e cores do Tailwind
- Converta HEX do Figma para HSL em temas
- Depure diferenças de cor entre plataformas
Designers
Mantenha as paletas consistentes entre Figma, Sketch, Adobe e web — converta qualquer tom entre sistemas de cor na hora.
- Exporte HEX do Figma para CSS
- Ajuste saturação e luminosidade com HSL
- Mantenha as cores da marca iguais em todas as ferramentas
Equipes de marca e guias de estilo
Documente as paletas da marca em todos os formatos que designers e desenvolvedores precisam — HEX, RGB e HSL lado a lado.
- Gere paletas de marca em três formatos
- Crie especificações de cor compartilháveis
- Revise códigos de cor antigos
Como converter cores
Escolha uma cor no seletor ou digite um valor HEX, RGB ou HSL diretamente em qualquer campo.
Todos os formatos são atualizados na hora — os valores HEX, RGB e HSL são recalculados em tempo real conforme você faz alterações.
Clique no botão Copiar ao lado de qualquer formato para copiar o valor para a área de transferência, pronto para colar no CSS, no Figma ou no código.
Explore mais ferramentas
Descubra outras ferramentas grátis que combinam muito bem com esta
Compressor de imagens
Reduza o tamanho do arquivo sem perder qualidade
Redimensionador de imagens
Redimensione imagens para dimensões exatas
Removedor de fundo
Remova fundos com a precisão da IA
Gerador de QR Code
Crie QR Codes personalizados na hora
Conversor de imagens
Converta entre mais de 30 formatos de imagem
PNG para WebP
Arquivos menores, mesma qualidade para a web
Perguntas frequentes
Respostas para as dúvidas mais comuns sobre a conversão de cores entre HEX, RGB e HSL.
Qual é a diferença entre HEX, RGB e HSL?
HEX (por exemplo, #FF5733) é uma representação hexadecimal usada em HTML e CSS. RGB (por exemplo, rgb(255, 87, 51)) define uma cor pelos canais de vermelho, verde e azul. HSL (por exemplo, hsl(11, 100%, 60%)) define uma cor por matiz, saturação e luminosidade — muitas vezes mais intuitivo para designers que fazem pequenos ajustes.
Posso digitar um código HEX diretamente?
Sim. Clique no campo HEX e digite ou cole qualquer código HEX válido de 6 dígitos (por exemplo, #3B82F6). Os valores RGB e HSL são atualizados automaticamente. Os formatos de 3 dígitos (#RGB) e de 6 dígitos (#RRGGBB) são aceitos.
Os dados das cores são enviados para um servidor?
Não. Toda a conversão de cores acontece inteiramente no seu navegador, usando JavaScript. Nada é enviado para nenhum servidor.
Posso usar esta ferramenta para obter valores de cor em CSS?
Sim — basta clicar em Copiar ao lado de HEX, RGB ou HSL e colar direto no seu CSS. Os três formatos são valores de cor CSS válidos, aceitos por todos os navegadores modernos.