¿Qué es Selector de color de imagen?

Extrae valores de color exactos de cualquier imagen haciendo clic sobre ella. La paleta se rellena al instante con los colores dominantes de la imagen, una lupa te ayuda a apuntar al píxel correcto y cada color trae HEX, RGB, HSL, HSV, CMYK y el nombre más cercano. Guarda colores en la paleta y expórtalos.

Cuando se carga una imagen, la herramienta toma sus seis colores más frecuentes y los pone directamente en la paleta, así tienes un conjunto inicial antes de hacer clic en nada. Una lupa de aumento muestra los píxeles bajo el cursor, lo que facilita acertar el tono exacto en lugar de un vecino con suavizado. Cada color que seleccionas indica sus valores HEX, RGB, HSL, HSV y CMYK, además del color con nombre CSS más cercano, y se suma a una paleta que puedes copiar como lista hex o exportar como JSON o variables CSS. También hay una vista de visión que pasa la imagen por filtros de daltonismo comunes, para que compruebes la accesibilidad mientras trabajas.

Cómo usar

1. Paso 1 — Sube cualquier imagen (PNG, JPEG, WebP, GIF). La imagen se carga en un lienzo interactivo con una lupa de zoom.
2. Paso 2 — Haz clic en cualquier punto de la imagen para seleccionar un color. La lupa amplía el área bajo tu cursor para una selección precisa.
3. Paso 3 — Copia cualquier valor en HEX, RGB, HSL, HSV o CMYK, o anota el nombre más cercano que aparece bajo la muestra. La paleta conserva cada clic — más los seis colores detectados de forma automática — para exportar en un toque.

Cuándo usar

• Reproducir un color corporativo a partir de una captura o un render.
• Crear una paleta a partir de una foto de referencia para un proyecto de diseño.
• Identificar el tono exacto del logo o del banner de un competidor.

Resultado

Una diseñadora sube una fotografía de naturaleza para extraer el tono turquesa exacto de un lago de montaña. Hace clic en el agua, obtiene #2E8B8C y lo añade a su paleta junto a otros tres colores de la misma foto.

Preguntas frecuentes

¿Por qué el color que extraigo difiere ligeramente del que veo en Photoshop?

La mayoría de navegadores convierten las imágenes a sRGB al cargarlas. Si tu fuente estaba etiquetada como Adobe RGB o Display P3, el valor capturado será el equivalente en sRGB. Para igualar al cien por cien, exporta el original a sRGB antes de muestrear.

¿La lupa muestra el píxel exacto o una zona promediada?

La lupa muestrea un único píxel: el que queda justo bajo la cruz. Los píxeles que la rodean solo aportan contexto visual. Si haces clic dentro de la lupa, fijas ese valor y los bordes con antialiasing dejan de engañarte.

¿Puedo muestrear colores de un PNG con zonas transparentes?

Sí. Los píxeles transparentes devuelven su RGB original y el alfa aparece aparte. Si pulsas un píxel totalmente transparente, sale el color de fondo del lienzo (blanco por defecto). Conviene clicar zonas opacas para lecturas fiables.

¿Qué diferencia hay entre HEX, RGB, HSL, HSV y CMYK — cuál debería usar?

HEX (#2E8B8C) es la forma más corta para CSS y editores de diseño. RGB indica los tres canales entre 0 y 255, útil cuando el código necesita números crudos. HSL describe matiz, saturación y luminosidad: cómoda cuando quieres aclarar o saturar un color un poco. HSV es muy parecido pero usa valor (brillo percibido) en lugar de luminosidad, formato preferido por los selectores de la mayoría de programas de diseño. CMYK te da los cuatro porcentajes de impresión, el formato que pide la imprenta o el diseñador de print.

¿Puedo capturar varios colores a la vez?

Cada imagen que subes rellena la paleta con los seis colores dominantes, y cada clic posterior añade otra muestra al conjunto. El panel de la paleta muestra todo lo capturado y te deja copiar cualquier muestra, copiar todos los códigos hex de golpe, eliminar entradas concretas o exportar todo el conjunto como archivo JSON o como propiedades personalizadas CSS listas para pegar.

Herramientas relacionadas