Conversor de Cores
Converta entre formatos de cor HEX, RGB e HSL com edição bidirecional — altere qualquer valor e todos os outros atualizarão instantaneamente. O seletor de cores nativo do navegador oferece seleção visual, enquanto entradas numéricas precisas permitem especificação exata da cor. Copie formatos prontos para CSS diretamente para desenvolvimento web e design.
O que esta ferramenta faz?
O Conversor de Cores fornece conversão bidirecional entre os três formatos de cor primários para a web. HEX (hexadecimal) usa o formato #RRGGBB ou #RGB, com valores de 00-FF por canal. RGB (Vermelho, Verde, Azul) usa valores decimais de 0-255 por canal, comumente escrito como rgb(255, 0, 128). HSL (Matiz, Saturação, Luminosidade) usa matiz em graus (0-360) e saturação/luminosidade como porcentagens (0-100%), escrito como hsl(300, 50%, 50%). Um mostrador de cor ao vivo exibe a cor atual, e os botões de cópia fornecem formatos prontos para CSS para uso imediato em planilhas de estilo.
Como funciona
Os valores de cor são convertidos usando matemática de espaço de cor padrão. HEX para RGB: cada par de dígitos hexadecimais converte para decimal 0-255. RGB para HSL: os valores RGB são normalizados para 0-1, o máximo e o mínimo determinam a luminosidade, a saturação depende da faixa de luminosidade e o matiz é calculado a partir do componente RGB maior usando fórmulas trigonométricas. HSL para RGB reverte este processo. Quando você edita qualquer campo, a cor é analisada, convertida para todas as três representações e exibida. A entrada de cor nativa do navegador fornece seleção de cores integrada ao sistema operacional em plataformas compatíveis.
Recursos
- HEX ↔ RGB ↔ HSL — edite qualquer valor, os outros atualizam
- Integração com seletor de cores nativo do navegador
- Pré-visualização ao vivo com mostrador de cor
- Copie rgb(...) ou hsl(...) prontos para CSS com um clique
- Referência Hex8 (com alfa) para ferramentas de design
- Conversão em tempo real bidirecional
- Valida faixas de entrada para cada formato
Como usar
- 1
Escolha ou insira uma cor
Use o seletor de cores nativo, cole um código hex ou insira diretamente valores RGB/HSL. Qualquer valor de cor válido é aceito.
- 2
Ajuste fino com deslizadores ou números
Ajuste os deslizadores R/G/B para controle preciso dos canais de cor, ou modifique os valores H/S/L para alterar o matiz ou ajustar a saturação e o brilho.
- 3
Copie o formato CSS
Clique em Copiar CSS no seu formato preferido — hex para compactação, rgb para legibilidade ou hsl para ajustes intuitivos.
- 4
Use Hex8 para ferramentas de design
O campo Hex8 mostra o formato #RRGGBBAA com alfa. Copie isso para ferramentas de design como Figma ou Photoshop que suportam hex com transparência.
Casos de uso comuns
Desenvolvimento web
Converta cores de mockups de design para valores CSS, ajuste matematicamente as cores da paleta via HSL e copie códigos hex exatos para implementação.
Design gráfico
Traduza cores entre ferramentas de design que usam formatos diferentes e verifique a precisão das cores entre as representações HEX, RGB e HSL.
Exploração de esquemas de cor
Use HSL para criar variações: ajuste o matiz para cores complementares, saturação para controle de intensidade e luminosidade para tons e sombras.
Verificação de acessibilidade
Converta cores para verificar as proporções de contraste e garantir que os designs atendam aos padrões de acessibilidade WCAG para visibilidade de cores.
Dicas e boas práticas
- HSL é mais intuitivo para ajustes de cor do que RGB — altere o matiz sem afetar o brilho, ou ajuste a saturação sem mudar a cor base
- HEX é o mais compacto para CSS (7 caracteres vs 16+ para rgb/hsl), mas rgb() e hsl() são mais legíveis e suportam operações CSS calc()
- Use o seletor de cores nativo (clique na entrada de cor) para seleção visual — ele se integra aos seletores de cores do sistema operacional no macOS e Windows
- Para tons de cinza, use HSL com saturação de 0% — qualquer valor de matiz funciona, apenas L (luminosidade) afeta o resultado