Generador de tonos de color

Tintes y sombras

Los tintes se obtienen mezclando un color con blanco, haciéndolo progresivamente más claro. Las sombras se obtienen mezclando con negro, haciéndolo más oscuro. Juntos, forman una escala tonal completa, útil para el diseño de interfaz, los degradados, los estados al pasar el ratón y los sistemas de color accesibles.

Preguntas frecuentes

¿Cómo usar estos tonos?

Usa los tintes claros para fondos, estados hover y bordes. Usa las sombras oscuras para el texto, los estados activos y el resaltado. Haz clic en «Copiar todo como variables CSS» para obtener un fragmento CSS listo para usar.

¿Puedo copiar los colores individualmente?

¡Sí! Haz clic en una muestra para copiar su valor HEX al portapapeles.

Tinte, sombra y tono: las definiciones formales

Tres términos se usan de forma imprecisa; la teoría clásica del color los distingue con precisión:

• Tinte = color base + blanco. Más claro y más pálido. El rosa es un tinte del rojo; el azul cielo es un tinte del azul.
• Sombra = color base + negro. Más oscuro y más profundo. El granate es una sombra del rojo; el azul marino es una sombra del azul.
• Tono = color base + gris. Menos saturado, más apagado. Añade matiz sin cambiar mucho el brillo.

Este generador produce tintes (más claros que la base) y sombras (más oscuros). Los tonos (añadir gris en lugar de blanco o negro) son útiles para las paletas apagadas y sofisticadas (piensa en los sistemas de color del diseño de interiores de los años 70), pero rara vez se necesitan para el trabajo típico de interfaz.

Por qué los sistemas de diseño modernos usan escalas numéricas

Tailwind CSS popularizó la escala numérica 50-100-200-…-900-950 por color, con la parada «500» tratada convencionalmente como la base. Material Design usa un sistema paralelo 50-100-…-900; Bootstrap 5 usa 100-…-900; IBM Carbon usa 10 paradas por muestra. La idea compartida: un único color de marca rara vez es suficiente, las interfaces necesitan variantes coherentes para los estados al pasar el ratón, los fondos, los bordes, los anillos de foco, los estados deshabilitados, las insignias y los equivalentes en modo oscuro. Una escala numérica predecible te da esas variantes de una forma que es portátil entre componentes, refactorizable cuando la marca evoluciona y descubrible para cualquiera que lea la base de código.

Cómo distintos algoritmos calculan la escala

Hay tres formas comunes de calcular una escala de tintes/sombras, con resultados visuales diferentes:

• Mezcla RGB con blanco / negro. La definición de la teoría artística. Produce tintes y sombras fieles, pero no tiene en cuenta la uniformidad perceptiva: los amarillos se desaturan rápido, los azules se mantienen intensos.
• Ajuste de luminosidad HSL. Rápido y fácil: empuja el canal L hacia arriba para los tintes, hacia abajo para las sombras. El enfoque más común en las herramientas más antiguas. El inconveniente es que la luminosidad de HSL no es perceptivamente uniforme, el amarillo al 50 % de L parece mucho más brillante que el azul al 50 % de L, así que una paleta construida con el escalonado de HSL se ve irregular entre los tonos.
• Escalado de luminosidad OKLCH o CIELAB. El enfoque moderno y perceptivamente uniforme. La L de OKLCH está calibrada para que «200 → 300 → 400» se sienta como el mismo paso con independencia del tono. Tailwind v4 (lanzado en enero de 2025) reconstruyó todas sus paletas por defecto en torno a OKLCH exactamente por esta razón.

Si tu escala alguna vez se ve «plana» (pasos de amarillo que se lavan, pasos de azul que se leen todos como el mismo azul oscuro), casi siempre es porque las matemáticas subyacentes se basan en HSL en lugar de en OKLCH. El CSS moderno (CSS Color Module Level 4) expone oklch(), lab() y color-mix(in oklch, …) directamente, lo que hace de las escalas perceptivamente uniformes una sola línea sin ninguna herramienta externa.

Casos de uso

• Arrancar un sistema de diseño a partir de un único color de marca. Elige el HEX de la marca, genera la escala, copia las variables CSS, publica.
• Personalizar un mapa colors de Tailwind. Reemplaza el color de marca por defecto por tu propia escala de 11 paradas.
• Estados al pasar el ratón y de foco de la interfaz. Un patrón común: el fondo del botón usa el 500, el de pasar el ratón usa el 600, el activo usa el 700, el anillo de foco usa el 400 a baja opacidad.
• Fondos y elevación. Los fondos de tarjeta usan el 50; los bordes sutiles usan el 200; el texto deshabilitado usa el 400.
• Equivalentes en modo oscuro. Muchos sistemas generan una escala paralela de modo oscuro en lugar de invertir matemáticamente la clara, los colores que se ven equilibrados sobre blanco no siempre se ven equilibrados sobre el casi negro.
• Variaciones de maqueta. Compara rápidamente tres candidatos de marca generando la escala de cada uno y colocándolos en la misma maqueta de interfaz.
• Catálogos de muestras de impresión. Comprueba previamente una paleta de impresión para ver lo sutiles que aparecen en realidad los pasos cuando están adyacentes.

Accesibilidad y contraste

Una escala generada es solo tan útil como los pares de texto sobre fondo que produce. Los mínimos de WCAG 2.1 que conviene tener en cuenta:

