EspañolES

Generador de escalas de color para Tailwind CSS (50–950)

Elige un color base y un nombre para obtener todos los tonos del 50 al 950 con la configuración lista para pegar.

Tus textos y archivos no salen de tu navegador: no se envía nada a ningún servidor.

Haz clic en una muestra para copiar su HEX. La cifra es el contraste del color de texto, blanco o negro, que mejor se lee sobre ella.

Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
Vista previa
Guardado. Tus cambios ya están activos.
EmpezarMás informaciónNuevo

Cómo se usa

  1. Elige un color base o escribe un código HEX, y pon el nombre que usarás en las clases, por ejemplo brand.
  2. Los tonos del 50 (el más claro) al 950 (el más oscuro) se reparten según la luminosidad OKLCH. Con “Mantener mi color en el tono más cercano” activado, tu color aparece tal cual en la paleta.
  3. En v4, pega el bloque @theme en tu CSS. En v3, pega la sección colors en tailwind.config.js. Después usa clases como bg-brand-500.
  4. Mira la vista previa para ver la paleta en un botón, una etiqueta y un cuadro de aviso.

Preguntas frecuentes

¿Por qué calcular la paleta en OKLCH?

OKLCH se basa en la luminosidad percibida, así que los tonos se ven espaciados de forma pareja y colores como el amarillo y el azul no dan saltos de brillo. Los colores por defecto de Tailwind v4 también están escritos en oklch().

¿Coincide con los colores que trae Tailwind?

No. La herramienta usa sus propias curvas de luminosidad y croma, así que los valores difieren de la paleta oficial. Sirve para crear rápido una escala parecida a partir del color de tu marca.

¿Qué pasa con los colores que la pantalla no puede mostrar?

Se mantienen la luminosidad y el tono, y solo se reduce el croma hasta que el color cabe en sRGB. Los colores muy saturados pueden verse algo más apagados en algunos tonos.

Tailwind CSS es una marca de Tailwind Labs Inc. Esta herramienta no está afiliada a Tailwind Labs ni cuenta con su respaldo.

Herramientas relacionadas

Selector de colorHEX, RGB, HSL y CMYK en un solo lugarContraste de colorRelación de contraste con resultados AA y AAADegradado CSSDegradados lineales, radiales y cónicosArte ASCIITexto y fotos hechos con caracteres

Todas las herramientas