Familia de generadores

Generador de Paletas de Colores

Empieza con un color, elige una regla de armonía y genera una paleta que realmente puedas usar en interfaces, ilustraciones y sistemas de marca. Cada resultado incluye formatos legibles de HEX, RGB, HSL, variables CSS y JSON.

  • Vista previa en vivo
  • Múltiples esquemas de armonía
  • Exportaciones listas para desarrollo
  • Guía de contraste por color

Generar una paleta

Usa un color base y ajusta cuánto se mueve la paleta en tono, saturación y luminosidad. El generador limita los valores de forma segura y redondea los valores de exportación.

Introduce un color hexadecimal de 3 o 6 dígitos como #C96C3D o #f80.
Los diferentes esquemas cambian el espacio de tono, mientras que el control de amplitud da forma a la variación.
Para mantener la precisión armónica, algunos esquemas repiten intervalos al solicitar más colores.
48%
Una amplitud baja se mantiene cerca del tono base. Una amplitud alta separa más los acentos claros y oscuros.
Paleta lista.

Resultados

La franja de vista previa muestra la secuencia de la paleta. Cada muestra incluye una recomendación de contraste para texto sobre ese color.

Exportar

Usa el selector para alternar entre propiedades CSS y JSON. La copia se deshabilita si el navegador no permite acceso al portapapeles.

HEX RGB HSL CSS JSON

Cómo funciona

El generador convierte el color hexadecimal a HSL, aplica intervalos de tono según la regla elegida y ajusta la saturación y luminosidad según la amplitud.

1. Limpieza de entrada

La entrada hexadecimal se normaliza y expande si es necesario. Las entradas no válidas no bloquean la página; se mantiene la última paleta válida.

2. Matemáticas de color

Los valores de tono giran en la rueda de color. La saturación y luminosidad se limitan entre 0 y 100 para evitar colores no válidos.

3. Exportación profesional

Las exportaciones incluyen nombres, valores redondeados y un orden estable para usarse directamente en tokens de diseño o prototipos rápidos.

Los colores pueden variar según la pantalla y el navegador. Usa esta herramienta como punto de partida y verifica las elecciones finales en tu entorno real de diseño.