Generador de Paletas de Colores

Color palette extraction from an image involves analyzing the image's pixel data to identify the most visually significant colors. The process begins by sampling pixels from the image (not every pixel, but a representative subset for performance). Each pixel's RGB values are then quantized to reduce the number of unique colors -- this is necessary because a photograph can contain millions of subtly different colors. The quantized colors are counted to build a color histogram, and the most frequent colors are selected as the palette.

Nuestra herramienta usa un algoritmo de cuantización de corte mediano para la extracción de paletas. El algoritmo funciona dividiendo recursivamente el espacio de color: encuentra la dimensión (R, G o B) con el mayor rango de valores, ordena los píxeles a lo largo de esa dimensión y los divide en la mediana. Este proceso se repite hasta alcanzar el número deseado de colores. El resultado es un conjunto de colores que representan las regiones de color más distintivas de la imagen. La frecuencia de cada color determina su orden en la paleta — el color más dominante aparece primero.

Para paletas generadas (no extraídas de imágenes), la herramienta usa reglas de armonía de color basadas en la rueda de colores. Complementario: dos colores opuestos (180° de separación). Análogo: tres colores adyacentes en la rueda (30° de separación). Triádico: tres colores espaciados uniformemente (120° de separación). Tetrádico: cuatro colores que forman un rectángulo en la rueda. Complementario dividido: un color base más los dos colores adyacentes a su complementario. Estas reglas producen combinaciones visualmente armoniosas porque los colores comparten una relación matemática en la rueda de colores.

Una paleta de diseño típica incluye 5 colores: un primario (dominante), un secundario (de apoyo), un acento (para llamadas a la acción y resaltados) y dos neutros (fondos claros y oscuros). La regla 60-30-10 sugiere usar el color primario para el 60% del diseño, el secundario para el 30% y el acento para el 10%. Esto crea equilibrio visual mientras asegura que el acento destaque. Extrae paletas de imágenes que evoquen el estado de ánimo que deseas — una foto de naturaleza para tonos terrosos, un atardecer para degradados cálidos, un paisaje urbano para azules y grises fríos.

Al usar paletas extraídas para diseño web, comprueba siempre las relaciones de contraste entre el texto y los colores de fondo. Una paleta que se ve hermosa como muestras puede no cumplir los estándares de accesibilidad WCAG cuando se usa para texto. Usa los colores más claros para fondos y los más oscuros para texto. Si un color de paleta no cumple los requisitos de contraste, oscúrelo o acláralo hasta que lo haga — la armonía de la paleta se conservará porque el tono permanece igual.