Generador de tintes y sombras
Introduce un color base y el tamaño del paso. Obtienes diez tintes hacia el blanco y diez sombras hacia el negro, cada uno con su código HEX, más variables CSS para pegar.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Introduce un código HEX o elige un color.
- Ajusta el paso con el control, del 1 al 10 %.
- Copia la lista de códigos HEX de tintes o de sombras, o el bloque completo de variables CSS.
Cómo funciona
En un tinte, cada canal pasa a ser c + (255 − c) × p. En una sombra, c × (1 − p), donde p es el paso multiplicado por 1…10, como fracción. Los valores se redondean a enteros.
Ejemplo
Por defecto, #3366cc con un paso del 10 %. El primer tinte es #4775d1: rojo 51 + (255 − 51) × 0,1 = 71,4 → 71 (47), verde 102 + 153 × 0,1 = 117,3 → 117 (75), azul 204 + 51 × 0,1 = 209,1 → 209 (d1). La primera sombra es #2e5cb8: 51 × 0,9 = 45,9 → 46, 102 × 0,9 = 91,8 → 92, 204 × 0,9 = 183,6 → 184. Al 50 % salen #99b3e6 y #1a3366, y al 100 %, #ffffff y #000000. En CSS son las variables --tint-10 … --tint-100 y --shade-10 … --shade-100.
Consejos
- Un paso de 10 es un buen comienzo para una escala de diez niveles, como 100 a 1000 en un sistema de diseño.
- Comprueba el contraste del texto en cada muestra; los tintes claros casi nunca sirven para texto blanco.
Preguntas frecuentes
¿Qué diferencia hay entre un tinte y una sombra?
Un tinte es un color mezclado con blanco, así que se aclara. Una sombra es un color mezclado con negro, así que se oscurece. Aquí cada canal RGB avanza un porcentaje fijo del camino hacia 255 o hacia 0.
¿Qué hace el paso?
Es el porcentaje que se suma en cada una de las diez muestras. Con un paso de 10, las muestras están al 10, 20 … 100 % del camino hacia el blanco o el negro, así que la última es blanco o negro puro. Con un paso de 5 se detienen en el 50 %.
¿Por qué el color base no aparece en la lista?
Las listas empiezan a un paso del color base, que es el punto del 0 % entre tintes y sombras. Para esa posición, usa el propio HEX base.
¿Es lo mismo que cambiar la luminosidad en HSL?
No. Mezclar con blanco o negro sigue una línea recta en RGB y llega exactamente al blanco o al negro. Los cambios de luminosidad HSL se parecen pero no son idénticos, sobre todo en colores saturados.