Cómo saber el código de color de una imagen

La respuesta corta

Cada color de la pantalla es una mezcla de luz roja, verde y azul, y un código de color es simplemente la forma de escribir esa mezcla. Para leerlo en una imagen necesitas un cuentagotas: una herramienta que mira un píxel y te dice sus valores. Añade tu imagen al selector de abajo, muévete sobre ella hasta que la lupa muestre en el cuadro central el píxel que quieres y haz clic. El color se guarda con su código HEX, RGB y HSL, y un clic en el código lo copia.

Si quieres los colores generales de una foto y no un solo píxel, usa la sección de paleta de la misma herramienta: agrupa los píxeles parecidos y muestra los 5, 8 o 12 colores más frecuentes con sus códigos.

HEX, RGB y HSL: qué significan los códigos

RGB indica la cantidad de rojo, verde y azul con tres números de 0 a 255. HEX escribe esos mismos tres números en base 16, dos caracteres cada uno, después de una almohadilla: FF es 255, 80 es 128 y 00 es 0. Así, #FF8000 y rgb(255, 128, 0) son exactamente el mismo naranja. HSL describe el color como lo diríamos con palabras: el tono como un ángulo en la rueda de color (de 0 a 360), y la saturación y la luminosidad en porcentaje. HSL es práctico cuando quieres una versión más clara u oscura de un color, porque solo cambias el último número.

Herramientas de diseño como Figma, Canva y Photoshop aceptan HEX directamente, CSS acepta los tres, y programas de oficina como Word y PowerPoint suelen pedir RGB o HEX en su ventana de colores personalizados.

Otras formas de tomar un color en tu dispositivo

A veces el color no está en un archivo sino en algún lugar de la pantalla: una web, una app, un fotograma de un video. Estas opciones cubren casi todos los casos sin instalar nada pesado.

• En esta herramienta, Tomar de la pantalla (Chrome y Edge en computadora) convierte el puntero en un cuentagotas que funciona en cualquier parte de la pantalla, no solo dentro de la imagen.
• Windows: Microsoft PowerToys incluye un selector de colores; una vez instalado, Win+Shift+C lo abre y copia el código del píxel bajo el puntero.
• Mac: la app incluida Medidor de Color Digital (en Aplicaciones, Utilidades) muestra los valores bajo el puntero. Elige mostrar valores sRGB si necesitas códigos para la web.
• Herramientas de desarrollo del navegador: en Chrome y Edge, el cuadrito junto a cualquier color de CSS abre un selector con cuentagotas para la página actual.
• Celular: haz una captura de pantalla, añádela al selector de esta página y toca el color. En pantallas táctiles no aparece la lupa, así que amplía la página antes si la zona es pequeña.

Por qué el código puede salir un poco distinto

Dos píxeles vecinos de una foto casi nunca son idénticos. La compresión JPG, el ruido de la cámara, la luz y las sombras cambian los valores, así que al hacer clic sobre un coche rojo puedes obtener #B3121B en un píxel y #A90F18 en el siguiente. Es normal. En una foto, toma varios puntos de una zona con luz uniforme y quédate con el que se vea bien, o deja que la paleta promedie la zona por ti.

Los bordes son la trampa más común. El texto y los logos están suavizados (antialiasing), de modo que los píxeles del borde de una letra mezclan la letra y el fondo. Toma siempre el color del centro de la forma, para eso está la lupa. Evita también capturas reescaladas, enviadas por apps de mensajería o guardadas como JPG de baja calidad: cada paso mezcla o desplaza un poco los colores.

Las pantallas y los perfiles de color añaden otra capa. Muchos celulares y Mac muestran una gama más amplia que el sRGB estándar, y el mismo archivo puede verse algo distinto en dos pantallas. El selector lee los valores que dibuja el navegador, que son sRGB, el espacio que usan las webs y la mayoría de las herramientas de diseño. Los píxeles transparentes se leen como si estuvieran sobre fondo blanco.

Cómo sacar una paleta de una foto

Una foto que te gusta ya contiene colores que combinan entre sí, y eso la convierte en un buen punto de partida para una web, una presentación o imágenes para redes. En la sección de paleta elige 5, 8 o 12 colores. La herramienta reparte todos los píxeles en grupos de colores parecidos (el método median cut) y muestra el promedio de cada grupo, el más grande primero. Copiar todos pone cada código HEX en una línea, listo para un archivo CSS o una herramienta de diseño.

Con cinco colores obtienes un esquema sencillo: normalmente uno o dos tonos de fondo dominantes, un color principal y un acento. Doce colores conservan matices más sutiles, útiles en ilustración o para ver de qué está hecha realmente la imagen. Si un cielo o una pared enorme domina la paleta, recorta antes la foto a la parte que te interesa y vuelve a añadirla.

• Usa los colores grandes y tranquilos para fondos, y los pequeños y saturados para botones y detalles.
• Revisa el contraste del texto: la pauta WCAG pide al menos 4,5:1 entre el texto normal y su fondo, y 3:1 para texto grande.
• Guarda los códigos en un solo lugar (una guía de estilo o una lista en tu archivo de diseño) para que todos usen los mismos valores.

Consejos para acertar con los colores de una marca

Si necesitas el color exacto de una empresa o producto, la fuente más fiable es su manual de marca o una versión SVG del logo, porque contienen los valores originales. Un logo sacado de una captura de una web o de una foto de un cartel impreso solo te dará una aproximación.

Cuando tengas que tomarlo de una imagen, usa la zona plana más grande del logo, no el texto ni las líneas finas, y prefiere PNG o SVG antes que JPG. Toma tres o cuatro puntos; si solo difieren en una o dos unidades por canal, tienes el color correcto. Recuerda que los colores de impresión (CMYK, Pantone) y los de pantalla se definen de forma distinta: un código HEX tomado de la foto de algo impreso es una aproximación de cómo se ve en pantalla, no el valor oficial de impresión.