🎨 Extractor de Paleta de Colores

Extrae 5 / 10 / 16 colores dominantes de una imagen. HEX, RGB, HSL y variables CSS.

100% Gratis Sin registro Solo navegador 5 idiomas Modo oscuro

🔒 Sobre la privacidad

・Todo el procesamiento ocurre en tu navegador
・Los datos de imagen nunca se envían a ningún servidor
・Sin registros, sin historial, sin base de datos

🎨

Arrastra, haz clic o pega

📖 Dónde se suele tropezar

Extrae los 5, 10 o 16 colores dominantes de una imagen y los muestra en HEX, RGB y HSL. Todo se ejecuta en el navegador y la imagen nunca se sube. Lo que sale son los colores que ocupan más superficie, no los que importan al diseño: en una fotografía manda el cielo o una pared, y hasta en un logotipo suele ganar el fondo. Lee el resultado con eso en mente si vas buscando un color de marca.

Caso	Qué ocurre	Qué hacer
La paleta se llena de colores casi iguales	El ruido de compresión JPEG, los degradados de una fotografía y los bordes suavizados hacen que una zona que el ojo lee como un color sean cientos de colores ligeramente distintos en los datos. Ordena sólo por frecuencia y la cabeza de la lista se llena de una misma familia. Los degradados amplios —cielo, piel— son lo peor.	Pide menos colores. Cinco da una paleta más coherente que dieciséis. Si el fin es diseñar, usarás dos o tres y el resto son matices. Por el lado de la imagen, reducirla antes con el redimensionador promedia el ruido fino y facilita aislar los colores dominantes.
Usar el color extraído tal cual deja el texto ilegible	Los colores tomados de una fotografía no comparten una luminosidad. Un color de luminosidad media usado como fondo tiene poco contraste tanto con texto blanco como negro. WCAG pide 4,5:1 para texto normal y 3:1 para texto grande, y un color sacado tal cual de una foto rara vez llega.	Usa el color extraído como una pista sobre el tono, y decide tú la luminosidad y la saturación. Conviértelo a HSL con el conversor de color, conserva la `H` y varía la `L`, y tendrás una escala coherente: 95 % para un fondo, 80 % para un borde, 30 % para texto. Mide siempre el contraste de las parejas antes de adoptarlas.
La misma imagen da resultados distintos	La extracción de colores dominantes suele usar un algoritmo como k-means, que parte de valores aleatorios. Por eso el resultado varía un poco en cada ejecución. No es un fallo sino una propiedad del algoritmo, y la oscilación crece con el número de colores pedidos y con lo suave que sea la distribución.	Cuando obtengas un resultado que te guste, apunta el HEX y fíjalo. Escrito como tokens de diseño en variables CSS, ya no hace falta volver a extraer. Al revés, si construyes algo que debe ser reproducible —generar el color de fondo de una miniatura, por ejemplo—, elige un método que divida el espacio de color en una rejilla y tome las celdas más pobladas, en vez de k-means: es determinista, así que la misma entrada da siempre el mismo color.

Una fila de colores extraídos todavía no es una paleta. Lo que necesitas de verdad es un color primario, una escala de variaciones de luminosidad a partir de él y un único acento para el contraste. Añadir más colores hace la pantalla menos coherente, no más. Ten en cuenta además que un tema oscuro no es el claro invertido: la convención es bajar la saturación y volver a subir la luminosidad, porque un color vivo que luce sobre fondo claro deslumbra y cuesta leerlo sobre fondo oscuro. Usa la extracción como punto de partida para construir esa escala.

📖 Cómo usar

1

Cargar imagen

Arrastra, haz clic o pega.
2

Elige cantidad

Elige 5, 10 o 16 y formato.
3

Extraer y copiar

Haz clic en una muestra o copia variables CSS.

❓ Preguntas frecuentes

¿Que algoritmo se usa?

Algoritmo Median Cut. Mas rapido que k-means.

¿Se sube la imagen?

No. Todo en el navegador con Canvas.

¿Como se manejan los PNG transparentes?

Pixeles totalmente transparentes se ignoran.

🔗 Herramientas relacionadas

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.