Generador de Paletas de Colores

Paletas de 5 colores preciosas — barra espaciadora para generar, bloquea para conservar, extrae de imágenes

Armonía:

Extraer Colores de Imagen

📁 Haz clic para subir o arrastra y suelta una imagen

JPG, PNG, WebP — hasta 10 MB

Tu imagen nunca sale de tu dispositivo — todo el procesamiento ocurre en tu navegador.

Exportar Paleta


      

    


    
    

      

        
Verificación de Contraste WCAG

        

      

    


    
    

      

        
Paletas Guardadas 

        

          ¿Borrar todas las paletas guardadas?
          
          
        

        

      

    


    
    

    
    

      
Cómo Funciona la Generación de Paletas

      
Cada paleta se genera usando el espacio de color HSL — Matiz (0–360°), Saturación (0–100%) y Luminosidad (0–100%). HSL es intuitivo para las reglas de armonía porque las relaciones de matiz se basan en la distancia angular alrededor de la rueda de color.


      

        

          

            

            

            

          

          
Análoga

          
Matices dentro de 30° entre sí. Armoniosa y serena. Ideal para temas de naturaleza y océano.

        

        

          

            

            

            

          

          
Complementaria

          
Dos matices a 180° de distancia. Alto contraste y vibrante. Común en marcas deportivas.

        

        

          

            

            

            

          

          
Triádica

          
Tres matices equidistantes a 120°. Equilibrada pero colorida. Perfecta para marcas lúdicas.

        

        

          

            

            

            

          

          
Monocromática

          
El mismo matiz, con saturación y luminosidad variadas. Elegante y cohesiva. Ideal para diseño minimalista.

        

        

          

            

            

            

          

          
Complementaria Dividida

          
Un matiz base más dos matices a 150° a cada lado. Contraste sin tensión.

        

        

          

            

            

            

            

          

          
Tetrádica

          
Cuatro matices a intervalos de 90°. Rica y compleja. Funciona mejor cuando un color domina.

        

      


      
Ejemplo práctico — Paleta Análoga

      
Matiz de partida: H = 210° (un azul). Regla análoga: separar 5 matices a 15° cada uno.
Matices: 195°, 205°, 215°, 225°, 235°.
Saturación: variada del 55% al 70% para dar profundidad. Luminosidad: variada del 45% al 70% para dar rango.
Resultado: una paleta cohesiva de gradiente azul océano con contraste natural.

    


    
    

    
    

      
Consejos de Paleta de Colores para Diseñadores

      
    
        
  • Sigue la regla 60-30-10. Usa tu color dominante para el 60% del diseño (fondos, áreas grandes), un secundario para el 30% (secciones, paneles de UI) y un acento para el 10% (CTAs, destacados). Una paleta de 5 colores encaja de forma natural en esta regla.
    • 
        
  • Verifica siempre el contraste del texto. Una paleta preciosa puede fallar el nivel AA de WCAG si el color del texto y el fondo no tienen al menos una relación de contraste de 4,5:1. Usa el Verificador de Contraste integrado arriba.
    • 
        
  • Limita tu paleta en producción. Tener 5 colores disponibles no significa usar los 5 en cada pantalla. La mayoría de diseños pulidos usan 2–3 colores de forma dominante y reservan los demás para momentos específicos.
    • 
        
  • Bloquea primero tu color de marca. Si tienes un color primario de marca, haz clic en el icono de candado de esa muestra antes de regenerar — la herramienta construirá una paleta armoniosa alrededor de tu color bloqueado.
    • 
        
  • Extracción de imagen para coincidir con el estado de ánimo. Sube una foto que capture el ambiente que estás diseñando (un paisaje, la foto de un producto, una imagen de estilo de vida) — la paleta extraída ya se sentirá emocionalmente alineada con tu dirección de marca.
    • 
      

    


    
    

      
Preguntas frecuentes

      

        
Las paletas usan reglas de armonía HSL (Matiz, Saturación, Luminosidad). Por ejemplo, la Análoga elige matices dentro de 30° entre sí, la Complementaria usa matices a 180°, y la Triádica elige tres matices a 120°. La saturación y la luminosidad se varían para crear un contraste visualmente agradable dentro de cada paleta.

        
No — tu imagen nunca sale de tu dispositivo. La herramienta usa la API Canvas del navegador para leer los datos de píxeles localmente y extraer los colores dominantes mediante un algoritmo de agrupación por frecuencia. Sin servidor, sin subida, sin rastreo.

        
Haz clic directamente en cualquier muestra de color o en su etiqueta de código hex para copiar el código hex al portapapeles. Aparece un breve mensaje de confirmación.

        
Puedes exportar como propiedades personalizadas CSS (--color-1 hasta --color-5), un fragmento de configuración de Tailwind CSS, variables SCSS, un objeto JSON o una lista hex simple separada por comas. Haz clic en cualquier botón de exportación para copiar al portapapeles al instante.

        
El verificador de contraste muestra insignias de aprobado/reprobado según WCAG AA para cada color de la paleta representado como texto sobre fondos blanco (#fff) y negro (#000). Los colores que cumplen la relación de 4,5:1 para texto normal muestran una insignia verde «AA Aprobado».

        
Puedes guardar hasta 50 paletas en el almacenamiento local de tu navegador. Persisten entre sesiones. Puedes ver, recargar o eliminar las paletas guardadas desde el panel de Historial.