Conversor de cores CSS

Converte HEX em RGB, HSL e valores arbitrários Tailwind.

CSS

    
  

Sobre esta ferramenta

O conversor transforma uma cor HEX nos equivalentes RGB e HSL e gera uma classe de fundo arbitrária do Tailwind pronta a colar no marcador. Serve bem para cores de marca ausentes da paleta predefinida.

Como usar

Altere o campo HEX e o resultado atualiza os canais e a forma bg-[#…]. Depois copie a notação de que o seu componente precisa.

Exemplo

A cor azul-céu predefinida mostra HEX, RGB, HSL e a classe arbitrária.

Entrada

#38bdf8

Saída

HEX: #38BDF8
RGB: rgb(56, 189, 248)
HSL: hsl(199, 93%, 60%)
Tailwind arbitrary: bg-[#38bdf8]

Dica

Valores arbitrários são Tailwind válido; aproximar a cor ao tom mais próximo da paleta costuma estragar a identidade.

Bom saber

Que formatos de cor converte?

Escreva um valor HEX de 3 ou 6 dígitos (ou use o seletor) e obtém RGB, HSL e uma classe arbitrária Tailwind como bg-[#38bdf8].

Porquê uma classe arbitrária e não a cor Tailwind mais próxima?

As cores de marca raramente coincidem com a paleta padrão. Aproximar altera o seu design sem aviso, enquanto bg-[#hex] mantém a cor exata.

Extensão do Chrome