Ir al contenido

Selector de Color de Imagen

Extrae colores de cualquier imagen al instante. Genera sombras, armonías visuales y comprueba el contraste WCAG. Todo gratis y sin registros.

Clic para extraer píxel

Sube o pega tu imagen

Haz clic, arrastra un archivo o pulsa Ctrl + V para pegar del portapapeles.

Color Seleccionado

#8B5CF6
HEX #8B5CF6
RGB rgb(139, 92, 246)
HSL hsl(258, 89%, 66%)

Sombras y Tonos

Variaciones matemáticas creadas al añadir negro (sombras) o blanco (tonos) a tu color base. Haz clic en cualquier franja para copiar su HEX.

Sombras (Shades)

0%10%20%30%40%50%60%70%80%90%100%

Tonos (Tints)

0%10%20%30%40%50%60%70%80%90%100%

Combinaciones y Armonías

Usa la teoría del color para crear paletas que funcionen visualmente juntas basadas en la rueda cromática. Clic para copiar.

Complementario

El color opuesto en la rueda. Alto impacto y contraste vibrante.

Análogo

Colores adyacentes. Crea transiciones suaves y diseños naturales.

Triádico

Tres colores espaciados equitativamente. Equilibrado pero enérgico.

Complementario Dividido

Contraste alto pero con menos tensión visual que el complementario puro.

Tetrádico

Cuatro colores formados por dos pares complementarios. Muy rico.

Monocromático

Mismo tono base pero variando luminosidad y saturación. Muy sutil.

Verificador de Contraste (WCAG)

Prueba cómo se lee el texto sobre tu color base para asegurar que cumple las normativas de accesibilidad web (A11Y).

Texto Grande

Este es un ejemplo de texto normal para lectura sobre tu fondo.

1.00
Texto Normal (AA) FALLA
Texto Grande (AA) FALLA

Texto Grande

Este es un ejemplo de texto normal para lectura sobre tu fondo.

1.00
Texto Normal (AA) PASA
Texto Grande (AA) PASA

Simulador de Daltonismo

Descubre cómo perciben tu color base las personas con diferentes deficiencias visuales (8% de la población masculina).

Visión Normal

Color base original

Protanopía

Ceguera al rojo

Deuteranopía

Ceguera al verde

Tritanopía

Ceguera al azul

Acromatopsia

Monocromatismo

El Selector de Color de Imagen Online Definitivo

Diseñadores gráficos, desarrolladores frontend y especialistas en marketing se enfrentan a diario al mismo problema: encontrar ese tono exacto que han visto en una fotografía, logotipo o captura de pantalla. Extraer un color hexadecimal gratis nunca había sido tan fácil ni tan completo como con nuestra suite de herramientas integradas.

Todo el ecosistema del color en tu navegador

Esta no es solo una herramienta para averiguar el código HEX de un píxel. Una vez que haces clic en la imagen (o introduces un color manualmente), nuestro motor matemático Client-Side genera instantáneamente todo lo que necesitas para tu sistema de diseño:

  • Sombras y Tonos (Tints & Shades): Variaciones perfectas al 10% para crear estados hover o active en botones UI.
  • Armonías Cromáticas: Basadas en la rueda HSL, te sugerimos los colores complementarios y análogos que matemáticamente encajan con tu selección.
  • Verificador de Accesibilidad (WCAG): Evalúa en tiempo real si el color elegido tiene el contraste suficiente (ratio 4.5:1) para que los textos sean legibles por todos los usuarios, mejorando tu UX y tu SEO.

Preguntas Frecuentes sobre el Extractor de Colores

¿Sube mi imagen a algún servidor externo?
¡Rotundamente no! Creemos en la privacidad absoluta de los datos. La imagen que subes o pegas se procesa utilizando la API nativa "Canvas" de tu propio navegador web. Al no haber transferencia de datos a la nube, es instantáneo y 100% seguro para material confidencial.
¿Cómo extraigo el color hexadecimal gratis de un degradado?
Las imágenes con sombras o degradados están compuestas por cientos de píxeles diferentes. Te recomendamos ampliar la foto y hacer clic en varias zonas del degradado. El panel actualizará el color instantáneamente para que puedas detenerte cuando veas el tono que exactamente deseas.
¿Qué significa el contraste WCAG AA y AAA?
Son las pautas de accesibilidad web del consorcio W3C. Para que un texto normal sea legible sin esfuerzo, debe tener un ratio de contraste mínimo de 4.5:1 respecto a su fondo (Nivel AA). Si el texto es grande, requiere un ratio de 3:1. Nuestra calculadora te dice al instante si tu color pasa o falla esta importante prueba de usabilidad.
Copiado al portapapeles