Generador de tonos y matices de color
Crea escalas de tonos claros y oscuros a partir de un color hexadecimal con número configurable de pasos intermedios.
Ejecutar herramienta
Genera variantes claras y oscuras a partir de cualquier color hexadecimal para construir paletas equilibradas en interfaces o diseños gráficos. La herramienta toma un valor de partida, con o sin almohadilla inicial, y calcula transiciones cromáticas graduales hacia el blanco (aclarados) y hacia el negro (sombreados).
Puedes definir la cantidad exacta de pasos intermedios para ajustar la escala a tus necesidades de diseño, como sistemas con diez niveles de contraste o escalas compactas de tres tonos. También puedes activar o desactivar de forma independiente la generación de tonos claros o tonos oscuros según el componente que estés creando.
Cada canal de color resultante se redondea a valores enteros dentro del rango estándar de 0 a 255 y se presenta en formato hexadecimal. Si introduces un código de tres dígitos, la aplicación lo expande de manera automática duplicando cada carácter antes del cálculo para ofrecer una transición uniforme y reproducible.
Instrucciones
- Escribe o selecciona el código de color base en formato hexadecimal (por ejemplo, #3498db o f00).
- Indica en la casilla de pasos cuántas variantes intermedias deseas obtener para cada grupo.
- Marca o desmarca las opciones para incluir tonos claros (aclarados hacia blanco) y tonos oscuros (sombreados hacia negro).
- Ejecuta la herramienta para visualizar la lista organizada de códigos hexadecimales generados.
Ejemplos
- Con el color base #3498db y 5 pasos marcando ambas opciones, obtienes 5 variantes claras que van aclarándose gradualmente hacia el blanco y 5 variantes oscuras que descienden hacia el negro.
- Si introduces 333 con 4 pasos y desactivas los tonos oscuros, la herramienta expande el código a #333333 y genera únicamente 4 variantes más luminosas hacia #ffffff.
Preguntas frecuentes
¿Es obligatorio incluir el símbolo almohadilla (#) al escribir el color?
No es imprescindible. Si introduces el valor sin almohadilla, como 3498db o abc, el sistema añade el prefijo automáticamente antes de procesar los canales.
¿Cómo interpreta la herramienta los códigos de color de tres caracteres?
Los códigos cortos de tres caracteres se expanden duplicando cada dígito; por ejemplo, el valor f80 se procesa internamente como ff8800 para calcular las mezclas.
¿Qué ocurre si se introduce un texto que no corresponde a un color hexadecimal válido?
Si el texto no se puede interpretar como un valor hexadecimal de color, el panel de resultados reflejará una indicación de error en lugar de la lista de tonos.