O que o Conversor de Cores faz
Escolha uma cor em qualquer formato padrão — HEX, RGB, HSL ou HSV — e o Conversor de Cores do Microapp mostra os valores equivalentes em todos os outros formatos, lado a lado. Mais uma amostra de pré-visualização ao vivo para você ver exatamente com qual cor está trabalhando. Tudo no seu navegador, instantaneamente.
Designers e desenvolvedores constantemente precisam traduzir entre formatos: uma especificação de marca usa HEX, seu código quer RGB com opacidade, um design system usa tokens em HSL, seu editor de imagem exporta RGBA. Conversões na mão são tediosas e propensas a erros. Esta é a versão sempre certa.
Como usar
- Digite ou cole um valor de cor em qualquer um dos quatro campos de entrada (HEX, RGB, HSL, HSV).
- Os outros três campos atualizam na hora com os equivalentes convertidos. A amostra de pré-visualização mostra a cor real.
- Use o seletor para escolha visual — arraste o quadrado de cor ou o controle de matiz, e todas as quatro saídas de formato atualizam em tempo real.
- Clique em "Copiar" ao lado de qualquer formato para colocá-lo na área de transferência.
HEX:
#1B6B45RGB:
rgb(27, 107, 69)HSL:
hsl(150, 60%, 26%)HSV:
hsv(150, 75%, 42%)Mesma cor, quatro formatos. Use o que combinar com sua ferramenta.
Os quatro formatos explicados
HEX. Seis caracteres hexadecimais representando vermelho, verde e azul (dois cada). #1B6B45 significa R=0x1B (27), G=0x6B (107), B=0x45 (69). O formato mais comum para web design — todo arquivo CSS está cheio de HEX. Atalhos de três caracteres (#1B6) duplicam cada caractere, mas só funcionam para cores com pares de dígitos hexadecimais.
RGB. Três inteiros de 0 a 255 representando os mesmos vermelho, verde e azul. rgb(27, 107, 69) é idêntico a #1B6B45 — os mesmos números em decimal. RGB tem uma variante alfa, RGBA, para transparência parcial: rgba(27, 107, 69, 0.5) é verde com metade de opacidade.
HSL. Matiz (0–360 graus em uma roda de cores), Saturação (0–100% de intensidade da cor), Luminosidade (0–100% do preto ao branco). hsl(150, 60%, 26%) significa um matiz verde-ciano, moderadamente saturado, bem escuro. HSL é intuitivo para designers — você pode ajustar "deixar mais escuro" baixando a Luminosidade sem afetar o matiz.
HSV. Matiz, Saturação, Valor (às vezes chamado HSB). Similar ao HSL, mas Valor representa o brilho do preto-à-cor-pura em vez do preto-ao-branco. HSV é o que a maioria dos editores de imagem (Photoshop, Figma) usa em seus seletores de cores.
Quando usar cada formato
| Use este formato | Quando |
|---|---|
| HEX | CSS, especificações de design, mensagens no Slack, em qualquer lugar onde você precisa de uma única string curta |
| RGB / RGBA | Manipulação programática de cor, transparência parcial, animações CSS interpolando cores |
| HSL / HSLA | Geração de temas, paletas de cores, clarear/escurecer programaticamente uma cor da marca |
| HSV | Editores de imagem, seletores de cor, lugares onde "valor" mapeia melhor para brilho percebido |
As sutilezas que designers encontram
Luminosidade HSL vs Valor HSV — NÃO são a mesma coisa. Duas cores com Luminosidade HSL 50% podem parecer muito diferentes em brilho porque Luminosidade em HSL é o ponto médio entre preto e branco. Valor HSV 50% significa "metade do brilho da versão totalmente saturada". Ao automatizar "deixar 20% mais escuro", usar HSL dá resultados mais uniformes entre matizes do que HSV.
Hex é sRGB por padrão. Quando você escreve #1B6B45, o navegador interpreta como sRGB. Telas modernas frequentemente têm gamas de cor mais amplas (P3, AdobeRGB), e o CSS agora suporta especificá-las: color(display-p3 0.106 0.420 0.270). Para a maior parte do trabalho web, fique no sRGB / HEX; para HDR ou trabalho adjacente a impressão, os formatos de gama mais ampla importam.
Alfa (transparência) não se aplica ao HEX. Quase. O CSS moderno suporta HEX de 8 caracteres com alfa nos últimos 2 caracteres: #1B6B4580 é o verde da marca em 50% de alfa. Navegadores mais antigos ignoram os bytes de alfa. RGBA e HSLA têm suporte mais universal para transparência.
Armadilhas comuns de cor
Esquecer o # no HEX. CSS exige #1B6B45, não 1B6B45. O conversor do Microapp aceita ambos para entrada, mas sempre devolve com o #.
HEX em minúsculas vs maiúsculas. Funcionalmente idênticos (#1b6b45 = #1B6B45). A maioria dos design systems padroniza em maiúsculas para legibilidade; o CSS não liga.
Erros de arredondamento ao converter. Fazer ida e volta HSL → HEX → HSL pode produzir um valor HSL ligeiramente diferente devido ao arredondamento de inteiros (HEX são inteiros; HSL são floats). O conversor do Microapp usa matemática de alta precisão internamente; você deve ver resultados consistentes, mas em código pode ver deriva ao longo de muitas idas e voltas.
Ferramentas relacionadas
Para converter só HEX para RGB, a ferramenta mais simples Hex para RGB é mais rápida. Para encontrar o nome de cor mais próximo de um valor HEX, o Buscador de Nome de Cor pode identificá-lo. Para gerar uma paleta de cores coordenada em torno de uma cor base, veja o Gerador de Paleta de Cores.