Conversor de cores

Uma cor, todos os formatos

Ferramentas de design, CSS, manuais de marca e bibliotecas de código descrevem cores de jeitos diferentes. Um designer manda #8997BB, uma biblioteca de gráficos pede rgb(137, 151, 187) e você quer um valor HSL para criar um tom mais claro. Este conversor aceita uma cor em qualquer formato comum e mostra em todos os outros.

Os formatos aceitos são HEX (#8997BB), HEX com alfa (#8997BBCC), RGB, RGBA, HSL, HSLA e HSV. Cole um e copie a versão de que precisa.

Guia rápido: HEX e RGB descrevem as quantidades de luz vermelha, verde e azul. HSL descreve o matiz (a posição no círculo cromático, de 0 a 360°), a saturação e a luminosidade, o que facilita criar tons mais claros e mais escuros. HSV (também chamado de HSB) é o usado em muitos seletores de cor de apps de design. As versões com "A" adicionam um canal alfa para transparência.

Como usar o conversor de cores

1. Digite uma cor em qualquer formato aceito, por exemplo #8997BB, rgb(137,151,187) ou hsl(223, 27%, 63%).
2. Envie para converter.
3. Copie dos resultados o formato de que precisa.
4. Cole no seu CSS, arquivo de design ou código.

Usos comuns

• Passar as cores de um manual de marca para valores CSS.
• Obter valores RGBA ou HSLA para dar transparência a uma camada ou sombra.
• Usar HSL para criar variações mais claras e mais escuras de uma cor da marca para estados de hover.
• Igualar cores entre apps como Figma, Photoshop, Canva e o código.
• Conferir se dois valores de fontes diferentes são mesmo a mesma cor.

Dicas e coisas para saber

• O HEX de três dígitos é uma abreviação: #ABC é o mesmo que #AABBCC.
• No HEX de oito dígitos, os dois últimos são o alfa: FF é totalmente opaco e 00 totalmente transparente; 80 é cerca de 50%.
• HSL e HSV não são a mesma coisa, embora os dois usem matiz e saturação. Use o que corresponde à ferramenta onde você vai colar.
• Confira a legibilidade: o texto precisa de contraste suficiente com o fundo (as WCAG recomendam pelo menos 4,5:1 para texto normal).
• Para escolher uma cor visualmente, use o seletor de cores. Para uma conversão específica, experimente HEX para RGB ou RGB para HEX.

Perguntas frequentes

O que é um código de cor HEX?

Um código HEX é um número hexadecimal de seis dígitos precedido de #. Cada par de dígitos define o vermelho, o verde e o azul, de 00 (nada) a FF (máximo), então #FF0000 é vermelho puro.

Qual é a diferença entre RGB e RGBA?

RGBA adiciona um quarto valor, o alfa, de 0 (transparente) a 1 (opaco). rgba(0, 0, 0, 0.5) é preto com 50% de opacidade.

Por que usar HSL em vez de HEX?

HSL é mais fácil de ajustar para pessoas. Mudando só a luminosidade, você obtém versões mais claras ou mais escuras do mesmo tom, o que ajuda a montar paletas de cores.

HSV e HSB são a mesma coisa?

Sim. HSB (matiz, saturação, brilho) é outro nome para HSV (matiz, saturação, valor).

O CSS aceita todos esses formatos?

Os navegadores modernos aceitam HEX, HEX com alfa, rgb(), rgba(), hsl() e hsla() diretamente no CSS. HSV não é um formato CSS, então converta antes.

Ferramentas relacionadas

• Seletor de cores: O jeito mais fácil de escolher uma cor na roda de cores e obter o resultado em qualquer formato.
• HEX para RGB: Converta facilmente cores HEX em RGB com este conversor.
• RGB para HEX: Converta facilmente cores RGB em HEX com este conversor.
• Otimizador de imagens: Comprima e otimize imagens para ficarem mais leves sem perder qualidade.
• Conversor hexadecimal: Converta texto em hexadecimal e vice-versa.