Cómo extraer una paleta de colores de una foto, paso a paso

Esa foto que tiene justo el ambiente de tu proyecto ya contiene la paleta de colores que buscas. En este tutorial convertirás una imagen en tarjetas de color, con códigos HEX y RGB listos para copiar, usando Mappum.

Por qué empezar la paleta a partir de una foto

Elegir colores «a ojo» suele dar combinaciones que no conversan entre sí. Una fotografía, ilustración o pintura de referencia ya trae colores que funcionan juntos, porque aparecen en la misma escena, bajo la misma luz. Extraer la paleta de esa imagen es un atajo para lograr un aspecto coherente en identidad visual, ilustración, diseño de interfaces o decoración.

Qué vas a necesitar

• Una imagen de referencia en tu computadora.
• Acceso a Mappum en mappum.com/app. Puedes probarlo sin cuenta: en la pantalla de entrada, elige Entrar como invitado. El tablero de invitado es temporal y puede perderse al actualizar la página; para guardar tus mapas, inicia sesión con Google o con correo electrónico.

Nota: las capturas de pantalla muestran la interfaz en portugués. Los nombres de los botones en el texto son los que verás en español.

Paso 1: abre un tablero y añade la foto

Crea un tablero nuevo. En la barra de herramientas de la izquierda, haz clic en Imagen y elige la foto en tu computadora. También puedes arrastrar la imagen al tablero o pegarla con Ctrl+V.

Mappum convierte la imagen a WebP automáticamente, lo que reduce mucho el tamaño del archivo y mantiene el tablero ligero, incluso con muchas referencias.

Paso 2: selecciona la imagen

Haz clic una vez sobre la foto. Aparece un contorno azul y, en la parte superior de la pantalla, una barra de opciones con Descripción, Recortar, Extraer paleta y Marco.

Paso 3: haz clic en «Extraer paleta»

Con la imagen seleccionada, haz clic en Extraer paleta. En un instante Mappum crea tarjetas de color justo debajo de la foto y te dice cuántos colores encontró. En esta foto de atardecer fueron 6.

Cada tarjeta muestra el código HEX, el valor RGB y un nombre sugerido para el color (en inglés). En este ejemplo:

• #B87C8A — Dusty Red
• #261C44 — Midnight Purple
• #123C59 — Midnight Sky
• #116876 — Deep Teal
• #8C5697 — Dusty Purple
• #C37E53 — Warm Orange

Mientras las tarjetas están seleccionadas, la barra superior te deja elegir qué se muestra en ellas: HEX, RGB, Descripción, Solo el color o Todo.

Paso 4: copia el código del color

Pasa el ratón sobre una tarjeta y haz clic en el botón de copiar (⧉) en la esquina de la muestra de color. Aparece el aviso «Copiado: #B87C8A» y el código queda en el portapapeles, listo para pegarlo en Figma, Photoshop, CSS o donde lo necesites.

¿Quieres ajustar un color? Haz doble clic sobre la tarjeta para elegir otro.

Cómo aprovechar bien la paleta extraída

Tener los códigos es solo el comienzo. Algunas reglas prácticas:

• Elige de 3 a 5 colores. Seis ya son muchos para la mayoría de los proyectos; descarta los que no ayudan.
• Define roles. Un color dominante, uno de apoyo y uno de acento. Los demás quedan para los detalles.
• Prueba el contraste. Un texto claro sobre un fondo oscuro, como el morado #261C44, suele leerse mejor que dos tonos medios juntos.
• Guárdala junto a la referencia. Deja la foto y las tarjetas en el mismo tablero: cuando vuelvas al proyecto, sabrás de dónde salió cada color.

Preguntas rápidas

¿Necesito crear una cuenta para extraer la paleta?

No. Puedes usarlo como invitado. Solo recuerda que el tablero de invitado es temporal; inicia sesión con Google o con correo electrónico para guardar tu trabajo.

¿Puedo usar cualquier imagen?

Sí, cualquier imagen que añadas al tablero: fotos, ilustraciones, capturas de pantalla u obras de referencia. El resultado depende de los colores predominantes de cada imagen.

¿Cuántos colores extrae Mappum?

Depende de la imagen: elige los colores más representativos y descarta tonos casi idénticos. En esta foto fueron 6.