Selector de color
Elige cualquier color de una imagen y obtén al instante los códigos HEX, RGB, HSL, HSV y CMYK.
Sube una imagen para elegir un color
Arrastra y suelta, pega o examina — PNG, JPG, WEBP o GIF
Consejo: también puedes pegar una imagen con Ctrl/Cmd + V
Códigos de color
Nombre de color más cercano: Royal Blue
Armonías de color
Comprobador de contraste (WCAG)
Texto de ejemplo
Colores guardados
Aún no hay colores guardados — elige uno y pulsa “Guardar color”.
Un selector de color es una herramienta que te permite tomar cualquier tono de una imagen o de la pantalla y conocer su valor exacto: basta con hacer clic con el cuentagotas sobre un píxel para obtener al instante sus códigos en varios formatos. Es una de esas utilidades imprescindibles cuando trabajas con color, ya sea para reproducir con precisión el azul del logotipo de un cliente, igualar el tono de una fotografía o definir la paleta de una interfaz.
Sus usos abarcan el diseño web y de interfaces, el desarrollo front-end (donde necesitas el HEX exacto para tus hojas de estilo), la impresión (con valores CMYK listos para la imprenta) y la accesibilidad (comprobando que el contraste cumple las pautas WCAG). Nuestra herramienta es totalmente gratuita y funciona por completo en tu navegador, por lo que tus imágenes nunca se suben a ningún servidor y tu privacidad queda garantizada. Ofrece los códigos en HEX, RGB, HSL, HSV y CMYK, extrae automáticamente la paleta de una imagen, genera armonías de color y comprueba el contraste según las normas WCAG.
Cómo elegir un color de una imagen
- 1
Sube o arrastra una imagen
Arrastra tu archivo a la zona de carga, examina tu equipo o pega una imagen con Ctrl/Cmd + V. Se admiten PNG, JPG, WEBP y GIF, y todo el procesamiento ocurre en tu navegador.
- 2
Haz clic con el cuentagotas
Sitúa el cuentagotas sobre la imagen y haz clic en el píxel exacto cuyo color quieras capturar. Puedes acercar la vista para muestrear con total precisión, incluso en zonas pequeñas o con degradados.
- 3
Lee y copia los códigos
Consulta al instante los valores del color en HEX, RGB, HSL, HSV y CMYK. Pulsa el botón de copiar junto a cualquier formato para llevarlo directamente a tu editor de código, tu herramienta de diseño o tu documento.
- 4
Extrae la paleta de la imagen
Pulsa «Extraer paleta» para que la herramienta detecte automáticamente los colores dominantes de la imagen y te muestre una paleta coherente lista para usar en tu proyecto.
- 5
Genera armonías de color
A partir del color seleccionado, obtén combinaciones complementarias, análogas, triádicas, tetrádicas y monocromáticas para construir una paleta equilibrada y con buen aspecto.
- 6
Comprueba el contraste y exporta
Verifica que la combinación de texto y fondo cumple los niveles de contraste WCAG (AA y AAA) y, cuando estés conforme, guarda y exporta tu paleta en CSS, JSON o PNG.
HEX, RGB, HSL, HSV y CMYK explicados
Un mismo color puede expresarse de muchas formas, y cada modelo tiene su ámbito ideal: unos están pensados para pantallas, otros para ajustar el tono de forma intuitiva y otros para la imprenta. Conocer las diferencias te ayuda a elegir el formato adecuado en cada situación.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web y CSS |
| RGB | rgb(59,130,246) | Pantallas |
| HSL | hsl(217,91%,60%) | Ajuste intuitivo del tono |
| HSV | hsv(217,76%,96%) | Herramientas de diseño |
| CMYK | cmyk(76%,47%,0%,4%) | Impresión |
Diseño web y de interfaces
Captura colores de una referencia, una fotografía o una captura de pantalla y construye la paleta de tu interfaz con tonos coherentes. Las armonías de color te ayudan a definir colores primarios, secundarios y de acento que combinan entre sí, mientras que la extracción de paleta te da una base perfecta cuando partes de una imagen de inspiración.
Desarrollo front-end
Obtén el código HEX o RGB exacto para tus variables CSS y evita las conjeturas al reproducir un diseño. Copia el valor con un solo clic y pégalo en tus custom properties, en tu configuración de Tailwind o en tu sistema de tokens de diseño, con la seguridad de que el tono coincide con el original píxel a píxel.
Impresión y marca
Cuando un diseño va a la imprenta, necesitas valores CMYK, no RGB. Nuestra herramienta te muestra la conversión CMYK de cualquier color que captures, lo que resulta especialmente útil para preparar papelería, folletos o materiales de marca y mantener la coherencia entre lo que se ve en pantalla y lo que sale impreso.
Accesibilidad
Un buen contraste entre texto y fondo es esencial para que tu contenido sea legible para todo el mundo. El comprobador integrado calcula la ratio de contraste y te indica si cumple los niveles AA y AAA de las pautas WCAG, tanto para texto normal como grande, para que tomes decisiones de color accesibles desde el principio.
La comparación
Muchos selectores de color en línea se limitan a lo básico y llenan la pantalla de anuncios. Así es como se compara nuestra herramienta con imagecolorpicker.com.
| Modelos de color | HEX, RGB, HSL, HSV y CMYK | Principalmente HEX, RGB y HSL |
| CMYK para impresión | Sí, con conversión completa | No |
| Comprobador de contraste WCAG | Sí, con niveles AA y AAA | No |
| Armonías de color | Sí, seis tipos de combinaciones | Limitadas o inexistentes |
| Anuncios | Sin anuncios ni distracciones | Con anuncios |
Preguntas frecuentes
¿Cómo elijo un color de una imagen?
Sube o arrastra tu imagen a la herramienta y haz clic con el cuentagotas sobre el píxel cuyo color quieras capturar. Al instante verás sus valores en HEX, RGB, HSL, HSV y CMYK, que podrás copiar con un solo clic. Puedes acercar la vista para muestrear zonas pequeñas con más precisión.
¿Qué es un código de color HEX?
Un código HEX es una forma de representar un color mediante seis dígitos hexadecimales precedidos de una almohadilla, como #3B82F6. Cada par de dígitos indica la intensidad de rojo, verde y azul, respectivamente. Es el formato más habitual en la web y en CSS porque es compacto y fácil de copiar y pegar.
¿Cómo convierto RGB a HEX?
No hace falta que hagas la conversión a mano: cuando eliges un color con la herramienta, se muestran simultáneamente sus valores RGB y HEX. Por ejemplo, rgb(59,130,246) equivale a #3B82F6. Solo tienes que copiar el formato que necesites.
¿Puedo crear una paleta a partir de una foto?
Sí. Sube la fotografía y pulsa «Extraer paleta»: la herramienta analiza la imagen y detecta automáticamente sus colores dominantes para ofrecerte una paleta coherente. Después puedes guardarla y exportarla en CSS, JSON o PNG para usarla en tu proyecto.
¿Cómo compruebo el contraste de color para accesibilidad?
Usa el comprobador de contraste integrado: elige un color de texto y uno de fondo, y la herramienta calcula la ratio de contraste e indica si cumple los niveles AA y AAA de las pautas WCAG, tanto para texto normal como grande. Así te aseguras de que tu contenido sea legible para todas las personas.
¿Es gratis y respeta mi privacidad?
Sí. La herramienta es totalmente gratuita y no requiere registro. Además, todo el procesamiento se realiza en tu propio navegador: tus imágenes nunca se suben a ningún servidor, por lo que tu privacidad queda plenamente garantizada.
