Cómo extraer una paleta de colores de cualquier imagen

2026-06-25

Algunas de las mejores paletas de colores ya existen — en una foto de un atardecer, un fotograma de película, el logo de una marca, una captura de un diseño que te gusta. En lugar de adivinar códigos hex, puedes simplemente tomar los colores directamente de la imagen. Aquí ves cómo, y cómo convertirlos en valores utilizables para tu CSS o tu herramienta de diseño.

Por qué extraer colores de una imagen

Construir una paleta desde cero es difícil; tomar prestada una que ya funciona es fácil. Una fotografía tiene armonía natural porque la luz de la escena unió los colores entre sí. El logo de una marca te entrega sus colores exactos. Partir de una imagen real te da una paleta que se siente coherente, y luego afinas.

Cómo funciona el cuentagotas

Una imagen es una cuadrícula de píxeles, y cada píxel tiene un color. Un selector de color (cuentagotas) lee el color exacto del píxel al que apuntas y lo reporta como un código — normalmente HEX (#f59563), que son los mismos valores rojo/verde/azul escritos en hexadecimal. Pasa el cursor para previsualizar, haz clic para guardar los que te gusten, y ya tienes una paleta.

El selector de color de ToolKoala hace exactamente esto en tu navegador:

1. Suelta cualquier imagen — una foto, una captura de pantalla, un logo.
2. Pasa el cursor para previsualizar un color; haz clic para guardarlo. Junta tantos como quieras.
3. Cada color guardado te da HEX y RGB para copiar directamente en tu código.

Se ejecuta localmente, así que la imagen de la que estás muestreando nunca se sube.

HEX, RGB, HSL — ¿cuál necesitas?

El mismo color, distintas notaciones:

• HEX (#f59563) — el estándar de la web; lo que pegarás en CSS la mayoría de las veces.
• RGB (245, 149, 99) — útil cuando necesitas un canal alfa (rgba(...)) para transparencia.
• HSL (tono, saturación, luminosidad) — el que aman los diseñadores para ajustar un color: mueve la luminosidad para hacer un tinte, desplaza el tono para encontrar un complementario.

Si tienes un color en un formato y necesitas otro, el conversor de color convierte HEX a RGB, HSL, HSV y CMYK al instante.

Convertir las selecciones en una paleta de verdad

Unos cuantos hábitos que hacen usable una paleta tomada:

• Toma un rango, no cinco tonos casi idénticos — uno oscuro, uno claro, un par de tonos medios y un acento.
• Comprueba el contraste en cualquier cosa que lleve texto encima. Un par precioso de bajo contraste es ilegible.
• Usa HSL para construir variaciones — una vez que tienes un color base, ajusta la luminosidad para estados hover, bordes y fondos en lugar de elegir colores nuevos sin relación.

Preguntas frecuentes

¿Cómo obtengo el código de color de una imagen? Usa un selector de color: carga la imagen, pasa el cursor para previsualizar y haz clic en el píxel cuyo color quieres. Reporta el color como un código HEX (y normalmente RGB) que puedes copiar. El selector de color de ToolKoala hace esto en el navegador.

¿Cuál es la diferencia entre HEX, RGB y HSL? Son tres formas de escribir el mismo color. HEX es el estándar de la web, RGB es útil para transparencia (rgba), y HSL es el más fácil para ajustar un color — cambiando la luminosidad o el tono a mano.

¿Puedo elegir colores de una captura de pantalla o un logo? Sí — cualquier imagen sirve, incluidas capturas de pantalla y logos. Esa suele ser la forma más rápida de igualar los colores exactos de una marca.

¿El selector de color sube mi imagen? No. ToolKoala lee los píxeles en tu navegador, así que la imagen nunca sale de tu dispositivo.

¿Cómo convierto un color HEX a RGB o HSL? Pégalo en un conversor de color. El conversor de color de ToolKoala convierte cualquier HEX a RGB, HSL, HSV y CMYK de una vez.

— Milo 🐨