Generador de Paletas
Paleta Principal
Haz clic en un color para ajustes finos
1
#0082DF
2
#0012DF
3
#5D00DF
4
#CC00DF
5
#DF0082
1
#0082DF
2
#0012DF
3
#5D00DF
4
#CC00DF
5
#DF0082
Estadísticas
100%
Saturación
44%
Luminosidad
5
Tonos
1.7
Contraste
Ajustes Finos Disponibles:
- Haz clic en el icono de editar para abrir los controles HSL
- Arrastra y suelta colores para reordenarlos
- Bloquea colores para mantenerlos al regenerar
- Ajusta Matiz (0-360°), Saturación (0-100%) y Luminosidad (0-100%)
- Usa "Aplicar a todos" para cambiar toda la paleta a la vez
- Haz clic en "+" para añadir colores (máx. 10)
- Elimina colores con el icono de papelera (mín. 3)
- Usa "Regenerar Paleta" para crear una nueva basada en el color editado
Atajos de Teclado
SpaceRegenerar
Ctrl+ZDeshacer
CCopiar color
Ctrl+YRehacer
←→Navegar
LBloquear
FPantalla completa
EscSalir
Iconos de Tarjeta (hover)
Copiar código HEX
Bloquear al regenerar
Ajustes finos HSL
Eliminar color
Asignar rol semántico
Detalles y formatos
Ver y seleccionar tonos
Guía de Roles Semánticos
Asigna roles a tus colores para exportar código con nombres semánticos:
primaryColor principal de la marca, botones de acción principales
secondaryAcentos, elementos secundarios, botones alternativos
backgroundFondos de página, secciones y contenedores
surfaceTarjetas, modales, elementos elevados sobre el fondo
textTexto principal, títulos y contenido sobre fondos claros
linkEnlaces, elementos interactivos y navegación
💡 Los roles se usan como nombres de variables al exportar (ej: --color-primary)