EspañolCor HEX para classe do Tailwind
Digite ou escolha a cor da marca. A ferramenta compara com as 242 cores da paleta padrão do Tailwind e mostra as mais parecidas, com a classe pronta para copiar.
Qual cor do Tailwind é a mais próxima
Disponível em: 
Cor HEX para classe do Tailwind: para que serve
Quem usa Tailwind CSS e recebe a cor da marca em HEX quer saber qual cor da paleta padrão chega mais perto, para não encher o código de valores com colchetes.
A ferramenta compara a sua cor com as 242 cores da paleta do Tailwind 3 (de slate a rose, tons 50 a 950, mais branco e preto) usando a distância no espaço OKLab, que segue a percepção do olho. Mostra as cinco mais parecidas, com a classe pronta, e avisa quando nenhuma é parecida o suficiente.
Como usar
- Cole a cor em HEX ou rgb(), ou escolha no seletor.
- Escolha o prefixo da classe (bg, text, border…).
- Copie a classe da cor mais próxima ou o valor exato.
Quando usar
- Adaptar a cor da marca a um projeto Tailwind.
- Converter um layout do Figma para classes.
- Decidir se vale cadastrar uma cor nova no tema.
Perguntas frequentes
Como a cor mais próxima é escolhida?
Pela distância de cor no espaço OKLab, que segue a percepção do olho humano melhor do que comparar os números do RGB. Quanto menor a distância, mais parecidas as cores.
E se nenhuma ficar parecida?
Use o valor exato com colchetes, como bg-[#1f6feb], ou cadastre a cor da marca no tema (theme.extend.colors no tailwind.config ou @theme no Tailwind 4) com um nome, como brand.
A paleta é a do Tailwind 3 ou 4?
A comparação usa os valores HEX da paleta padrão do Tailwind 3. O Tailwind 4 definiu as mesmas cores em OKLCH, com tons ligeiramente mais vivos, mas os nomes (blue-600, red-500…) são os mesmos.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.