QuickBestGo
PT

Conversor de Cores

Como usar o Conversor de Cores?

O Conversor de Cores suporta conversão instantânea entre os três formatos de cor web mais comuns: HEX (#RRGGBB ou a forma abreviada #RGB), RGB (Vermelho, Verde, Azul — cada um de 0 a 255) e HSL (Matiz 0–360°, Saturação 0–100%, Luminosidade 0–100%). Insira um valor em qualquer formato ou use o seletor de cores visual — as três representações são atualizadas simultaneamente. Uma amostra de pré-visualização ao vivo mostra exatamente como a cor fica conforme você ajusta os valores.

Cada formato de cor tem seu uso ideal em design e desenvolvimento. HEX é o formato dominante em HTML, folhas de estilo CSS e ferramentas de exportação de design como Figma e Sketch. RGB é preferido em operações de canvas JavaScript e processamento de imagens onde a manipulação individual de canais é necessária programaticamente. HSL é o formato mais legível para humanos: ajustar apenas a Luminosidade cria escalas de cores para componentes de UI, e modificar apenas o Matiz rotaciona entre cores complementares sem alterar saturação ou brilho.

As fórmulas de conversão seguem o padrão de espaço de cor sRGB usado por todos os principais navegadores e sistemas de exibição. HEX para RGB converte cada par de dígitos hexadecimais em um número decimal (0–255). RGB para HSL normaliza os valores dos canais para 0–1, depois calcula o matiz a partir do canal dominante, a saturação a partir do intervalo min-máx e a luminosidade como a média de mín e máx. Todas as conversões são feitas localmente no seu navegador — nenhum dado de cor é transmitido para lugar algum.

Perguntas Frequentes

Como converto HEX para RGB?
Insira um código de cor HEX (ex.: #2563eb) no campo de entrada e o conversor mostra instantaneamente os valores equivalentes em RGB e HSL. Você também pode digitar diretamente nos campos RGB ou HSL para converter em qualquer direção.
Qual é a diferença entre cores HEX e RGB?
HEX é um código hexadecimal de 6 dígitos (ex.: #FF5500) usado em HTML e CSS. RGB representa a mesma cor como três valores decimais 0–255 (ex.: rgb(255, 85, 0)). Ambos descrevem a mesma cor — são notações diferentes para valores idênticos.
Como encontro o formato de cor CSS que preciso?
O conversor mostra os formatos HEX, RGB e HSL simultaneamente. Copie o formato necessário para sua regra CSS — os três são válidos no CSS moderno e produzem resultados visuais idênticos.
O que é HSL e quando devo usá-lo?
HSL significa Matiz (Hue), Saturação e Luminosidade. É mais intuitivo que HEX ou RGB para ajustar cores: altere apenas a Luminosidade para deixar uma cor mais clara ou mais escura, ou mude o Matiz para obter uma cor relacionada. É popular em temas CSS e sistemas de design.
Posso usar o seletor de cores em vez de digitar valores?
Sim. Clique na amostra de cor ou no ícone do seletor para abrir um seletor de cores visual. Arraste para selecionar qualquer cor e os três valores de formato são atualizados automaticamente.
Os códigos de cor HEX diferenciam maiúsculas de minúsculas?
Não. #FF5500 e #ff5500 são idênticos. CSS aceita códigos HEX tanto em maiúsculas quanto em minúsculas. O conversor aceita qualquer um e normaliza a saída para maiúsculas.
O que significa o símbolo # em uma cor HEX?
O # é um prefixo que indica ao CSS que se trata de um código de cor hexadecimal. Ele não faz parte do valor da cor em si. Algumas ferramentas como Figma ou Photoshop podem exibir o código de 6 dígitos sem o prefixo #.