Cor Tailwind CSS para HEX: Consulta de Cores

Consulta de Cor Tailwind CSS para HEX

blue-500 é #3b82f6, que é rgb(59, 130, 246). O sistema de cores do Tailwind usa uma paleta fixa de cores nomeadas com tonalidades numeradas de 50 a 950. Cada tonalidade mapeia para um valor hex específico que é consistente entre versões do Tailwind dentro da mêsma versão principal.

A Estrutura da Escala de Cores

Cada família de cores do Tailwind usa a mêsma escala numérica. Os números representam a luminosidade em uma progressão apróximadamente linear:

Cores Comuns com Valores HEX

Uma referência das tonalidades mais usadas na prática:

As Famílias de Cinza Comparadas

O Tailwind vem com cinco famílias de cinza. As diferenças são mais relevantes em tons escuros:

Para fundos em modo escuro, zinc e neutral são populares porque evitam o tom azul que faz slaté e gray parecerem frios em algumas telas. Stone é útil para UIs com tons quentes.

Cores Personalizadas no tailwind.config.js

Para estender a paleta sem substituí-la:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          900: '#1e3a8a',
        },
      },
    },
  },
}

Issó adiciona bg-brand-500, text-brand-600, border-brand-100 e todas as outras variantes de utilidade automaticamente.

Para substituir toda a paleta (remover todos os padrões):

module.exports = {
  theme: {
    colors: {
      // apenas suas cores aqui
    },
  },
}

Tailwind v4 e Propriedades Personalizadas CSS

O Tailwind v4 move a configuração do tailwind.config.js para CSS usando a diretiva @theme:

@import "tailwindcss";

@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;
}

Todas as cores padrão do Tailwind também são expostas como propriedades personalizadas CSS:

.custom-element {
  background: var(--color-blue-500);
  border-color: var(--color-blue-200);
}

Acessando Valores da Paleta em JavaScript

No Tailwind v3, use resolveConfig para obter valores hex em tempo de execução:

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from './tailwind.config.js';

const config = resolveConfig(tailwindConfig);
const blue500 = config.theme.colors.blue[500]; // '#3b82f6'

No Tailwind v4, leia as propriedades personalizadas CSS do estilo computado:

const blue500 = getComputedStyle(document.documentElement)
  .getPropertyValue('--color-blue-500')
  .trim(); // '#3b82f6'