Cómo obtener una paleta de colores de una imagen

Pasos

1. Abre el Generador de paleta de colores y suelta una imagen.
2. Los colores principales aparecen al instante. Usa el control deslizante para pedir menos o más, de 2 a 12.
3. Haz clic en una muestra para copiar su código HEX.
4. O copia toda la paleta como lista o como variables CSS.

Cómo se eligen los colores

Los píxeles parecidos se agrupan y cada grupo se promedia en un solo color, así que el color que ocupa la mayor parte de la imagen va primero. El porcentaje de una muestra es cuánto de la imagen cubre ese grupo.

Los píxeles totalmente o casi transparentes se ignoran, así que un logotipo sobre fondo transparente da los colores del logotipo, no un oscuro vacío.

Usar la paleta

Copiar como variables CSS da propiedades personalizadas como --colour-1 que puedes pegar directamente en una hoja de estilos. La lista simple es práctica para notas o para una herramienta de diseño.

Si la imagen tiene menos colores distintos que los que pediste, solo obtienes los que tiene. Un logotipo de tres colores da tres muestras, no doce. Para un color exacto, usa mejor el selector de color.

Consejos

Usa una imagen con el ambiente que quieres. Una paleta es tan buena como la imagen de la que sale, y una foto de un atardecer da colores muy distintos de los de una foto de producto.

Elige dos o tres colores de la paleta en lugar de todos. La mayoría de los diseños funcionan mejor con un color principal, un acento y un neutro, y los porcentajes indican cuáles son los mejores candidatos.