• Texto de cuerpo normal: 4,5 : 1 frente a su fondo (nivel AA).
• Texto grande o en negrita (18 pt / 14 pt en negrita y más): 3 : 1 (nivel AA).
• Componentes de interfaz y objetos gráficos: 3 : 1 (nivel AA, SC 1.4.11).

Reglas fiables en la mayoría de las escalas bien construidas: el par 50 + 900 siempre cumple para el texto de cuerpo, el par 100 + 800 casi siempre lo hace. El par 400 + 500 casi nunca lo hace. Prueba los pares específicos que pretendes usar, la herramienta Verificador de contraste de colores calcula las relaciones WCAG para dos valores HEX cualesquiera.

Conectar la salida a tu base de código

Tres formas comunes de consumir una escala generada:

/* 1. Plain CSS variables */
:root {
  --brand-50: #f0f9fc;
  --brand-100: #d9eef6;
  --brand-500: #2b7190;
  --brand-900: #0d2935;
}

.btn { background: var(--brand-500); }
.btn:hover { background: var(--brand-600); }

// 2. Tailwind config (tailwind.config.js)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f0f9fc',
          100: '#d9eef6',
          500: '#2b7190',
          900: '#0d2935',
        },
      },
    },
  },
};

// then in markup
<button class="bg-brand-500 hover:bg-brand-600">Click</button>

// 3. Sass / SCSS map
$brand: (
  50:  #f0f9fc,
  500: #2b7190,
  900: #0d2935,
);

.btn { background: map-get($brand, 500); }

Errores comunes

1. Generar demasiadas paradas. Las 11 de Tailwind son un punto óptimo. 20 paradas es excesivo, la mayoría son visualmente indistinguibles y nunca las usarás.
2. Usar escalas basadas en HSL para los colores amarillo / naranja / fluorescentes. Se lavan en las paradas claras y no se oscurecen limpiamente. Recurre a la generación basada en OKLCH si tu color de marca cae en el rango de tonos «complicados».
3. Tratar la escala como definitiva sin comprobar el contraste del texto. Las relaciones de color bonitas a veces emparejan el texto blanco con la parada 400 y no cumplen el 4,5 : 1 de WCAG. Prueba cada emparejamiento que vayas a usar de verdad.
4. Invertir la paleta clara para hacer una paleta de modo oscuro. Matemáticamente tentador, visualmente erróneo, los colores que se sienten equilibrados sobre blanco se sienten estridentes sobre el casi negro. Genera o ajusta a mano una escala paralela de modo oscuro.
5. Usar el color base como «500» cuando coincide perceptivamente mejor con otra parada. Si tu color de marca es genuinamente oscuro, podría ser el 700 de su escala; deja que la relación perceptiva dicte qué posición ocupa, no la convención.
6. Olvidar la parada 50. El tinte más claro es el más útil para los fondos y los resaltes sutiles. No truncues tu escala en el 100.

Más preguntas frecuentes

¿Por qué mi escala se ve plana, todas las paradas se sienten similares?

Dos causas comunes: (1) demasiados pasos en un rango demasiado estrecho, prueba con menos pasos, especialmente si el color ya es de luminancia media; (2) escalado basado en HSL en un tono donde HSL está mal calibrado (amarillos, naranjas, colores neón). Recurrir a un generador de paletas basado en OKLCH suele arreglar ambas.

¿Cómo genero una paleta de modo oscuro a partir de una escala de modo claro?

No te limites a invertir. La inversión ingenua (intercambiar las paradas claras y oscuras) produce paletas de modo oscuro que se sienten estridentes o se lavan. La convención en Material 3, Radix Colors y las variantes oscuras de Tailwind es generar una escala paralela ajustada para el fondo oscuro, normalmente con una saturación ligeramente reducida y el tono desplazado para compensar cómo se perciben los colores sobre superficies oscuras. La mayoría de los grandes sistemas de diseño publican ambas paletas una al lado de la otra.

¿Puedo usar los colores generados comercialmente?

Sí. Los valores de color no se pueden registrar como propiedad intelectual; los códigos HEX son hechos sobre los píxeles. Usa la paleta generada en cualquier sitio, proyectos de código abierto, sitios comerciales, sistemas de marca, impresión, embalaje.

¿Cuál es un buen número de pasos?

Para el diseño de interfaces, de 9 a 11 paradas por color es la convención establecida (Tailwind, Bootstrap y Carbon se sitúan todos en ese rango). Material Design usa 13. Por debajo de 7 paradas la escala se siente poco resuelta; por encima de 13 las paradas se vuelven difíciles de distinguir entre sí.

¿Se envía algo a un servidor?

No. Las matemáticas del color se ejecutan en tu navegador; el HEX de entrada, las paradas generadas y el CSS copiado nunca tocan un servidor. Es útil cuando el color de marca está sin publicar o bajo embargo.

¿En qué se diferencia esto de un generador de paletas de colores?

Un generador de paletas elige varios colores distintos que funcionan juntos (complementarios, análogos, triádicos, etc.), tonos completamente diferentes. Un generador de tonos (este) mantiene un solo tono y produce variantes más claras y más oscuras de él. Trabajos diferentes: los generadores de paletas te dan el primario de la marca más los acentos; los generadores de tonos te dan las variaciones de uno de esos colores.

Herramientas relacionadas