Generador de tonos de color

Un generador de tonos de color toma un color base y crea una escala monocromática de versiones más claras y oscuras. A partir de una sola entrada como #4466EE, produce una fila de tintes que dan un paso hacia el blanco, una fila de tonos que dan un paso hacia el negro y una fila de tonos que dan un paso hacia el gris. Cada muestra es un color real que puedes copiar como HEX, RGB o HSL y colocarlo directamente en CSS, un archivo de diseño o una configuración de tema.

Las tres escalas provienen de las definiciones clásicas utilizadas en la teoría del color. Un tinte es el color base mezclado con blanco, que eleva su ligereza manteniendo el mismo tono. Un tono es la base mezclada con negro, lo que lo oscurece. Un tono es la base mezclada con gris, lo que reduce su intensidad y da una versión silenciosa y más sofisticada del color. Tener las tres entradas de una es lo que te permite construir una paleta coherente: un botón y su estado flotante, un conjunto de series de gráficos o las superficies claras y oscuras de una interfaz, todas derivadas de un color de marca única.

El generador se ejecuta completamente en su navegador. El color que ingresa se analiza y las escalas se calculan con JavaScript del lado del cliente, por lo que no se carga nada, no hay cuenta y su trabajo nunca se rastrea. Acepta nombres de colores HEX, rgb(), hsl() y CSS comunes, le permite establecer cuántos pasos contiene cada escala y actualiza cada muestra al instante. Una vez cargada la página, funciona sin conexión.