Generador de tonos de Tailwind: escalas de color personalizadas de manera sencilla

Tailwind CSS incluye una paleta de color cuidadosamente elaborada: 22 matices, cada uno con 11 tonos del 50 al 950. Cubre la gran mayoría de los casos de uso — pero en el momento en que necesitas usar el azul específico de tu marca, o un morado que coincida exactamente con el logotipo de tu empresa, la paleta integrada no es suficiente.

Aquí es donde un generador de tonos se vuelve esencial. Proporcionas un color — tu primario de marca, un acento, un color semántico — y el generador produce una escala completa del 50 al 950, formateada exactamente como un objeto de configuración de Tailwind CSS, lista para incorporar en tu tailwind.config.js.

Esta guía explica cómo funciona el sistema de tonos de Tailwind, cómo generar escalas personalizadas usando el Generador de tonos de ColorFYI, y cómo configurar Tailwind para usarlas eficazmente, incluyendo el modo oscuro.

Cómo funciona el sistema de tonos de Tailwind

La escala de color de Tailwind se basa en un sistema numérico de 11 pasos:

50  100  200  300  400  500  600  700  800  900  950

Cada paso representa un nivel de luminosidad perceptual:

• 50 es el más claro — casi blanco, solo una pizca de color
• 500 es el color "puro" — completamente saturado, luminosidad media
• 950 es el más oscuro — casi negro, tinte profundo

Los números no son arbitrarios. Están espaciados para crear saltos perceptuales de luminosidad aproximadamente uniformes. La diferencia entre 100 y 200 se ve igual a tu ojo que la diferencia entre 700 y 800.

¿Por qué 11 pasos?

11 pasos proporcionan suficiente granularidad para cubrir todos los casos de uso comunes en una UI:

Este sistema hace que cada color de Tailwind funcione como un mini sistema de diseño por sí mismo. Si necesitas texto blanco legible sobre un botón relleno, usa -600. Si necesitas un tinte de fondo apenas perceptible, usa -50.

La escala 50–950 en detalle

Veamos un ejemplo concreto usando la escala violet integrada de Tailwind:

Observa que el color base violet-500 se sitúa aproximadamente en el 57% de luminosidad — no exactamente en el medio del rango 0–100%, sino ligeramente por encima del punto medio para mantener la escala visualmente equilibrada. Los tonos muy oscuros se comprimen en un rango de luminosidad menor (15–40%) porque el ojo humano distingue los tonos oscuros con menos precisión que los claros.

Generación de escalas de color personalizadas

Uso del Generador de tonos de ColorFYI

El Generador de tonos toma cualquier código hex y produce una escala con formato Tailwind completa. El flujo de trabajo es:

Paso 1: Ingresa el color de tu marca en el campo de entrada.

Por ejemplo, tu marca usa el azul exacto #0057B8 — un azul medio-oscuro usado por muchas marcas corporativas.

Paso 2: El generador calcula los 11 tonos usando un algoritmo perceptualmente uniforme, mostrando el código hex y una vista previa visual de cada paso.

Paso 3: Copia el bloque de configuración de Tailwind generado.

La salida para #0057B8 se ve aproximadamente así:

brand: {
  50:  '#E6F0FF',
  100: '#CCE1FF',
  200: '#99C3FF',
  300: '#66A4FF',
  400: '#3386FF',
  500: '#0057B8',  // Tu color de entrada, anclado en 500
  600: '#0049A3',
  700: '#003B8A',
  800: '#002D6B',
  900: '#001F4D',
  950: '#001230',
},

Qué significa "anclar"

El generador de tonos ancla tu color de entrada en la posición 500 de forma predeterminada. Esto significa que el color de entrada se convierte en el centro de la escala — se generan cinco tonos más claros por encima y cinco más oscuros por debajo.

Algunos generadores permiten anclar en una posición diferente. Si el color de tu marca ya es un azul marino muy oscuro, anclarlo en 700 u 800 puede producir un rango más útil. Si es un pastel muy claro, anclar en 200 o 300 tiene más sentido. El Generador de tonos te permite ajustar el punto de anclaje.

