Selector de color de imagen

Cómo funciona el selector

Sube una foto, una captura de pantalla o un logo y haz clic en cualquier punto. La herramienta lee ese píxel exacto y muestra su color en HEX (por ejemplo #1e88e5) y en RGB (rgb(30, 136, 229)). El botón Copiar pone el código HEX en el portapapeles. Al cargar la imagen se toma el píxel central, para que veas un valor desde el primer momento.

Cada color que eliges se añade a una fila de muestras recientes (hasta ocho), así puedes probar varios puntos —un botón, un fondo, un titular— y compararlos antes de decidir. La imagen se lee en un canvas dentro de tu navegador y nunca se sube.

HEX, RGB y HSL sin tecnicismos

Los tres describen el mismo color en pantalla; solo lo escriben de forma distinta.

• HEX — #RRGGBB, tres pares de dígitos hexadecimales para rojo, verde y azul, de 00 a ff. Es lo que esperan CSS, Figma, Canva, los temas de WordPress y casi cualquier campo de "color de marca".
• RGB — los mismos tres canales en números decimales de 0 a 255. #1e88e5 y rgb(30, 136, 229) son idénticos. Útil en código, en Office y en programas con deslizadores.
• HSL — tono (0–360° en la rueda de color), saturación y luminosidad en porcentaje. El selector no muestra HSL, pero cualquier programa de diseño o CSS convierte el HEX al instante. HSL viene bien para sacar una versión más clara u oscura del color elegido: mantienes el tono y cambias solo la luminosidad.

Sacar colores de capturas de pantalla

Para copiar un color de una app, una web o un fotograma de vídeo, haz una captura (Windows: Win + Mayús + S; Mac: Cmd + Mayús + 4; móvil: encendido + bajar volumen, o botón lateral + subir volumen en iPhone) y suéltala aquí.

Consejos para acertar:

• Haz clic en zonas planas. Apunta al centro de un botón, no al borde: los bordes se mezclan (antialiasing) con el fondo y dan un color intermedio.
• Las fotos tienen ruido. Los píxeles vecinos de una fotografía varían un poco; prueba varios puntos y quédate con el más representativo.
• Las capturas pueden alterar el color. El modo nocturno, Night Shift, el HDR o una pantalla con gestión de color pueden teñir la captura. Desactívalos si necesitas el color de marca exacto.
• Los JPG muy comprimidos se desvían. Un JPG guardado muchas veces muestra manchas cerca de los bordes. Usa el PNG o SVG original del logo si lo tienes.
• Las zonas transparentes no tienen color real; al pincharlas obtienes negro (#000000). Haz clic en la parte visible del logo.

Comprueba el contraste antes de usar el color

Un color bonito puede ser ilegible como texto. Las pautas de accesibilidad (WCAG) piden un contraste mínimo de 4,5:1 entre texto normal y fondo, y de 3:1 para texto grande e iconos. Gris claro sobre blanco o azul medio sobre azul oscuro suelen fallar.

Cuando tengas los colores de texto y fondo, pega ambos HEX en cualquier comprobador de contraste. Si la relación es baja, oscurece el texto o aclara el fondo; ajustar la luminosidad en HSL es la forma más rápida de corregirlo sin salirte de la marca.

Usos habituales

• Encontrar el color de marca de un logo que te enviaron como imagen.
• Recrear el color de un botón o fondo de una web en tu propio diseño.
• Crear una paleta a partir de una foto para presentaciones, redes sociales o un moodboard de decoración.
• Elegir el fondo del icono Apple touch en el generador de favicon.

Herramientas relacionadas

• Recorta primero el sujeto y muestrea sin fondo: Eliminar fondo.
• Aísla una zona pequeña para hacer clic con más precisión: Recortar imagen.
• ¿Necesitas la imagen como código para CSS? Imagen a Base64.