O que é um conversor de cores?
Um conversor de cores traduz valores entre diferentes sistemas de notação usados em desenvolvimento web e design. Os três formatos mais comuns são HEX (hexadecimal, como #3b82f6), RGB (componentes vermelho, verde e azul, como rgb(59, 130, 246)) e HSL (matiz, saturação e luminosidade, como hsl(217, 91%, 60%)). Esta ferramenta permite inserir uma cor em qualquer formato compatível — ou selecioná-la visualmente — e ver instantaneamente os valores equivalentes em todos os formatos, além dos valores individuais dos canais RGB.
Como usar o conversor de cores
- 1Clique na amostra do seletor para escolher uma cor visualmente ou digite um valor diretamente no campo de entrada.
- 2Insira cores em HEX (#3b82f6), RGB (rgb(59,130,246)), HSL (hsl(217,91%,60%)) ou use nomes de cores CSS (blue, coral).
- 3Veja a cor na amostra grande de pré-visualização abaixo da entrada.
- 4Consulte os valores convertidos nos formatos HEX, RGB e HSL.
- 5Copie qualquer formato usando o botão de cópia ao lado de cada valor.
- 6Confira os valores individuais dos canais R, G e B na parte inferior.
Casos de uso comuns
Desenvolvimento CSS
Converta rapidamente códigos HEX de ferramentas de design em valores RGB ou HSL necessários em folhas de estilo CSS ou soluções CSS-in-JS.
Handoff de design
Converta valores de cores de especificações de design, como Figma e Sketch, para o formato exato exigido pelo seu código.
Testes de acessibilidade
Extraia valores de cores precisos para verificar taxas de contraste e garantir que suas escolhas atendam às diretrizes de acessibilidade WCAG.
Personalização de temas
Converta cores da marca para diferentes formatos ao configurar propriedades personalizadas CSS, arquivos de configuração do Tailwind ou design tokens.
Perguntas frequentes
Quais formatos de cor são aceitos como entrada?
A ferramenta aceita valores HEX (#rgb, #rrggbb), notação RGB (rgb(r, g, b)), notação HSL (hsl(h, s%, l%)) e nomes de cores CSS (red, cornflowerblue etc.).
Por que o seletor de cores mostra apenas a saída HEX?
O seletor de cores nativo do HTML trabalha com valores HEX. Após selecionar uma cor, a ferramenta a converte automaticamente para todos os formatos compatíveis (HEX, RGB e HSL), exibidos abaixo.
Há suporte a canal alfa ou transparência?
No momento, a ferramenta é voltada para cores opacas. Entradas HEX com alfa (#rrggbbaa), RGBA e HSLA podem ser interpretadas, mas o canal alfa não é exibido separadamente.
A conversão é precisa?
Sim. A ferramenta usa a biblioteca culori, especializada em ciência das cores e conversões de alta precisão de acordo com as especificações CSS Color Level 4.
Meus valores de cor são enviados para algum servidor?
Não. A seleção e a conversão das cores acontecem localmente no seu navegador.