Paleta de colores desde una imagen

Sobre crear una paleta a partir de una foto

Todo diseñador lo ha hecho: una fotografía tiene exactamente el ambiente que el proyecto necesita, y el trabajo consiste en sacar ese ambiente de la imagen y meterlo en una hoja de estilos.

Adivinar no funciona. Un color que en pantalla parece un «gris cálido» rara vez es el gris que habrías escrito. La única forma de acertar es coger el píxel de verdad.

Suelta la foto, pasa por encima con la lupa y haz clic en los tonos que quieras. Cada uno se une a tu paleta de abajo con sus valores HEX, RGB y HSL listos para copiar.

Cómo se usa

• Pulsa Haz clic para subir, suelta una foto en la página o pega la URL de una imagen
• Mueve el puntero sobre la imagen: la lupa muestra el píxel que hay debajo
• Haz clic para añadir ese color a tu paleta
• Coge los que necesites: cinco o seis suelen ser una paleta
• Haz clic en cualquier muestra de tu paleta para recuperarla: la muestra grande y los valores HEX, RGB y HSL pasan a ella, y se copia su HEX
• Usa Copiar HEX / RGB / HSL para llevarte el formato que necesites

Por qué eliges tú los colores

Algunas herramientas adivinan una paleta automáticamente agrupando los colores más frecuentes. Suena mejor de lo que es. El color más *frecuente* de una fotografía suele ser una zona grande y apagada —cielo, pared, sombra—, y el tono que en realidad da carácter a la imagen suele ser uno pequeño: el óxido de una puerta, el verde de una hoja, un brillo en una taza.

Tú ves cuál es cuál. La lupa te deja coger exactamente ese píxel, a máximo aumento, de modo que la paleta es la que querías y no la que produjo un promedio.

La paleta es un sitio al que puedes volver

Las muestras no son solo el registro de lo que fuiste pulsando. Haz clic en una y pasa a ser el color actual: la muestra grande y las tres lecturas cambian a ella, y la que estás mirando queda rodeada para que sepas cuál es.

Eso es lo que hace práctico comparar dos tonos: coge los dos de la foto y luego ve pulsando de uno a otro leyendo los valores, en vez de rebuscar por la imagen el píxel que tenías hace un minuto.

Tres formatos, porque cada sitio quiere uno distinto

Cada color que eliges se muestra en los tres a la vez:

• HEX — #3f7a5e. CSS, programas de diseño, casi en todas partes
• RGB — rgb(63, 122, 94). Útil cuando necesitas los canales por separado
• HSL — hsl(154, 32%, 36%). El que usar para construir una escala: mantén el tono, mueve la luminosidad y tendrás un claro y un oscuro que van juntos

Para qué se usa

• Sacar un color de marca de un logotipo cuando nadie encuentra el manual
• Construir una paleta de web o de diapositivas a partir de una foto principal
• Igualar pintura, tela o hilo con una foto del objeto real
• Obtener el HEX exacto de un color en una captura de pantalla
• Encontrar los colores de un cuadro o una foto en los que quieres basarte
• Comprobar qué es un color de verdad, y no cómo se ve junto a otro

Bueno saberlo

• No se sube nada. La imagen se lee en la página y nunca sale de tu dispositivo
• Funciona con PNG, JPG, GIF y WebP
• Puedes pegar la URL de una imagen en lugar de un archivo, pero algunos servidores impiden que otros sitios lean sus píxeles (CORS). Si pasa eso, descarga la imagen y sube el archivo
• Los colores se leen de los píxeles reales a tamaño completo, no de la vista previa reducida, así que el valor es exacto
• Funciona en móvil y tableta igual que en el ordenador
• Es el mismo selector que Selector de color de imagen: usa esa página cuando solo quieras un color

Herramientas relacionadas

• Selector de color de imagen — la misma herramienta, enfocada a un único color
• Selector de color — elegir un color en una rueda en vez de en una foto
• Comprobador de contraste — comprobar que tu paleta se lee antes de publicarla
• Generador de degradados CSS — mezclar dos de tus nuevos colores
• Generador de nube de palabras — otro sitio donde poner una paleta a trabajar