Generador de tonos Tailwind CSS
Genera los 11 tonos de Tailwind CSS (50 a 950) de un color y copia el código para Tailwind v4, v3 o variables CSS.
Haz clic en un tono para copiar su código. Tu color se coloca en el tono más cercano a su luminosidad.
Todo funciona en tu navegador: no se envía ningún dato.
Sobre esta herramienta
Este generador de tonos Tailwind CSS crea, a partir de un solo color, una escala completa de 11 tonos numerados del 50 al 950, igual que los colores integrados de Tailwind. Tu color se coloca en el tono con la luminosidad más parecida y los demás se calculan en el espacio OKLCH manteniendo el mismo matiz. Ideal para convertir el color de una marca en una paleta lista para un proyecto web.
Ponle nombre al color (brand por defecto) y elige el formato del código: bloque @theme para Tailwind v4 con valores oklch(), objeto para tailwind.config.js en Tailwind v3, variables CSS o JSON. Haz clic en cualquier tono para copiar su código HEX. El botón Aleatorio propone un color de partida y el enlace para compartir conserva tu color.
- 11 tonos del 50 al 950 con un clic
- Código Tailwind v4 (@theme) con valores oklch()
- Configuración Tailwind v3, variables CSS o JSON
- Nombre del color personalizable en el código
- Copia el HEX de un tono con un clic
Cómo usarla
- Escribe tu «Color base» en HEX o elígelo con el selector.
- Indica el «Nombre del color» que se usará en el código.
- Elige el «Formato del código»: Tailwind v4, Tailwind v3, variables CSS o JSON.
- Pulsa «Copiar» y pega el código en tu proyecto.
Preguntas frecuentes
¿Se envía mi color a un servidor?
No. Los tonos se calculan en tu navegador y no se envía ningún dato. El color base solo se guarda en la dirección de la página para el enlace para compartir.
¿El generador de tonos Tailwind es gratis?
Sí, es gratuito y funciona sin cuenta ni registro.
¿Qué diferencia hay entre los formatos Tailwind v4 y v3?
El formato v4 genera un bloque @theme con variables de --color-nombre-50 a --color-nombre-950 en oklch(). El formato v3 genera un objeto colors para tailwind.config.js con códigos HEX.
¿Por qué mi color no siempre es el tono 500?
La herramienta coloca tu color en el tono con la luminosidad más parecida: un color claro puede quedar como 200 y uno oscuro como 800. Tu código exacto se mantiene en esa posición y aparece marcado como «tu color».