Color Tailwind CSS a HEX: Buscador de Colores

Buscador de Color Tailwind CSS a HEX

blue-500 es #3b82f6, que es rgb(59, 130, 246). El sistema de color de Tailwind usa una paleta fija de colores con nombre con tonos numerados del 50 al 950. Cada tono se asigna a un valor hex específico que es consistente entre versiones de Tailwind dentro del mismo lanzamiento principal.

Estructura de la Escala de Color

Colores Comunes y Valores HEX

Comparación de Familias de Grises

Colores Personalizados en tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
    },
  },
}

Esto agrega automáticamente bg-brand-500, text-brand-600 y todas las demas variantes de utilidad.

Tailwind v4 y Propiedades Personalizadas CSS

@import "tailwindcss";

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

En v4, estas variables están disponibles como propiedades CSS nativas: background: var(--color-brand-500). No se necesita una clase de utilidad.

Depuración de Colores Tailwind

Cuándo un color Tailwind no se ve como esperabas, el problema suele ser:

• Valor de tono incorrecto. blue-500 y blue-600 son significativamente diferentes. Verifica el tono contra la tabla.
• Familia de gris incorrecta. slate-700 y stone-700 se ven diferentes. Si tu diseño usa un gris calido y estás usando slate, los fondos se verán frios.
• Opacidad. Tailwind divide las clases de opacidad: bg-blue-500/50. Sin la barra, la opacidad es 100%.