Extraer colores de una imagen
Haz clic en cualquier punto de la imagen para obtener el color exacto. La paleta de abajo se actualiza con cada imagen. Abre, arrastra o pega la tuya; nunca sale de tu navegador.
Ejemplo: el diseño de una landing page
Color bajo el cursor
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Colores elegidos
Haz clic en la imagen para ir guardando colores aquí.
Paleta de colores de esta imagen
Cargando paleta...Cómo sacar el color de una imagen
- Abre, arrastra o pega una imagen. Una captura copiada con el atajo de tu sistema se puede pegar directamente.
- Pasa el ratón por la imagen. La lupa muestra los píxeles alrededor del cursor para que puedas caer justo en un borde de un píxel.
- Haz clic (o toca) para elegir. HEX, RGB y HSL aparecen a la derecha con botones para copiar, y el color se añade a Colores elegidos.
Con teclado, enfoca la imagen con Tab, muévete con las flechas (con Shift avanzas 10 píxeles) y pulsa Intro para elegir.
Cómo sacar la paleta de colores de una imagen
La paleta agrupa los píxeles parecidos y muestra primero los colores más frecuentes, con el porcentaje de la imagen que ocupa cada uno. Elige entre 3 y 12 colores: con menos obtienes los colores de marca, con más aparecen también bordes y sombras. Cópiala como variables CSS en :root, como bloque theme.extend.colors de Tailwind o como una lista simple de códigos HEX.
Ejemplos
- Copiar los colores de una marca a partir de una captura. Con la imagen de ejemplo de arriba y 6 colores, la paleta devuelve el fondo lavanda (
#f2f1fd, el 73% de los píxeles), el blanco de las tarjetas (#fcfcfd), dos grises suaves de bordes y logos, el violeta de los botones (#6049f0) y el texto oscuro (#3c3b62): justo lo que necesitas para una hoja de estilos. - Comprobar el contraste. Elige el color del texto y el del fondo sobre el que está, y compara los dos HEX en un comprobador de contraste antes de publicar.
- Crear un tema a partir de una foto. Arrastra la foto de un producto, pon 5 colores y pega el bloque de Tailwind en tu config para montar una landing a su alrededor.
Preguntas sobre el cuentagotas
¿Se sube mi imagen?
No. La imagen se dibuja en un canvas de tu navegador y cada píxel se lee en local. No sale nada de tu dispositivo, por eso también sirve para mockups confidenciales.
¿Por qué el color elegido es un poco distinto del de mi herramienta de diseño?
La compresión de JPG y WebP cambia ligeramente los valores de los píxeles, y las capturas pueden llevar un perfil de color distinto al del archivo original. Para colores de marca exactos, elige sobre una exportación PNG del diseño.
¿Cómo se calcula la paleta?
La imagen se reduce a unos 160 píxeles en su lado más largo y los colores se agrupan con clustering k-means. Cada muestra es la media de un grupo y el porcentaje es la proporción de píxeles que contiene. La misma imagen siempre da la misma paleta.
¿Qué formatos de imagen funcionan?
Cualquiera que tu navegador pueda mostrar: PNG, JPG, WebP, GIF (primer fotograma), AVIF y SVG. También puedes pegar una captura directamente desde el portapapeles.
¿Puedo usar la paleta en Tailwind CSS?
Sí. La pestaña de Tailwind te da un bloque theme.extend.colors. Pégalo en tailwind.config.js y usa clases como bg-palette-100 o text-palette-300.