colorize
ColorKit
CK

Generador de Colores Tailwind CSS

Introduce el color primario de tu marca y generaremos una escala matemática 50-950 lista para Tailwind CSS v3 o v4.

Generated Scale

50

#F1F6FD

100

#E2ECFC

200

#C2D7F9

300

#9EC0F7

400

#75A6F6

500

#3B82F6

600

#1468F0

700

#0F50B9

800

#0C3679

900

#071938

950

#030A17

Component Preview

Buttons

Alerts & Badges

System Update

The server will restart in 5 minutes. (50/500/700/900)

Badge (100/800)Solid (600)

¿Cómo funciona la escala de sombras de Tailwind?

Tailwind CSS utiliza una escala de luminosidad 50-950 para construir sistemas de diseño cohesivos y adaptables.

  • 50 - 100: Fondos muy suaves y paneles con ligero tinte.
  • 200 - 400: Bordes discretos, estados inactivos y transiciones hover.
  • 500 - 600: Acciones primarias, botones principales y estados activos.
  • 700 - 950: Texto oscuro, insignias de alto contraste y fondos de modo oscuro.
Base de Conocimiento & FAQ

Preguntas Frecuentes

Respuestas y soluciones directas a dudas comunes, desafíos técnicos y estándares del sector.

¿Cómo calcula Tailwind CSS su escala de sombras y matices del 50 al 950?expand_more
La escala numérica de Tailwind organiza los tonos de más claros a más oscuros:
  • 50–100: Tintes pastel muy luminosos (~95% a 90% de luminosidad) ideales para fondos de tarjetas y alertas.
  • 200–400: Tonos medios suaves para bordes, divisores, estados deshabilitados y fondos con hover.
  • 500–600: El tono base de la marca (500) y su estado interactivo (600) para botones principales.
  • 700–900: Tonos profundos para texto, títulos y superficies de alto contraste en modo oscuro.
  • 950: Tono ultraduro casi negro (~5% a 10% de luminosidad) para paneles oscuros de máximo contraste.
¿Cómo añadir tonos de color personalizados en Tailwind CSS v3 frente a Tailwind CSS v4?expand_more
En Tailwind CSS v3 (configuración JavaScript): Añade la escala generada en tailwind.config.js dentro de theme.extend.colors: 
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#F0F9FF',
          500: '#0EA5E9',
          900: '#0C4A6E',
        }
      }
    }
  }
}
En Tailwind CSS v4 (CSS puro): Decláralos directamente en tu archivo CSS utilizando la directiva @theme: 
@theme {
  --color-brand-50: #F0F9FF;
  --color-brand-500: #0EA5E9;
  --color-brand-900: #0C4A6E;
}
¿Por qué mezclar simplemente negro o blanco hace que los colores parezcan lavados?expand_more
Aclarar u oscurecer de forma lineal aplana la saturación cromática, produciendo pasteles calcáreos y oscuros turbios. Las paletas profesionales de Tailwind implementan desplazamiento de matiz (hue shifting): a medida que los colores se aclaran, el matiz gira sutilmente hacia tonos cálidos (luz solar), y al oscurecerse, gira hacia sombras frías, conservando la energía cromática.
¿Qué tono de Tailwind se recomienda para encabezados, párrafos y bordes?expand_more
Recomendaciones habituales de jerarquía:
  • Encabezados (H1–H3): text-slate-900 o text-neutral-900 para máximo contraste.
  • Párrafos de texto corrido: text-slate-700 o text-neutral-600 para lectura confortable.
  • Subtítulos y notas: text-slate-500.
  • Bordes de tarjetas e inputs: border-slate-200 (modo claro) y border-slate-800 (modo oscuro).