¿Cómo uso las variables CSS exportadas?

Haz clic en "Exportar CSS" para copiar los 19 colores como propiedades personalizadas CSS. Pégalas en tu bloque :root y úsalas con var(--color-tint-30).

Generador de Tintes y Sombras

Genera una escala completa de tintes y sombras desde cualquier color base. 9 tintes, 9 sombras — copia códigos HEX individuales o expórtalos todos como variables CSS.

9 tintes · 9 sombrasExportar variables CSSCopiar en 1 clic

① Ingresa un código HEX o elige un color ② Genera 9 tintes y 9 sombras ③ Haz clic en una muestra para copiar

Color base

Preajustes de marca:

Cómo funciona

Introduce cualquier color HEX y la herramienta genera 9 tintes (más claros) y 9 sombras (más oscuras) mezclando matemáticamente el color base con blanco y negro. Haz clic en cualquier muestra para copiar su código HEX.

Tintes

Un tinte se crea mezclando el color base con blanco. El porcentaje indica cuánto blanco se añade — 90% es casi blanco, 10% es apenas más claro que el original.

Sombras

Una sombra se crea mezclando el color base con negro. El porcentaje indica cuánto negro se añade — 90% es casi negro, 10% es apenas más oscuro que el original.

Tintes y sombras — cómo funcionan las escalas de color

Tintes: canal = base + (255 − base) × p. Sombras: canal = base × (1 − p). Interpolación RGB lineal que genera una rampa de 9 tintes / 9 sombras — 19 pasos — compatible con la escala Tailwind CSS 100–900 y tokens de Material Design. Exporta los 19 valores como custom properties CSS en un bloque :root {}: --color-tint-10 hasta --color-shade-90 y --color-base. Ideal para tokens de sistemas de diseño. Verifica siempre el contraste — WCAG AA exige 4,5:1.

Preguntas frecuentes

Un tinte es un color mezclado con blanco (más claro). Una sombra es un color mezclado con negro (más oscuro). Ambos mantienen el tono original: los tintes parecen pastel, las sombras más profundas.

La herramienta usa interpolación RGB lineal. Tinte al p%: canal = base + (255 − base) × p. Sombra al p%: canal = base × (1 − p). Esto da una progresión matemáticamente uniforme.

Porque un 90% de tinte significa mezclar el 90% de blanco con el 10% del color base. El resultado está dominado por el blanco. Para aclarar sutilmente, usa tintes del 10–30%.

Sistemas como Tailwind CSS y Material Design usan una escala de 9 pasos donde 100 es el tinte más claro y 900 la sombra más oscura, con 500 (o 600) representando el color base.

Los tintes y sombras por sí solos no garantizan accesibilidad. Debes verificar el ratio de contraste (mínimo 4,5:1 para texto normal bajo WCAG AA). Usa la herramienta de Contraste para verificarlo.

Haz clic en "Exportar CSS" para copiar los 19 colores como propiedades personalizadas CSS (--color-tint-90 a --color-shade-90 y --color-base). Pégalas en tu bloque :root y úsalas con var(--color-tint-30).

Sí — funciona con cualquier código HEX de 6 dígitos válido (#000000 a #FFFFFF), cubriendo los más de 16 millones de colores del modelo RGB de 8 bits. Todo se calcula en el navegador sin enviar datos externos.

Tintes y sombras — cómo funcionan las escalas de color

Preguntas frecuentes

Explora nuestra red