Por qué importa la uniformidad perceptual

Un generador de tonos ingenuo podría simplemente disminuir el valor L de HSL en incrementos iguales: 95%, 85%, 75%, 65%, 55%, 45%, 35%, 25%, 15%. Las matemáticas son simples, pero el resultado visual es desigual. Las transiciones en el extremo claro de la escala parecen más espaciadas que en el extremo oscuro, porque la visión humana es más sensible a las diferencias de luminosidad en los tonos medios.

El generador de ColorFYI usa interpolación de luminosidad OKLCH, que produce pasos que parecen visualmente equidistantes — coincidiendo con la calidad perceptual de las escalas predeterminadas elaboradas a mano de Tailwind.

Configuración de tailwind.config.js

Extensión con un color personalizado

La forma más segura de añadir una escala de color personalizada es extender los valores predeterminados de Tailwind en lugar de reemplazarlos:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#E6F0FF',
          100: '#CCE1FF',
          200: '#99C3FF',
          300: '#66A4FF',
          400: '#3386FF',
          500: '#0057B8',
          600: '#0049A3',
          700: '#003B8A',
          800: '#002D6B',
          900: '#001F4D',
          950: '#001230',
        },
      },
    },
  },
}

Después de añadir esto, puedes usar clases como bg-brand-500, text-brand-700, border-brand-200 y hover:bg-brand-600 en todo el proyecto.

Reemplazo de un color integrado

Si quieres reemplazar completamente un color predeterminado (por ejemplo, reemplazar el blue de Tailwind con tu azul de marca):

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50:  '#E6F0FF',
          // ... hasta el 950
        },
      },
    },
  },
}

Las clases como bg-blue-500, text-blue-700 usarán ahora tu escala personalizada en lugar del azul integrado de Tailwind.

Uso de variables CSS para temas en tiempo de ejecución

Para aplicaciones que necesitan cambio de tema en tiempo de ejecución (por ejemplo, productos de marca blanca, temas personalizables por el usuario), define la escala como propiedades personalizadas CSS:

/* globals.css */
:root {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  'var(--color-brand-50)',
          100: 'var(--color-brand-100)',
          // ... hasta el 950
        },
      },
    },
  },
}

Ahora, cambiar las variables CSS en tiempo de ejecución (mediante JavaScript) recolorea toda la UI al instante.

Configuración de Tailwind v4

Tailwind CSS v4 traslada toda la configuración a CSS usando @theme:

@import "tailwindcss";

@theme {
  --color-brand-50:  #E6F0FF;
  --color-brand-100: #CCE1FF;
  --color-brand-200: #99C3FF;
  --color-brand-300: #66A4FF;
  --color-brand-400: #3386FF;
  --color-brand-500: #0057B8;
  --color-brand-600: #0049A3;
  --color-brand-700: #003B8A;
  --color-brand-800: #002D6B;
  --color-brand-900: #001F4D;
  --color-brand-950: #001230;
}

No se necesita tailwind.config.js. Las variables --color-brand-* están disponibles automáticamente como clases de utilidad (bg-brand-500, text-brand-700, etc.).

Tonos para el modo oscuro

El modo oscuro no invierte tu escala de color — invierte qué tonos usas. La misma escala funciona tanto para modo claro como oscuro; simplemente intercambias qué extremo de la escala gestiona los fondos y cuál gestiona el texto.

El principio de inversión

El color del botón relleno (brand-500) es el mismo en ambos modos — es el punto de anclaje. Todo lo que lo rodea se invierte: los fondos claros se convierten en fondos oscuros, el texto oscuro se convierte en texto claro.

Implementación con el modo oscuro de Tailwind

