¿Diferencia entre tono, tinte y tinta?

Un tono (shade) añade negro a la base (más oscuro, mismo matiz). Un tinte (tint) añade blanco (más claro, mismo matiz). Una tinta (tone) añade gris (menos saturado, mismo matiz y claridad). Este generador emite tonos y tintes porque eso es lo que usan los design systems - una rampa de tintas casi nunca es lo que se busca.

¿Por qué la escala 50/100…950?

Coincide con Tailwind CSS y la mayoría de design tokens, donde 500 es aproximadamente la base, 50 es casi blanco y 950 casi negro. Mantener la misma numeración hace que cualquiera que lea tus design tokens entienda al vuelo el peso relativo. Material usa 50/100/200…900; Tailwind lo extiende con 950 para un negro más profundo.

¿La rampa garantiza pasos perceptivamente uniformes?

No - este generador interpola en HSL, más rápido y compatible con CSS, pero no perceptivamente uniforme. Los pasos centrales (200-700) suelen verse parejos; los extremos (50, 950) se comprimen visualmente. Para una rampa perceptivamente uniforme, genera en OKLCH o LCH - los design tokens recientes (Tailwind v4, Radix Colors) lo hacen por esa razón.

¿Cómo exporto la rampa como variables CSS?

Pulsa «Copiar como CSS». La salida es un bloque de líneas `--brand-50: #...; --brand-100: #...;` para pegar en tu `:root` o una config de Tailwind. Renombra el prefijo en el campo para que coincida con tu namespace (`--primary`, `--accent`, etc.) antes de copiar.

¿El tono 500 coincide exactamente con mi entrada?

Sí - el 500 es tu color de entrada sin cambios. Los pasos más claros (50-400) son mezclas progresivas hacia el blanco, los más oscuros (600-950) hacia el negro. Si eliges una base muy oscura o muy clara, la rampa puede verse desigual - acerca la base a una claridad del 50 % y vuelve a generar.

Generador de tonos de color

Genera 10 tonos y 10 tintes de cualquier color - listo en lista hex o variables CSS.

Color base

Prefijo variable CSS

Rampa de tonos

Introduce un color hex (p. ej. #3b82f6) para generar tonos.

Propiedades CSS personalizadas

Escribe un hex; obtén una rampa de 21 pasos. Los tintes (base mezclada con blanco) suben a la izquierda, los tonos (mezclados con negro) bajan a la derecha, y la base queda en el centro. La salida sigue la escala 50/100/200…900/950 que usan Tailwind, Material y la mayoría de los design systems modernos. Haz clic en una muestra para copiar su hex, o exporta toda la rampa como propiedades CSS.

Cómo usarla

Elige la base
Usa el selector o pega un hex. La rampa completa se recalcula al instante.
Inspecciona las muestras
Cada muestra enseña su número de token (50-950) y su hex. Haz clic para copiar el hex.
Renombra el prefijo
Cambia `--brand` por tu namespace (`--primary`, `--accent`, etc.) para que el CSS exportado siga tus convenciones.
Copia como CSS
Pulsa «Copiar como CSS» para obtener el bloque completo de propiedades personalizadas listo para pegar en tu hoja de estilos o config de Tailwind.

¿Qué es?

Un generador de tonos toma una cor base y produce una rampa graduada de variantes más claras (tintes) y más oscuras (tonos). La salida es el tipo de tabla de muestras que encuentras en un design system como Tailwind o Material - una escala numerada (50, 100, 200, …, 900, 950) donde cada paso ajusta la claridad manteniendo el matiz. Los diseñadores usan estas rampas para construir jerarquías de texto/fondo, estados hover, estados deshabilitados y paletas de gráficos desde un único color de marca.

Cuándo usarla

Construir un design system desde un solo color de marca, generar variantes hover/active de un primario, crear un set coherente de grises para texto y fondo, poblar la config de Tailwind con una paleta personalizada, esbozar colores de series de gráficos que escalonen de forma uniforme, y dar a los desarrolladores una rampa por defecto antes de que un diseñador ajuste cada muestra a mano.

Errores comunes

Usar una muestra 50 o 950 para texto sin verificar contraste - suelen fallar WCAG contra fondos tintados. Tratar la rampa autogenerada como final - es punto de partida; la franja 300-700 normalmente quiere ajuste manual. Elegir una base ya muy oscura o muy clara - la rampa se comprimirá en un extremo y media docena de pasos quedarán indistinguibles.

Preguntas frecuentes

¿Diferencia entre tono, tinte y tinta?: Un tono (shade) añade negro a la base (más oscuro, mismo matiz). Un tinte (tint) añade blanco (más claro, mismo matiz). Una tinta (tone) añade gris (menos saturado, mismo matiz y claridad). Este generador emite tonos y tintes porque eso es lo que usan los design systems - una rampa de tintas casi nunca es lo que se busca.
¿Por qué la escala 50/100…950?: Coincide con Tailwind CSS y la mayoría de design tokens, donde 500 es aproximadamente la base, 50 es casi blanco y 950 casi negro. Mantener la misma numeración hace que cualquiera que lea tus design tokens entienda al vuelo el peso relativo. Material usa 50/100/200…900; Tailwind lo extiende con 950 para un negro más profundo.
¿La rampa garantiza pasos perceptivamente uniformes?: No - este generador interpola en HSL, más rápido y compatible con CSS, pero no perceptivamente uniforme. Los pasos centrales (200-700) suelen verse parejos; los extremos (50, 950) se comprimen visualmente. Para una rampa perceptivamente uniforme, genera en OKLCH o LCH - los design tokens recientes (Tailwind v4, Radix Colors) lo hacen por esa razón.
¿Cómo exporto la rampa como variables CSS?: Pulsa «Copiar como CSS». La salida es un bloque de líneas `--brand-50: #...; --brand-100: #...;` para pegar en tu `:root` o una config de Tailwind. Renombra el prefijo en el campo para que coincida con tu namespace (`--primary`, `--accent`, etc.) antes de copiar.
¿El tono 500 coincide exactamente con mi entrada?: Sí - el 500 es tu color de entrada sin cambios. Los pasos más claros (50-400) son mezclas progresivas hacia el blanco, los más oscuros (600-950) hacia el negro. Si eliges una base muy oscura o muy clara, la rampa puede verse desigual - acerca la base a una claridad del 50 % y vuelve a generar.