Generador de Tintes, Sombras y Tonos

Genera escalas de luminosidad, saturación y matiz desde cualquier color. Exporta a CSS, SCSS, Tailwind y JSON. Con contraste WCAG y vista previa de interfaz.

Genera escalas de color ajustando la luminosidad y saturación del color base.

Color Base

hsl(207°, 90%, 54%)

Pasos de Luminosidad: 10

Pasos de Saturación: 10

Pasos de Matiz: 12

Escala de Luminosidad

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#000000

0%AA

#031c30

10%AA

#053861

20%AA+

#085491

30%

#0a70c2

40%

#0d8df2

50%

#3da3f5

60%

#6ebaf7

70%

#9ed1fa

80%

#cfe8fc

90%

#ffffff

100%AA+

Escala de Saturación

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#8a8a8a

#7e8b96

10%

#738da1

20%

#678ead

30%

#5b8fb9

40%

#4f91c4

50%

#4492d0

60%

#3893dc

70%

#2c95e8

80%

#2196f3

90%

#1597ff

100%

Escala de Matiz

207°

237°

267°

297°

327°

357°

27°

57°

87°

117°

147°

177°

#2196f3

207°

#212df3

237°

#7e21f3

267°

#e721f3

297°

#f32196

327°

#f3212d

357°

#f37e21

27°

#f3e721

57°

#96f321

87°

#2df321

117°

#21f37e

147°

#21f3e7

177°

Vista Previa de UI

Título de Ejemplo

Este texto usa colores de tu escala de luminosidad.

Los colores se asignan automáticamente desde la escala de luminosidad: fondos claros, botón del paso central, texto del paso más oscuro.

Exportar Todas las Escalas

Cómo funciona

Este generador crea tres tipos de escalas de color a partir de un color base: escalas de luminosidad (tintes y sombras), escalas de saturación (tonos) y escalas de matiz (rotación de tono). Es la herramienta fundamental para construir sistemas de diseño profesionales.

¿Qué ofrece esta calculadora?

Escala de luminosidad — de negro a blanco manteniendo matiz y saturación
Escala de saturación — de gris a máxima vibración manteniendo matiz y luminosidad
Escala de matiz — rotación de tono manteniendo saturación y luminosidad
Indicador WCAG — cada tono muestra si tiene contraste AA/AAA con el color base
Usar como base — haz clic en cualquier tono para usarlo como nuevo color base
Vista previa de interfaz — maqueta de botones y tarjetas con los colores generados
Exportar — CSS Variables, SCSS, Tailwind Config y JSON
Color aleatorio — para exploración rápida

Tinte vs Sombra vs Tono: Diferencias

Variación	Se mezcla con	Efecto HSL	Resultado
Tinte	Blanco	L ↑ (sube)	Color más claro y pastel
Sombra	Negro	L ↓ (baja)	Color más oscuro y profundo
Tono	Gris	S ↓ (baja)	Color más apagado y sutil

Fórmulas

Tinte (mezcla con blanco)

Tinte = Base + (255 - Base) × factor

factor = 0 (color base) a 1 (blanco puro)

Sombra (mezcla con negro)

Sombra = Base × (1 - factor)

factor = 0 (color base) a 1 (negro puro)

Tono (mezcla con gris)

Tono = Base + (128 - Base) × factor

Equivalente a reducir la saturación en HSL

Convenciones de sistemas de diseño

Tailwind CSS (50-950)

Tailwind usa 11 pasos: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. El 500 es el color base. Genera 10 pasos de luminosidad para reproducir esta escala.

Material Design (50-900)

Material usa 10 niveles principales + variantes A100-A700. El 500 es el color principal. Los niveles altos (700-900) se usan para estados activos y texto.

Tokens de diseño

Exporta tu escala como variables CSS o JSON para integrarla en tu sistema de tokens. Cada paso se convierte en un token semántico: --color-primary-100.

Accesibilidad

Las insignias WCAG junto a cada tono te muestran qué pasos puedes usar como texto sobre el color base. Busca AA o AAA para garantizar legibilidad.

Casos de uso prácticos

Caso 1: Sistema de diseño con color de marca

Tu marca usa azul #3B82F6. Necesitas 11 variantes estilo Tailwind.

