Genera variantes claras y oscuras

Los diseñadores de producto lo usan para crear tonos claros y oscuros de un color antes de cerrar una paleta coherente para una interfaz.

Genera variantes claras y oscuras. Todo el proceso permanece en tu navegador; los datos introducidos no se suben, comparten ni guardan.

Cómo usar

Introduce un color base en formato hexadecimal en el campo de entrada.
Ejecuta el generador para crear variantes más claras y más oscuras.
Revisa las sugerencias y elige los tonos que encajen con tu interfaz.
Prueba otro color base si la paleta propuesta no coincide con tu objetivo.
Copia los valores seleccionados en tu sistema de diseño o hoja de estilos.

Ejemplo

Con la muestra azul proporcionada, observa cómo el tono se expande en tonalidades más claras y más oscuras. Esto ayuda a crear estados al pasar el cursor, activo o deshabilitado sin empezar desde una página en blanco.

Entrada

#2563EB

Resultado

100: #BED0F9
300: #719AF2
500: #2563EB
700: #1C4AB0
900: #133276

Límites y formatos

La herramienta sugiere variantes a partir de un color, pero no comprueba la accesibilidad.
Los tonos generados no sustituyen una paleta de marca revisada.
Prueba cada valor en la interfaz real, porque las condiciones de visualización pueden cambiar el aspecto.
Una variante clara u oscura puede fallar en algunos fondos aunque parezca correcta en la lista.

Dónde se procesa

La generación se realiza en tu navegador. El color base no se envía al exterior y la página no guarda ninguna paleta. Puedes probar varios colores base durante la misma sesión.

Preguntas frecuentes

¿Puedo partir de un color específico?

Sí, introduce el color base en formato hexadecimal. La herramienta lo usa para calcular un conjunto de variantes más claras y más oscuras.

¿Las variantes son accesibles?

Ofrecen ideas de contraste, pero la herramienta no mide el cumplimiento. Comprueba los pares de texto y fondo con un verificador de contraste adecuado.

¿Cuántos colores puedo generar?

El proceso parte de un color y devuelve varios tonos. Para una paleta completa, repítelo con cada color principal de tu proyecto.