Generador de paletas de colores desde imagen
Extrae los colores dominantes de cualquier foto en HEX, RGB y HSL. Todo se ejecuta localmente: no se sube nada.
- Entrada
- PNG · JPEG · WebP · GIF · SVG
- Salida
- HEX · RGB · HSL · CSS · JSON
Suelta una imagen
Una foto, una captura de pantalla o un logotipo: PNG, JPEG, WebP, GIF o SVG. También puedes pegar una imagen.
Saca la paleta de colores de cualquier imagen
Suelta una foto, una captura de pantalla o un logotipo y este generador de paletas de colores extrae sus colores dominantes, ordenados según cuánto de la imagen ocupa cada uno. Elige entre 3 y 12 muestras, copia cualquiera en HEX, RGB o HSL, haz clic en cualquier punto de la imagen para tomar un píxel exacto y exporta la paleta como variables CSS, SCSS, configuración de Tailwind, JSON o una tira PNG. La imagen se analiza en tu propio dispositivo y nunca se sube.
Cómo extraer los colores de una imagen
- Suelta una imagen en la página, elígela entre tus archivos o pégala directamente desde el portapapeles. Funcionan PNG, JPEG, WebP, GIF y SVG.
- Ajusta Colores al número de muestras que quieras. La tira sobre la lista muestra cada color según su proporción en la imagen.
- Haz clic en un valor para copiarlo como HEX, RGB o HSL.
- ¿Necesitas un punto concreto, como el color de un botón en una captura? Haz clic en ese punto de la imagen para tomarlo y añádelo a la paleta con el botón más.
- Elige un formato de exportación y copia el código, o descarga la paleta como una tira PNG.
Cómo se encuentran los colores dominantes
Una foto puede contener fácilmente cien mil colores distintos, la mayoría pequeñas variaciones unos de otros. Para encontrar los pocos que importan, la imagen se reduce y cada píxel se agrupa con los que más se le parecen, mediante un método llamado agrupamiento k-means. Cada grupo se convierte en una muestra: la media de sus píxeles, ordenada por cuántos píxeles contiene.
Dos detalles hacen que el resultado sea mejor que el de un selector ingenuo. Primero, los colores se comparan en OKLab, un espacio de color diseñado para que distancias iguales parezcan diferencias iguales a la vista. Agrupar en RGB simple tiende a dividir los verdes en muchos tonos casi idénticos y a juntar azules distintos. Segundo, los puntos de partida se eligen de forma determinista, favoreciendo colores que sean a la vez frecuentes y lejanos de los ya elegidos, de modo que la misma imagen siempre da la misma paleta y un acento pequeño pero vivo, como un logotipo rojo sobre una pared gris, no queda absorbido por el fondo.
Los píxeles transparentes se ignoran, así que un logotipo en un PNG transparente te da los colores del logotipo, no una muestra de negro.
HEX, RGB y HSL: cuál copiar
¿Necesitas OKLCH, CMYK o HSV, o un tono más claro de una de las muestras? Pega el valor HEX en el conversor de colores, que muestra todas las notaciones junto con tintes, sombras y armonías de color.
- HEX
- #2a9d8f. Seis dígitos hexadecimales para rojo, verde y azul. La forma más compacta, aceptada por todas las herramientas de diseño y por CSS.
- RGB
- rgb(42, 157, 143). Los mismos tres canales como números de 0 a 255. Práctico en código que hace cálculos con colores o en herramientas que piden valores separados.
- HSL
- hsl(173 58% 39%). Tono, saturación y luminosidad. La notación más fácil de ajustar a mano: sube la luminosidad para un estado hover y baja la saturación para una variante apagada.
Formatos de exportación
- Variables CSS: un bloque
:rootcon--palette-1,--palette-2, etc., listo para cualquier hoja de estilos. - SCSS: variables del estilo
$palette-1para proyectos Sass. - Configuración de Tailwind v3: un objeto
theme.extend.colorsparatailwind.config.js, que da clases comobg-palette-1. - Tailwind v4 @theme: propiedades personalizadas
--color-palette-1para la configuración basada en CSS de Tailwind 4. - JSON: un array con el HEX, RGB y HSL de cada color, para scripts y design tokens.
- Tira PNG: las muestras una al lado de otra como imagen, para un moodboard, un briefing o un mensaje de chat.
Consejos para una paleta útil
- Pocos colores para trabajo de marca, más para ilustración. Cinco o seis muestras suelen captar el ambiente de una foto; sube a 10 o 12 cuando también necesites los tonos secundarios.
- Recorta primero. Un cielo grande o un borde de página blanco dominan el resultado. Recorta la parte de la imagen que te interesa para obtener una paleta que la refleje.
- Comprueba los colores de texto antes de usarlos. Los colores sacados de una foto rara vez tienen suficiente contraste para texto. Pasa por el comprobador de contraste cualquier pareja sobre la que pienses poner texto.
- Usa el cuentagotas para valores exactos. Los colores dominantes son medias. Cuando necesites el color preciso de un píxel, como un logotipo o un elemento de interfaz en una captura, haz clic en él.
Preguntas frecuentes
- ¿Cómo saco una paleta de colores de una imagen?
- Suelta la imagen en esta página. Los colores dominantes aparecen al instante, ordenados por la parte de la imagen que ocupan, y puedes cambiar cuántos obtienes, copiar cada uno en HEX, RGB o HSL y exportar el conjunto como CSS, Tailwind o JSON.
- ¿Cómo encuentro el código HEX de un color en una foto?
- Carga la foto y haz clic en el punto exacto que quieras. El cuentagotas muestra los valores HEX, RGB y HSL de ese píxel, y al hacer clic en cualquier valor se copia.
- ¿Cómo se calculan los colores dominantes?
- La imagen se reduce y sus píxeles se agrupan con k-means en el espacio de color OKLab, que mide la diferencia de color tal como la percibimos. El color medio de cada grupo se convierte en una muestra, ordenada por la proporción de píxeles que contiene.
- ¿Por qué obtengo colores algo distintos que con otra herramienta?
- Cada extractor agrupa los píxeles parecidos de forma diferente, y las muestras son medias de esos grupos, no píxeles sueltos. La inicialización de esta herramienta es determinista, así que aquí la misma imagen siempre da el mismo resultado. Usa el cuentagotas cuando necesites el valor exacto de un píxel.
- ¿Puedo exportar la paleta a Tailwind CSS?
- Sí. Elige configuración de Tailwind v3 para obtener un objeto colors que pegar en tailwind.config.js, o Tailwind v4 @theme para la configuración basada en CSS, y copia o descarga el código.
- ¿Funciona con PNG transparentes y logotipos?
- Sí. Los píxeles mayoritariamente transparentes se omiten, así que la paleta refleja el diseño visible y no el fondo vacío.
- ¿Se sube mi imagen?
- No. La imagen se decodifica y analiza en tu navegador y nunca sale de tu dispositivo.