Conversor de cores

O que é o conversor de cores?

O conversor de cores é uma ferramenta online para transformar valores entre HEX, RGB e HSL em tempo real. Ele ajuda quando a mesma cor precisa aparecer com consistência em páginas, componentes, design systems e documentação de marca sem depender de conversões manuais demoradas.

Basta inserir um valor ou escolher uma cor no navegador para ver imediatamente as equivalências nos outros formatos. Você também pode copiar o código individual ou a declaração CSS pronta, recuperar cores recentes e agilizar o fluxo entre design, produto e frontend.

Quando vale usar esta ferramenta

• Desenvolvimento web – Levar cores de uma interface ou protótipo para CSS, SCSS e tokens de design
• Design de interfaces – Ajustar brilho e saturação sem perder a família principal da cor em botões, badges e fundos
• Design system – Registrar uma mesma cor em HEX, RGB e HSL para designers e desenvolvedores
• Acessibilidade – Conferir os valores exatos antes de validar contraste entre texto e fundo
• Trabalho entre ferramentas – Manter coerência entre Figma, Photoshop, Illustrator e o código final
• Apresentações e branding – Reaproveitar rapidamente as cores do projeto em decks, relatórios e materiais de marca

Principais recursos

• Conversão imediata – Sempre que você altera HEX, RGB ou HSL, os outros formatos são recalculados na hora.
• Seletor visual integrado – Escolha a cor diretamente no navegador e confira o resultado instantaneamente no painel de visualização.
• Cópia por formato – Copie separadamente HEX, RGB, HSL ou o trecho completo de CSS conforme a necessidade do momento.
• Histórico local de cores – As cores mais recentes ficam salvas no navegador para facilitar revisões, testes e comparações.
• Cor aleatória para explorar – Gere um novo ponto de partida quando quiser experimentar opções de paleta ou buscar inspiração rápida.
• Entradas com faixa controlada – RGB e HSL permanecem dentro de limites válidos, e o HEX também aceita a forma abreviada.

Como usar o conversor

1. Defina a cor inicial – Use o seletor ou digite diretamente um valor HEX, RGB ou HSL que você já tenha.
2. Confira a visualização – Veja no painel superior se o tom realmente combina com a interface, a marca ou o componente.
3. Leia os equivalentes – A ferramenta mostra a mesma cor nos três formatos mais usados no fluxo web.
4. Copie o resultado certo – Use o botão do formato desejado ou clique em “Copiar CSS” para levar o código pronto para o projeto.

Entendendo HEX, RGB e HSL

HEX

HEX é a forma mais comum de representar cores na web e segue a estrutura #RRGGBB. Cada par indica a intensidade de vermelho, verde e azul em hexadecimal, por isso o formato funciona muito bem em folhas de estilo, tokens e documentação técnica.

• Exemplos: #D4AF37 para dourado, #FF5733 para laranja e #3498DB para azul
• Versão curta: #FF0000 pode virar #F00 quando os pares usam o mesmo caractere
• Quando usar: CSS, tokens de design, documentação de componentes e handoff com frontend

RGB

RGB descreve a cor pelos canais vermelho, verde e azul com valores de 0 a 255. O formato é ótimo para scripts, animações e qualquer situação em que você queira controlar ou comparar cada canal individualmente.

• Exemplos: rgb(212, 175, 55), rgb(255, 255, 255) e rgb(0, 0, 0)
• Lógica: todos os canais em 0 resultam em preto, e todos em 255 resultam em branco
• Quando usar: JavaScript, canvas, animações e ajustes precisos por canal

HSL

HSL organiza a cor por matiz, saturação e luminosidade. É o formato mais prático quando você quer clarear, escurecer ou suavizar uma cor mantendo a mesma base visual.

• Exemplos: hsl(46, 67%, 52%) para dourado e hsl(0, 100%, 50%) para vermelho puro
• Matiz (H): percorre uma roda de 0° a 360°
• Saturação (S): mede a intensidade de 0% a 100%
• Luminosidade (L): posiciona a cor entre preto, tom puro e branco

Dicas práticas

• Gere variações com HSL – Mantenha o mesmo matiz e ajuste principalmente a luminosidade para criar hover states e fundos auxiliares.
• Guarde referências importantes – O histórico ajuda a comparar opções sem digitar novamente os mesmos códigos.
• Cheque contraste antes de publicar – Uma cor alinhada à identidade visual nem sempre entrega boa leitura em texto e CTAs.
• Escolha o formato pelo fluxo – HEX é prático no CSS, RGB funciona bem em scripts e HSL é ótimo para explorar variações visuais.

Detalhes

Os resultados do conversor de cores são calculados a partir do valor informado e do formato usado como ponto de partida.

Se a cor fizer parte de um guia de marca ou de uma revisão de acessibilidade, vale comparar também com a referência oficial do projeto.

Perguntas frequentes