Bhinish Dhiman· Actualizado 5 de octubre de 2026
Cómo crear una escala de colores personalizada en Tailwind que pase el contraste
Traducido del original en inglés. Leer el original
Define un color base y un nombre, revisa las vistas previas clara y oscura, y copia el bloque @theme de Tailwind v4 o la config de v3. En la escala por defecto de #0066ff, los pasos 600 a 950 sirven para texto de cuerpo sobre blanco (600 con 5.68:1) y los pasos 50 a 500 sobre negro, mientras que 500 solo llega a 3.96:1 sobre blanco. La falla habitual es el borde del campo de entrada en 300: 1.86:1 sobre blanco, cuando se necesita 3:1.
Agregar un color de marca a Tailwind es rápido. Saber en cuál de sus once pasos puedes poner texto es la parte que suele saltarse, y es la razón por la que un 500 intenso termina tan a menudo como texto de cuerpo. La herramienta colores de Tailwind construye la escala, la muestra en los componentes que la gente realmente publica y pone un ratio medido debajo de cada uno.
Una escala de colores de Tailwind es una escala de once pasos registrada bajo un nombre, de modo que existan utilidades como bg-brand-500 y text-brand-700. En Tailwind v4 se declara en CSS, dentro de un bloque @theme, y no en una config de JavaScript, y la propia paleta por defecto de v4 está escrita en OKLCH.
Cómo crear la escala
- Define el color base. Escribe un código hex en “Base colour” (color base). La herramienta abre con #0066ff.
- Define el nombre. Lo que escribas en “Name” (nombre) se convierte en la parte central de cada utilidad, así que “brand” da
bg-brand-500. - Lee la escala. Pasos del 50 al 950, cada uno con su hex; “yours” (el tuyo) marca el paso más cercano a tu color base.
- Alterna entre Light y Dark. Usa el interruptor Light/Dark a la derecha de los controles, o la tecla D. Las vistas previas se vuelven a dibujar con el otro tema.
- Lee la línea debajo de cada vista previa. Cada una da el ratio medido, qué se está midiendo y el umbral. Un cuadrado relleno significa que aprueba; uno vacío, que no.
- Elige el formato de salida y cópialo. Tailwind v4, Tailwind v3 o CSS vars, y luego Copy. Copy scale en la barra inferior (o la tecla C) hace lo mismo.
- Pégalo. Para v4, agrega el bloque
@themeal archivo CSS que importa Tailwind. Para v3, pon la entrada con nombre dentro detheme.extend.colorsen tu config, lo que conserva la paleta por defecto de Tailwind junto a la tuya.
Usa el selector de formato de salida, no el Export de la barra inferior, cuya salida para Tailwind numera los pasos del 1 al 11 en lugar del 50 al 950.
Cómo se ve cada formato de salida
La salida de v4 escribe cada paso en OKLCH, con la luminosidad a un decimal, el croma a tres y el tono a uno:
@theme {
--color-brand-50: oklch(…);
/* … nine more … */
--color-brand-950: oklch(…);
}La salida de v3 es una entrada colors en hex bajo un comentario // tailwind.config.js. CSS vars da de --brand-50 a --brand-950 en un bloque :root, sin el prefijo --color-, así que en v4 define variables pero no genera utilidades. Úsala cuando la escala tenga que llegar a código fuera de Tailwind.
Qué pasos pueden llevar texto
Estas son las cifras que muestra la herramienta para su base por defecto, #0066ff, medidas con el mismo código que dibuja las vistas previas. Tu tono las moverá un poco; el patrón se mantiene.
| Paso | Hex | Sobre blanco | Sobre negro | Texto de cuerpo (4.5:1) sobre |
|---|---|---|---|---|
| 50 | #f1f6ff | 1.08:1 | 19.36:1 | Negro |
| 100 | #e0ebff | 1.20:1 | 17.49:1 | Negro |
| 200 | #c1d8ff | 1.44:1 | 14.53:1 | Negro |
| 300 | #99bfff | 1.86:1 | 11.25:1 | Negro |
| 400 | #659dff | 2.68:1 | 7.82:1 | Negro |
| 500 | #2d79ff | 3.96:1 | 5.29:1 | Negro; sobre blanco solo texto grande |
| 600 | #005ce8 | 5.68:1 | 3.69:1 | Blanco; sobre negro solo texto grande |
| 700 | #0048b9 | 7.99:1 | 2.62:1 | Blanco |
| 800 | #00358d | 11.08:1 | 1.89:1 | Blanco |
| 900 | #012464 | 14.60:1 | 1.43:1 | Blanco |
| 950 | #011540 | 17.75:1 | 1.18:1 | Blanco |
500 y 600 son los dos pasos que funcionan en una sola dirección, y ningún paso de la escala sirve para texto de cuerpo sobre ambos fondos. Por eso falla un 500 intenso usado como texto de cuerpo en una página blanca.
Qué miden las vistas previas
Cada vista previa prueba una combinación distinta, y el tema oscuro no es simplemente el claro invertido. Las vistas previas claras van sobre paneles blancos encima de una página en el paso 50; las oscuras van sobre paneles en el paso 900 encima del paso 950.
| Línea de la vista previa | Par en tema claro | Par en tema oscuro | Necesita | #0066ff, claro / oscuro |
|---|---|---|---|---|
| etiqueta primaria | Blanco o negro, el que dé más contraste, sobre 600 | Lo mismo, sobre 500 | 4.5:1 | 5.68 / 5.29 |
| etiqueta secundaria | 800 sobre 100 | 100 sobre 800 | 4.5:1 | 9.23 / 9.23 |
| insignia sutil, 11px | 700 sobre 100 | 200 sobre 800 | 4.5:1 | 6.65 / 7.67 |
| borde del campo de entrada | 300 sobre blanco | 700 sobre 900 | 3:1 | 1.86 / 1.82 |
| texto de una alerta | 700 sobre 50 | 300 sobre 900 | 4.5:1 | 7.37 / 7.82 |
| encabezado de tabla | 600 sobre 50 | 300 sobre 900 | 4.5:1 | 5.23 / 7.82 |
| serie sobre superficie | 600 sobre blanco | 600 sobre 900 | 3:1 | 5.68 / 2.57 |
El borde y la gráfica oscura
Dos líneas de esa tabla fallan, y ninguna es un par de texto.
El contraste de elementos no textuales es el requisito de WCAG, criterio de conformidad 1.4.11, según el cual las partes de una interfaz necesarias para identificar un control, como el borde de un campo de entrada o un anillo de foco, deben alcanzar 3:1 frente a lo que tienen al lado. La vista previa del campo de entrada dibuja su borde en 300 sobre blanco: 1.86:1. Incluso 400 solo alcanza 2.68:1. Si el borde es lo que indica que ahí hay un campo, usa 500 o uno más oscuro sobre un panel blanco.
El tema oscuro repite el problema como en un espejo. Un borde en 700 sobre un panel en 900 da 1.82:1, y una serie de gráfica en 600 sobre ese panel da 2.57:1, ambos por debajo de 3:1. Sobre un panel en 900, 500 es el primer paso que lo supera, con 3.67:1.
Así que, cuando escribas componentes con la nueva escala, los bordes y los colores de las gráficas merecen el mismo escrutinio que el texto, y en modo oscuro piden un paso más claro del que sugiere la costumbre del tema claro.
Cómo hacerlo a mano
Tailwind no genera una escala a partir de un color; las once líneas las escribes tú. Es fácil de hacer y fácil de hacer mal exactamente de la forma que muestran las tablas de arriba, así que, si lo haces a mano, prueba el borde en 300 y la etiqueta en 600 en el verificador de contraste antes de publicar nada. La herramienta guarda el base y el nombre después del # en su dirección, una parte que el navegador no envía al servidor, así que el color en el que estás trabajando se queda en tu equipo.
Abre colores de Tailwind, define tu base y lee la línea del borde del campo de entrada antes que nada. Si quieres tokens de rol, como un color de texto y un color de borde elegidos midiendo, el generador de escalas y tokens construye los mismos once pasos y los asigna. Para entender por qué OKLCH reemplazó a HSL en este tipo de trabajo, consulta OKLCH para diseñadores.