paletta

Generador de escalas de tonos de Tailwind

Ingresa un color base, obtén una escala de tonos completa de 50 a 950. Parte de generador de paletas de color con IA.

Respuesta rápida: Una escala de tonos es un conjunto de variaciones de luminosidad derivadas de un solo color base. En Tailwind CSS, las escalas van de 50 (el más claro) a 500 (base) y llegan a 950 (el más oscuro).

Método
colors: {
  'color': {
      '50': '#e7f6ff',
      '100': '#c5e0ff',
      '200': '#a0c9ff',
      '300': '#7bb2ff',
      '400': '#5a9aff',
      '500': '#3b82f6',
      '600': '#2164cf',
      '700': '#0b48a4',
      '800': '#002f76',
      '900': '#00174c',
      '950': '#000325',
  }
}

Cómo funciona

  1. Ingresa tu color base

    Se convierte en el paso 500 de tu escala.

  2. Revisa la escala generada

    11 tonos, de casi blanco (50) a casi negro (950).

  3. Copia el resultado

    Elige config de Tailwind, variables CSS o JSON.

¿Qué es una escala de tonos?

Una escala de tonos es un conjunto de variaciones de luminosidad derivadas de un solo color base. En Tailwind CSS, las escalas van de 50 (el más claro) a 500 (base) y llegan a 950 (el más oscuro), y cada paso cumple un rol específico: 50 para fondos, 100 a 200 para estados hover, 500 para acciones primarias, 700 a 900 para texto.

Construir escalas perceptualmente uniformes a mano es tedioso. Los mismos pasos numéricos en HSL no producen los mismos pasos visuales. OKLCH, un espacio de color perceptualmente uniforme, resuelve esto: valores iguales de delta-L generan saltos de luminosidad visualmente iguales.

Un generador de escalas de tonos automatiza esto: ingresa un color, obtén una escala completa de 11 pasos con espaciado perceptual uniforme. El resultado queda listo para configuración de Tailwind, propiedades personalizadas de CSS o JSON de design tokens.

Usa el convertidor de hex a RGB para normalizar el color fuente primero, luego recorre la escala con el verificador de contraste WCAG para confirmar que cada paso funcione con texto. Para escalas de éxito, advertencia y error junto a esta, mira colores de estado y exportación DTCG con Pro.

Casos de uso comunes

  • Arma un theme de Tailwind

    Genera de 50 a 950 desde un color de marca y exporta un snippet de tailwind.config.ts listo para usar.

  • Estandariza un design system

    Reemplaza hex ad-hoc con una escala perceptualmente uniforme que tu equipo de ingeniería puede extender. Verifica el resultado con el simulador de daltonismo.

  • Corrige tonos medios apagados

    Pasa de sRGB a OKLCH y mira cómo el rango de 400 a 600 deja de verse gris.

  • Exporta tokens multiplataforma

    Exporta CSS, JSON y Tailwind desde una sola fuente para que web y nativo se mantengan sincronizados.

FAQ

Preguntas frecuentes

OKLCH distribuye los tonos de forma pareja en luminosidad percibida, así que la diferencia visual entre 100 y 200 se ve igual que entre 700 y 800. HSL distribuye los tonos por luminosidad matemática, lo que tiende a apelmazar los tonos medios y aplastar los oscuros. OKLCH es la mejor opción por defecto para design systems en producción.

Usa la exportación a Tailwind para copiar un objeto de config indexado de 50 a 950, luego fusiónalo bajo colors en tu tailwind.config.js. Referéncialo como bg-brand-500, text-brand-700, y así. Las utilidades existentes como hover y dark mode funcionan sin configuración extra.

La escala de 50 a 950 sigue la convención que usan Tailwind, Material y Radix. Once pasos dan suficiente rango para cubrir superficies, bordes, texto de cuerpo y énfasis sin obligar a elegir entre valores demasiado parecidos. La mayoría de los equipos usa de cuatro a seis de los pasos en un producto dado.

Todavía no. La curva se ancla en tu color: queda en el 500, y los pasos más claros y más oscuros se espacian de forma uniforme en luminosidad hacia casi blanco en el 50 y casi negro en el 950. Cada paso muestra su contraste sobre blanco y sobre negro.

Herramientas relacionadas

Un color, una escala.

Paletta genera escalas coordinadas para cada color de tu paleta, con validación de accesibilidad en cada paso.