Conversor de Cores (HEX, RGB, HSL — instantâneo)
Digite um código hex, tripla RGB ou valor HSL — os outros formatos são atualizados instantaneamente com uma amostra de prévia visível. Útil para designers, desenvolvedores web e qualquer um que combine cores entre ferramentas.
hex: #0ea5e9
rgb(14, 165, 233)
hsl(199, 89%, 48%)Como funciona
Três formas de descrever a mesma cor
HEX, RGB e HSL são três notações para cores sRGB. HEX é uma abreviação de RGB: #FF6B35 significa vermelho=255, verde=107, azul=53. RGB descreve uma cor pela quantidade de luz vermelha, verde e azul a misturar (0-255 cada). HSL recodifica a mesma cor RGB em termos de matiz (qual cor), saturação (quão vibrante) e luminosidade (quão brilhante).
As três são equivalentes — você pode converter de uma para outra sem perda. Designers preferem HSL para ajustar tons (aumentar a luminosidade mantém o matiz estável), enquanto desenvolvedores geralmente colam HEX das ferramentas de design diretamente no CSS. RGB aparece com mais frequência ao trabalhar com processamento de imagem ou APIs de canvas.
Quando usar cada uma
HEX: copiar e colar de designs, exportações do Figma, diretrizes de marca, literais de cor em CSS. Concisa, mas opaca de ler.
RGB: trabalho programático com cores (canvas, manipulação de imagem), verificações de acessibilidade (cálculos de contraste funcionam em RGB linear) e quando você quer valores inteiros exatos para ajustar.
HSL: ajustar cores por sensação — fazer 'uma versão um pouco mais saturada', 'uma variante mais escura para estados de hover' ou gerar uma paleta avançando no matiz. Muito mais fácil de raciocinar para essas tarefas do que HEX.
O que você não vê nesta ferramenta
Omitimos o canal alfa (transparência) por ora — mas #RRGGBBAA funciona em todos os navegadores modernos se você adicionar dois dígitos hex para opacidade (00 = transparente, FF = opaco).
Também não cobrimos gamuts de cores mais amplos (P3, Rec.2020, OKLCH). Para a maioria do trabalho web, os HEX/RGB/HSL baseados em sRGB são a escolha certa. Se você está visando displays HDR ou de gamut amplo, pesquise as sintaxes do CSS Color Module Nível 4.
Perguntas frequentes
›Posso converter de HSL para HEX sem perder precisão?
Na maior parte sim. HSL é armazenado como graus inteiros e porcentagem, então 360 × 101 × 101 = 3,7M valores HSL mapeiam em 16,7M combinações RGB. Algum arredondamento mínimo pode ocorrer nas extremidades. Use HEX como canônico para armazenamento exato.
›Suporta códigos HEX de 3 dígitos?
Sim. #f60 é tratado como #ff6600. Ambos se expandem para o mesmo triplo RGB.
›Por que HSL não vai até 360 em saturação/luminosidade?
O matiz é em graus (0-360 ao redor da roda de cores). Saturação e luminosidade são porcentagens (0-100).
›HSL é igual a HSB ou HSV?
Não. HSV (e HSB) substitui 'luminosidade' por 'valor', um modelo de brilho diferente. L=50% em HSL é cor plena; V=100% em HSV é cor plena. Usamos HSL porque combina com CSS.
›Suporta transparência?
Ainda não. Por enquanto, adicione um alfa de dois dígitos ao HEX (ex.: #00000080 para preto 50%).
›Por que RGB não mostra floats de 0-1?
Porque a maioria dos contextos (CSS, ferramentas de design) usa inteiros 0-255. Para trabalho com shaders, divida por 255 para obter floats 0-1.
›Como os designers obtêm as cores certas?
Diretrizes de marca, design tokens ou geradores de paleta. A ferramenta de verificação de contraste pode verificar se um par de primeiro plano/plano de fundo atende aos critérios WCAG AA/AAA.
›A calculadora é precisa?
Sim. Usa a matemática padrão de conversão sRGB. As diferenças de ida e volta vêm apenas do HSL ser quantizado em inteiros.
Ferramentas relacionadas
Última atualização: