Conversor de Cores em HEX, RGB e HSL
Converta cores entre os formatos HEX, RGB e HSL, com pré-visualização instantânea. Escolha visualmente com o seletor de cor ou digite o valor.
Para converter cores, digite um valor em HEX, RGB ou HSL, ou escolha visualmente com o seletor de cor: os outros dois formatos são atualizados automaticamente, junto com uma pré-visualização da cor. HEX é o formato mais comum em CSS (#RRGGBB), RGB usa componentes de vermelho/verde/azul de 0 a 255, e HSL usa matiz, saturação e luminosidade, mais intuitivo para ajustes manuais.
Dúvidas sobre conversão de cores
Como converter uma cor HEX para RGB?
Divida o código HEX em três pares de dígitos (para #RRGGBB) e converta cada par de base 16 para base 10. Por exemplo, #4285F4 vira RGB(66, 133, 244). Esta ferramenta faz essa conversão automaticamente.
O que é o modelo de cor HSL?
HSL significa matiz (hue), saturação (saturation) e luminosidade (lightness). É mais intuitivo para ajustar cores manualmente do que RGB, pois separa a cor em si (matiz) da sua intensidade e claridade.
Como escolher uma cor a partir de uma paleta visual?
Use o seletor de cor (color picker) desta ferramenta para escolher visualmente, os campos HEX, RGB e HSL são atualizados automaticamente com o valor escolhido.
Qual a diferença entre HEX e RGB?
HEX representa a cor em um único código de 6 dígitos em base 16 (#RRGGBB), enquanto RGB usa três números separados de 0 a 255 para vermelho, verde e azul. São a mesma informação em formatos diferentes, e esta ferramenta converte entre os dois automaticamente.
Este conversor suporta cores com transparência (RGBA)?
No momento a ferramenta trabalha apenas com HEX, RGB e HSL sólidos, sem o canal alfa. Para usar transparência, basta adicionar manualmente o valor alfa (ex: rgba(66, 133, 244, 0.5)) ao código RGB gerado.
Posso usar o valor convertido diretamente no CSS?
Sim, os três formatos (HEX, RGB e HSL) gerados são sintaxe válida de CSS e podem ser colados diretamente em qualquer propriedade de cor, como color ou background-color.
A ferramenta verifica o contraste de acessibilidade (WCAG)?
Ainda não. Esta versão foca apenas na conversão entre HEX, RGB e HSL. Para checar contraste WCAG, recomendamos usar uma ferramenta específica de acessibilidade em conjunto com os valores gerados aqui.
O conversor de cores funciona no celular?
Sim, a interface é responsiva e funciona em navegadores de celular e tablet, incluindo o seletor de cor nativo do dispositivo.
Meus dados de cor são enviados para algum servidor?
Não. Toda a conversão acontece localmente no seu navegador, em JavaScript, e nenhum valor de cor é enviado ou armazenado em servidores.
Posso copiar o código da cor diretamente?
Sim, basta clicar em qualquer um dos campos HEX, RGB ou HSL para selecionar o texto e copiá-lo automaticamente para a área de transferência.
Como converter de HSL para HEX?
O processo é matemático, primeiro convertendo HSL para RGB usando as fórmulas do modelo de cor, depois convertendo cada canal RGB para seu par de dígitos hexadecimais. Esta ferramenta faz essa conversão automaticamente ao ajustar os valores de HSL.
Existe um formato HEX de 3 dígitos, tipo #FFF?
Sim, é uma forma abreviada onde cada dígito é repetido, então #FFF equivale a #FFFFFF. Esta ferramenta trabalha com o formato completo de 6 dígitos, mas você pode expandir manualmente um código curto duplicando cada caractere.
Por que a mesma cor pode parecer diferente em telas diferentes?
Porque monitores e celulares variam em calibração, brilho e tecnologia de tela, o que afeta como as cores são exibidas. O valor HEX, RGB ou HSL é sempre o mesmo número, mas a percepção visual pode mudar de um dispositivo para outro.
Como saber se uma cor é considerada clara ou escura?
O valor de luminosidade (o L de HSL) indica isso diretamente, quanto mais próximo de 100%, mais clara a cor, quanto mais próximo de 0%, mais escura. Cores com luminosidade em torno de 50% costumam ser as mais saturadas e vivas.
Essa ferramenta gera paletas de cores harmônicas automaticamente?
Não, esta ferramenta converte uma cor por vez entre os três formatos. Para gerar paletas complementares, análogas ou triádicas a partir de uma cor base, é preciso usar uma ferramenta específica de geração de paletas.