<!-- Fondo: claro-50 en modo claro, oscuro-950 en modo oscuro -->
<div class="bg-brand-50 dark:bg-brand-950">

  <!-- Tarjeta: claro-100 en modo claro, oscuro-900 en modo oscuro -->
  <div class="bg-brand-100 dark:bg-brand-900 rounded-lg p-6">

    <!-- Encabezado: texto oscuro-900 en modo claro, claro-100 en modo oscuro -->
    <h2 class="text-brand-900 dark:text-brand-100">Título de la tarjeta</h2>

    <!-- Texto de cuerpo: oscuro-700 en modo claro, claro-300 en modo oscuro -->
    <p class="text-brand-700 dark:text-brand-300">El contenido de la tarjeta va aquí.</p>

    <!-- Botón: siempre brand-500, el hover cambia de dirección según el modo -->
    <button class="bg-brand-500 hover:bg-brand-600 dark:hover:bg-brand-400 text-white">
      Acción
    </button>

  </div>
</div>

Generación de una paleta oscura separada

Para algunos sistemas de diseño, especialmente aquellos con una separación visual significativa entre el modo claro y el oscuro, puede ser conveniente generar una escala "oscura" separada. Esta podría ser:

• Una versión ligeramente más cálida o más fría del mismo matiz (más saturada para el modo oscuro, ya que los fondos oscuros necesitan colores más vívidos para lucir equivalentes)
• Un matiz complementario que funcione mejor sobre fondos oscuros

Genera ambas escalas con el Generador de tonos y defínelas como tokens separados:

:root {
  /* Escala de modo claro */
  --color-brand-500: #0057B8;
}

[data-theme="dark"] {
  /* Escala de modo oscuro (ligeramente más saturada) */
  --color-brand-500: #3386FF;
}

Escenarios comunes de escalas personalizadas

Coincidir exactamente con un color de marca

Muchas guías de marca especifican un único código Pantone o hex. Si el color de tu marca es #E63946 (un rojo vívido), genera la escala anclada en 500. Tu rojo de marca se convierte en brand-500 y obtienes el rango completo para flexibilidad de diseño.

Añadir un gris neutro cálido

Las escalas de gris predeterminadas de Tailwind se inclinan hacia el frío. Para crear un gris cálido que armonice con un primario naranja o rojo, genera una escala de tonos para un color cálido desaturado como #8B7355 y úsalo como gris neutro. El leve calor crea coherencia visual con tu primario.

Creación de escalas de color semánticas

Tu sistema de diseño probablemente necesita escalas semánticas:

• Éxito: Genera desde un verde como #16A34A
• Advertencia: Genera desde un ámbar como #D97706
• Error/Peligro: Genera desde un rojo como #DC2626
• Información: Genera desde un azul cielo como #0284C7

Cada una se convierte en una escala con nombre en tu configuración (success, warning, error, info) junto a las escalas primary y neutral de tu marca.

Conclusiones clave

• El sistema de tonos 50–950 de Tailwind proporciona 11 pasos de luminosidad perceptualmente espaciados, desde casi blanco hasta casi negro, diseñados para cubrir todos los casos de uso de UI.
• El Generador de tonos de ColorFYI convierte cualquier código hex único en una escala completa lista para Tailwind usando un algoritmo perceptualmente uniforme.
• Extiende tailwind.config.js usando theme.extend.colors para añadir escalas personalizadas sin perder los valores predeterminados de Tailwind; usa @theme en Tailwind v4.
• Usa propiedades personalizadas CSS (var(--color-brand-500)) para el cambio de tema en tiempo de ejecución y aplicaciones de marca blanca.
• El modo oscuro no necesita un color diferente — usa la misma escala invertida: los tonos claros se convierten en fondos, los tonos oscuros en texto.
• Genera escalas separadas para tu color primario, neutro/gris y semánticos (success, warning, error, info) para construir un sistema de diseño completo.
• Usa la convención de nomenclatura numérica de manera consistente para que los desarrolladores sepan exactamente qué tono usar: 600 para estados hover, 700 para texto accesible sobre blanco, 100 para fondos sutiles.