Generador de Tonalidades de Color
Genera tintes más claros y sombras más oscuras a partir de cualquier color base.
Cómo usar Generador de Tonalidades de Color
- Introduce un color base en HEX o RGB.
- Consulta cinco tintes más claros y cinco sombras más oscuras.
- Copia cualquier valor HEX para tu diseño o CSS.
Acerca de Generador de Tonalidades de Color
Las buenas interfaces usan una gama de un color en lugar de un único valor plano. Pega un color base en HEX (#137256 o #137) o RGB (rgb(19,114,86)) y este generador devuelve once valores: tu color base, cinco tintes mezclados hacia el blanco, y cinco sombras mezcladas hacia el negro. Eso suele ser todo lo que necesitas para los estados de hover y activo, bordes, separadores, fondos sutiles y profundidad en una interfaz.
Los pasos están espaciados uniformemente: cada tinte desplaza cada canal RGB una sexta parte más hacia 255 que el anterior, y cada sombra lo acerca esa misma fracción a 0. Cada resultado se muestra como un código HEX que puedes copiar directamente en tu CSS, y el color base se previsualiza como una muestra para que confirmes que escribiste lo que querías.
Conviene saber que se trata de una mezcla directa en RGB, no en un espacio de color perceptual, así que los pasos son matemáticamente uniformes pero no siempre se verán espaciados de forma uniforme al ojo: los colores base muy saturados o muy oscuros tienden a perder definición en los extremos de la escala. El resultado es solo en HEX. Comprueba cualquier combinación sobre la que pienses colocar texto con el verificador de contraste, y convierte valores con el convertidor de color. Todo se ejecuta en tu navegador.
Preguntas frecuentes
¿Cuál es la diferencia entre un tinte y una sombra?
Un tinte es tu color mezclado con blanco, lo que lo aclara. Una sombra es tu color mezclado con negro, lo que lo oscurece. Esta herramienta te ofrece cinco de cada uno.
¿Qué formatos de entrada funcionan?
HEX de tres o seis dígitos y RGB como rgb(19,114,86). Los resultados siempre se devuelven en HEX.
¿Cómo se calculan los pasos?
Cada paso equivale a una sexta parte del camino hacia el blanco o el negro. El tinte 1 está a una sexta parte del camino hacia el blanco, el tinte 5 está a cinco sextas partes del camino, y las sombras funcionan igual en la dirección opuesta.
¿Puedo usarlos como una escala de tema CSS?
Sí. Los once valores forman una escala ya lista para botones, estados de hover, superficies y bordes. Copia los códigos HEX en propiedades personalizadas y haz referencia a ellas en toda tu hoja de estilos.
¿Por qué mis sombras más oscuras se ven casi idénticas?
Porque la mezcla se realiza en RGB en lugar de en un espacio perceptual. A medida que los canales se acercan a cero, las diferencias entre los pasos se vuelven más difíciles de ver, algo que resulta más notable con colores base oscuros o muy saturados.