→ Genera 10 pasos de luminosidad
→ 50-200: fondos, resaltados, efectos sutiles
→ 300-400: bordes, iconos secundarios
→ 500: botones primarios, enlaces, insignias
→ 600-700: estado activo de botones, texto sobre fondo claro
→ 800-950: texto, encabezados, fondos oscuros

Caso 2: Estados de botón interactivos

Botón primario verde #22C55E.

→ Normal: paso 500 (color base)
→ Cursor encima: paso 600 (una sombra más oscura)
→ Pulsado: paso 700
→ Anillo de foco: paso 300 con opacidad 50%
→ Desactivado: paso 200 con opacidad reducida

Caso 3: Tarjetas con jerarquía visual

→ Fondo página: paso más claro (50 o 100)
→ Tarjeta principal: blanco o paso 50
→ Tarjeta anidada: paso 100
→ Borde sutil: paso 200
→ Texto principal: paso 900, secundario: paso 600

Caso 4: Modo oscuro

Invertir la escala para modo oscuro.

→ Fondo: paso 900 o 950
→ Superficie/tarjeta: paso 800
→ Borde: paso 700
→ Texto: paso 100 o 50
→ Botones: paso 400-500 (más claros que en modo claro)

Caso 5: Paleta de colores semánticos

Genera escalas de éxito, advertencia, error e información.

→ Éxito: #22C55E → 10 pasos → bg-exito-100, text-exito-700
→ Error: #EF4444 → 10 pasos → bg-error-100, borde-error-300
→ Advertencia: #F59E0B → 10 pasos → insignia-advertencia-200
→ Exporta todo como variables CSS o tokens JSON

Preguntas Frecuentes

¿Cuántos pasos debo generar?

Para sistemas de diseño profesionales (Tailwind, Material), 10-11 pasos (50-950) es el estándar. Para proyectos simples, 5-7 pasos es suficiente. Para un sistema completo con modo oscuro, genera al menos 10 pasos para tener variantes suficientes para invertir la escala.

¿Cuál es la diferencia entre tinte, sombra y tono?

Tinte = color + blanco (más claro, sube la luminosidad L en HSL). Sombra = color + negro (más oscuro, baja L). Tono = color + gris (más apagado, baja la saturación S). Las tres variaciones mantienen el matiz (H) intacto. Esta calculadora genera las tres escalas de forma independiente.

¿Cómo replico la escala de Tailwind CSS?

Genera 10 pasos de luminosidad. El paso central (~50% L) corresponde al 500 de Tailwind. Los pasos más claros son 50-400 y los más oscuros 600-950. Exporta como "Tailwind Config" para obtener el objeto listo para tu tailwind.config.js.

¿Qué significan las insignias AA/AAA junto a cada color?

Indican el nivel de contraste WCAG entre ese tono y tu color base. AA+ (≥3:1) es válido para texto grande, AA (≥4.5:1) para texto normal, AAA (≥7:1) para máxima accesibilidad. Los tonos sin insignia no tienen suficiente contraste con el base para ser usados como texto.

¿Es lo mismo que una paleta monocromática?

Sí y no. Una paleta monocromática usa un solo matiz con variaciones de luminosidad y saturación, que es exactamente lo que generan las escalas de luminosidad y saturación. Pero esta calculadora también incluye la escala de matiz (rotación de tono), que ya no es estrictamente monocromática sino análoga.

¿Cómo uso esto para modo oscuro?

Invierte la escala de luminosidad: donde en modo claro usabas pasos claros (50-200) para fondos, en modo oscuro usa pasos oscuros (800-950). El texto que era 800-900 pasa a ser 100-200. Los botones primarios pueden mantener el mismo paso o subir 1-2 niveles para más contraste sobre fondo oscuro.

¿Puedo usar "Usar como base" para explorar?

Sí. Pasa el cursor sobre cualquier tono generado y verás un icono de mira. Al hacer clic, ese tono se convierte en el nuevo color base y todas las escalas se recalculan. Es muy útil para refinar tu color: genera una escala, encuentra un tono que te guste más, y úsalo como nueva base.

¿Qué formato de exportación debo elegir?

Variables CSS si usas CSS/HTML puro. SCSS si usas Sass y quieres variables compiladas. Tailwind Config si usas Tailwind y quieres integrar la escala en tu configuración. JSON si usas un sistema de tokens de diseño o necesitas los colores en otro entorno (React Native, Flutter, etc.).