Conversor de Cores
Converta entre HEX, RGB e HSL com visualização em tempo real.
Conversor de cores: HEX, RGB e HSL com pré-visualização em tempo real
As cores no design web e digital podem ser representadas em múltiplos formatos, e a capacidade de converter entre eles é essencial para designers, desenvolvedores e criadores de conteúdo. HEX (#FF5733) é o formato mais popular em CSS por ser compacto, RGB (255, 87, 51) é intuitivo para manipulação programática e HSL (14°, 100%, 60%) é ideal para criar variações harmônicas de um mesmo tom.
Nosso conversor oferece conversão bidirecional e instantânea entre os três formatos. Ao inserir um valor em qualquer formato, os outros dois se atualizam automaticamente, junto com uma pré-visualização em tempo real da cor. Isso é especialmente útil quando você encontra uma cor que gosta em um formato e precisa usá-la em outro contexto: por exemplo, converter o HEX do Figma para HSL no código CSS.
A ferramenta também é valiosa para acessibilidade: ao visualizar as cores em tempo real, você pode avaliar rapidamente se elas têm contraste suficiente para texto legível. Combine esta ferramenta com nosso verificador de contraste WCAG para garantir que suas combinações de cores cumpram os padrões de acessibilidade web. Todo o processamento é local e instantâneo, sem transmissão de dados a servidores.
Perguntas frequentes
Qual é a diferença entre HEX e RGB?
Ambos representam exatamente as mesmas cores, só muda a notação. HEX usa números hexadecimais (base 16) no formato #RRGGBB, enquanto RGB usa números decimais de 0 a 255 para cada canal. Por exemplo, o branco é #FFFFFF em HEX e rgb(255, 255, 255) em RGB. HEX é mais compacto para CSS, enquanto RGB é mais fácil de manipular programaticamente.
Quando usar HSL?
HSL é ideal quando você precisa criar paletas de cores harmônicas ou variações de um mesmo tom. Ao separar o tom (H) da saturação (S) e da luminosidade (L), você pode criar versões mais claras ou escuras de uma cor simplesmente ajustando a luminosidade, ou versões mais vibrantes ou apagadas alterando a saturação, sem mudar o tom base.
Qual modelo de cor os navegadores usam?
Os navegadores web entendem os três formatos: HEX, RGB e HSL em CSS. Internamente, as telas trabalham com RGB já que cada pixel é composto por subpixels vermelhos, verdes e azuis. No entanto, CSS moderno também suporta modelos mais avançados como oklch e display-p3 para gamuts de cor mais amplos em telas HDR.
Quer saber mais? Leia nosso guia completo →