Conversor de Cores (HEX, RGB, HSL)

Q: Qual formato de cor devo usar?

HEX é o mais comum e conciso para a web. RGB é ótimo para cores com transparência (RGBA). HSL é o mais intuitivo para humanos, ideal para criar variações de uma cor (mais claro, mais escuro, etc.).

Converta cores facilmente entre os formatos HEX, RGB e HSL com um seletor de cores visual e feedback em tempo real. Ferramenta essencial para designers e desenvolvedores.

Clique na cor para mudar

HEX

RGB (Red, Green, Blue)

HSL (Hue, Saturation, Lightness)

Como Usar o Conversor de Cores

Converta qualquer formato de cor da web para outro instantaneamente. Nossa ferramenta oferece precisão e feedback em tempo real para o seu fluxo de trabalho de design e desenvolvimento.

Escolha sua Cor: Use o seletor de cores visual para escolher um tom, ou simplesmente cole qualquer código de cor (HEX, RGB ou HSL) em seu respectivo campo.
Veja a Conversão Instantânea: Todos os outros campos serão atualizados automaticamente com os valores equivalentes da cor que você inseriu.
Ajuste a Transparência (Alpha): Use o controle deslizante "Alpha" para ajustar a opacidade da cor. Os formatos RGBA e HSLA serão atualizados.
Copie o Código: Clique no ícone de cópia ao lado de qualquer formato para copiá-lo para sua área de transferência.

Entendendo os Formatos de Cor da Web

HEX, RGB e HSL são três maneiras de representar a mesma cor em design digital. Cada formato tem uma abordagem diferente e é útil em contextos específicos.

HEX (Hexadecimal): O formato mais comum e compacto na web. É uma representação de 6 dígitos do código de cor RGB, precedido por um #. Cada par de dígitos (00 a FF) representa a intensidade de Vermelho, Verde e Azul. Ex: #0D6EFD.
RGB (Red, Green, Blue): Representa as cores pela intensidade de luz vermelha, verde e azul. Cada valor varia de 0 (nenhuma) a 255 (máxima intensidade). É mais explícito sobre a composição da cor. Ex: rgb(13, 110, 253).
HSL (Hue, Saturation, Lightness): O formato mais intuitivo para humanos.
- Hue (Matiz): A posição da cor no círculo cromático (0 a 360 graus).
- Saturation (Saturação): A pureza ou intensidade da cor (0% = cinza, 100% = cor pura).
- Lightness (Luminosidade): O quão claro ou escuro é o tom (0% = preto, 50% = cor pura, 100% = branco).
Ex: hsl(211, 98%, 52%).

E a Transparência (Canal Alpha)?

Tanto o RGB quanto o HSL possuem uma variação que aceita um quarto valor: o "alpha", que controla a opacidade. O valor vai de 0 (totalmente transparente) a 1 (totalmente opaco). Exemplos:

rgba(13, 110, 253, 0.5): Azul com 50% de transparência.
hsla(211, 98%, 52%, 0.5): O mesmo azul com 50% de transparência.

Qual Formato de Cor Devo Usar?

A escolha depende do que você está tentando alcançar. Aqui está um guia rápido:

Formato	Ideal para...	Vantagem Principal
HEX	Definir cores sólidas e exatas em CSS. Padrão em ferramentas de design como Figma e Photoshop.	Concisão. É o formato mais curto e fácil de copiar e colar.
RGB / RGBA	Quando a transparência é necessária (RGBA) ou ao trabalhar com cores vindas de sistemas que usam o modelo aditivo de luz (como animações).	Controle de opacidade. A sintaxe RGBA é a mais comum para adicionar transparência a uma cor.
HSL / HSLA	Criar variações de uma cor de forma programática. Por exemplo, clarear um botão ao passar o mouse (hover) simplesmente aumentando o valor de "Lightness".	Intuitivo para humanos. É muito fácil de manipular para criar paletas de cores (ex: tons mais claros, mais escuros ou menos saturados).