Conversor de cores

O que é um conversor de cores?#

Um conversor de cores traduz uma descrição de uma cor nas outras descrições de que a sua stack realmente precisa. Os designers dão-lhe um valor HEX de uma maqueta; o CSS deixa-o escrever rgb() ou hsl(); um pipeline de design tokens quer uma variável CSS; uma biblioteca de gráficos pede um tuplo RGBA com canal alfa. A mesma cor continua a vestir trajes diferentes, e gasta-se tempo real a converter entre eles à mão ou a adivinhar numa calculadora.

Esta página faz as quatro conversões ao mesmo tempo. Escreva ou escolha uma cor e obtém imediatamente o seu HEX, RGB, HSL e uma declaração de Variável CSS pronta a colar, mais uma amostra de pré-visualização ao vivo e uma paleta de cinco degraus de clarear/escurear derivada dessa cor exata — tudo calculado localmente no seu navegador.

A razão pela qual HEX, RGB e HSL coexistem é que cada um é bom para uma tarefa diferente. HEX (#4f46e5) é compacto e domina CSS, exportação Figma e guias de marca. RGB (rgb(79, 70, 229)) torna explícitos os canais vermelho/verde/azul, que é o que código de imagem e manipulação de pixéis em canvas esperam. HSL (hsl(243, 75%, 59%)), dividido em matiz, saturação e luminosidade, é o que um humano consegue raciocinar — “fazer 10% mais clara” é uma mudança de um único número em HSL e uma dança confusa de três números em RGB.

Como usar#

1. Defina a cor de entrada de uma de duas formas:
   • Clique no quadrado de cor à esquerda para abrir o seletor de cores nativo do sistema operativo e escolher visualmente.
   • Ou escreva um valor no campo de texto ao lado. HEX (#4f46e5, #abc, ou #4f46e5ff de 8 dígitos com alfa), rgb() / rgba() e hsl() / hsla() são todos aceites.
2. Leia os resultados na lista à direita — HEX, RGB, HSL e Variável CSS. Cada campo é só de leitura; clique nele e copie, ou use-o como referência enquanto trabalha.
3. Veja o grande bloco de pré-visualização à direita; preenche-se com a cor atual para que se possa verificar contra o seu desenho.
4. Use a paleta de 5 amostras por baixo da pré-visualização. Gera variantes darker, dark, base, light e lighter deslocando a luminosidade HSL em passos de 10 pontos — útil para estados hover/ativo ou para construir uma escala tonal a partir de uma única cor de marca.
5. A linha de estado confirma a conversão ou reporta uma mensagem de Cor inválida se a sua entrada não for analisada.

Principais recursos#

• Três formatos aceites, quatro devolvidos. Cole HEX, rgb() ou hsl() e obtenha HEX, RGB, HSL e uma declaração de variável CSS de uma só vez.
• Sensível ao alfa. HEX de 8 dígitos (#rrggbbaa) e entradas rgba()/hsla() transportam o seu canal alfa até à saída, pelo que cores translúcidas fazem viagem de ida e volta corretamente.
• Gerador de paleta tonal. A linha de cinco degraus clarear/escurear é derivada do próprio HSL da sua cor, não de uma rampa enlatada — parece sempre a mesma família.
• Variável CSS pronta a colar. A linha --color-brand: #4f46e5; entra diretamente num bloco :root, a ser renomeada para o seu nome de token mais tarde.
• 100% do lado do cliente. Sem backend, sem pedido de rede. As suas cores de marca nunca saem da página.

Exemplo detalhado#

A página carrega com o índigo #4f46e5. Com essa entrada, os quatro campos preenchem-se como:

HEX:        #4f46e5
RGB:        rgb(79, 70, 229)
HSL:        hsl(243, 75%, 59%)
CSS var:    --color-brand: #4f46e5;

Note como a forma HSL hsl(243, 75%, 59%) se lê como uma frase: matiz 243 (um ângulo azul-violeta na roda de cores), 75% de saturação (bastante vivo), 59% de luminosidade (tom médio, ligeiramente mais clara do que o cinzento do meio). Se um designer lhe pedisse para “a tornar um pouco mais escura para um estado hover”, baixaria esse 59 para 49 e obteria hsl(243, 75%, 49%) — e de fato é exatamente a amostra dark que o gerador de paleta produz por baixo da pré-visualização, ao lado de light a 59% e dos extremos a 39% e 79%.

Se em vez disso partir de uma variável CSS que já possui, cole o seu valor no campo de texto. rgba(79, 70, 229, 0.5) é analisado como o mesmo índigo a 50% de opacidade, e a saída HEX passa a #4f46e580 (8 dígitos, alfa 0x80 ≈ 0.5), pronto a colar numa folha de estilo que prefere HEX.

Perguntas frequentes#

O meu designer deu-me #4f46e5 mas as ferramentas de dev mostram rgb(79, 70, 229). São a mesma cor?#

Sim, exatamente. HEX e RGB são duas serializações dos mesmos valores sRGB. #4f46e5 divide-se em pares de bytes 4f, 46, e5, que são o hex de 79, 70 e 229. Use o que o seu contexto preferir — o CSS trata-os como idênticos.

Quando devo ir buscar HSL em vez de HEX?#

Sempre que quiser mudar uma cor de forma previsível ao sentir. Escurear, clarear, desaturar, ou construir uma paleta de 5 tons a partir de uma cor de marca é um número em HSL e um equilíbrio frustrante de três vias em RGB. HEX é o melhor para armazenamento e copiar-colar; HSL é o melhor para editar.

Porque é que a paleta às vezes parece irregular em cores muito escuras ou claras?#

O gerador desloca a luminosidade em passos fixos de 10 pontos e limita a 0% e 100%. Perto desses limites os passos comprimem-se porque não há espaço para mais — uma cor já a 95% de luminosidade só tem 5 pontos de “mais clara” antes de hitting branco puro. Isso é uma propriedade do próprio espaço HSL, não um bug.

Esta ferramenta suporta P3 ou cores de gama alargada?#

Não. Trabalha no espaço sRGB que CSS HEX/RGB/HSL descrevem, que cobre a vasta maioria do trabalho web. Display-P3 e a sintaxe color() são um pipeline diferente e não são analisados aqui.