Generador de paletas de colores
Extrae los colores principales de una imagen como paleta y cópialos como códigos HEX, variables CSS o JSON.
El Generador de paletas de colores encuentra los colores dominantes de una foto o un diseño y los muestra como muestras. Puedes elegir 3, 4, 5, 6 u 8 colores; se ordenan empezando por el que cubre más superficie, y los tonos muy parecidos se combinan para que cada muestra sea distinta. Copia la paleta como variables CSS o como array JSON, o descárgala como muestrario PNG.
Cómo usar Generador de paletas de colores
- 1
Abre una imagen
Suelta, elige o pega una foto, una ilustración, un logotipo o una captura de pantalla.
- 2
Elige el número de colores
Haz clic en 3, 4, 5, 6 u 8. Las muestras se actualizan al instante.
- 3
Copia colores sueltos
Haz clic en el icono de copiar de una muestra para copiar su código HEX.
- 4
Exporta la paleta
Usa Copiar variables CSS o Copiar JSON, o descarga la paleta como muestrario PNG.
Qué hace
- Ordenados por superficie
- La primera muestra es el color que cubre la mayor parte de la imagen.
- Tonos distintos
- Los colores casi idénticos se combinan, así que la paleta no repite el mismo tono.
- Lista para desarrolladores
- Exporta como propiedades personalizadas de CSS (--color-1, --color-2, etc.) o como array JSON de códigos HEX.
- Muestrario PNG
- Descarga una imagen de la paleta con el código HEX de cada color escrito bajo su muestra.
Preguntas
¿Cómo se eligen los colores de la paleta?
La imagen se muestrea a un tamaño pequeño, los colores parecidos se agrupan y los grupos que cubren más superficie se muestran primero. Los píxeles transparentes se ignoran.
¿Por qué obtengo menos colores de los que elegí?
Los tonos muy próximos entre sí se combinan para que cada muestra sea claramente distinta. Una imagen con pocos colores diferentes puede dar menos muestras.
¿Cómo uso la paleta en CSS?
Haz clic en Copiar variables CSS para obtener un bloque :root con variables llamadas --color-1, --color-2, etc., y pégalo en tu hoja de estilos.
¿Por qué falta un pequeño color de acento?
La paleta da prioridad a los colores que cubren más superficie, así que un detalle diminuto, como un logotipo pequeño, puede no aparecer. Usa el Selector de color de imagen para obtener el valor exacto de un punto concreto.