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 explora — PNG, JPG, WEBP o GIF
Tip: 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
Verificador 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 deja tomar cualquier color de una imagen o de la pantalla y ver al instante sus códigos exactos en distintos formatos: HEX, RGB, HSL, HSV y CMYK. En lugar de andar adivinando qué tono usaste, colocas el gotero sobre el píxel que te gustó y la herramienta te suelta el valor listo para copiar y pegar donde lo necesites.
Sirve para un montón de cosas: armar la paleta de un sitio web, definir variables de color en tu código, preparar archivos para impresión con valores CMYK o revisar que tus combinaciones cumplan con el contraste para accesibilidad. Es una herramienta gratuita que corre por completo en tu navegador, así que tus imágenes nunca salen de tu equipo ni se suben a ningún servidor. Además de leer los códigos HEX, RGB, HSL, HSV y CMYK, puedes extraer la paleta de una imagen, generar armonías de color y verificar el contraste según las pautas WCAG.
Cómo seleccionar un color de una imagen
- 1
Sube o arrastra tu imagen
Sube una imagen desde tu computadora, arrástrala y suéltala en el recuadro, o pega la URL de una foto. Funciona con PNG, JPG, WEBP y GIF, y todo se procesa en tu propio navegador.
- 2
Haz clic con el gotero en un píxel
Activa el gotero y haz clic sobre el punto exacto de la imagen que quieras muestrear. Puedes acercarte para elegir el píxel preciso y obtener el tono justo que buscas.
- 3
Lee y copia los códigos de color
En cuanto seleccionas un color aparecen sus valores en HEX, RGB, HSL, HSV y CMYK. Da clic en cualquiera de ellos para copiarlo al portapapeles y usarlo en tu proyecto.
- 4
Extrae la paleta de la imagen
Con un botón puedes extraer los colores predominantes de la foto y obtener una paleta completa. Es perfecto para inspirarte en una fotografía y reproducir sus tonos en tu diseño.
- 5
Genera armonías de color
A partir del color que elegiste, la herramienta calcula combinaciones armónicas: complementaria, análoga, triádica, tetrádica, complementaria dividida y monocromática, para que armes esquemas equilibrados.
- 6
Verifica el contraste WCAG y guarda tu trabajo
Revisa la relación de contraste entre texto y fondo para asegurarte de que cumpla los niveles AA y AAA de WCAG. Al final puedes guardar tus colores y exportarlos como CSS, JSON o PNG.
HEX, RGB, HSL, HSV y CMYK explicados
Un mismo color se puede escribir de varias maneras, y cada formato tiene su razón de ser. HEX y RGB son los reyes de las pantallas, HSL y HSV facilitan ajustar un tono a mano y CMYK es indispensable cuando el color va a terminar impreso en papel. Aquí tienes un resumen de cada modelo con un ejemplo del mismo azul y cuándo conviene usarlo.
| Model | Example | Best for |
|---|---|---|
| HEX | #3B82F6 | Web y CSS |
| RGB | rgb(59, 130, 246) | Pantallas |
| HSL | hsl(217, 91%, 60%) | Ajuste intuitivo |
| HSV | hsv(217, 76%, 96%) | Herramientas de diseño |
| CMYK | cmyk(76%, 47%, 0%, 4%) | Impresión |
Diseño web y de interfaces
Toma colores de referencias, capturas o fotografías para construir la paleta de tu sitio o app. Copiar el HEX exacto de un botón o un fondo te ahorra el ojo por ojo y mantiene la identidad visual consistente en toda la interfaz.
Desarrollo front-end
Obtén los valores listos para pegarlos como variables CSS, tokens de diseño o propiedades personalizadas. Con los códigos HEX y RGB a la mano defines tus --color-primary y demás variables sin salir del navegador ni instalar nada.
Impresión y marca
Cuando el diseño va a imprenta, el color se maneja en CMYK. La herramienta te da la conversión directa a cuatricromía para que tus folletos, empaques y material de marca salgan con los tonos correctos y sin sorpresas en el resultado impreso.
Accesibilidad
Verifica que la combinación de texto y fondo tenga suficiente contraste según las pautas WCAG. Así te aseguras de que tu contenido sea legible para todas las personas, incluidas las que tienen baja visión, y cumples con los niveles AA y AAA.
Comparación
Hay varios selectores de color en línea, pero no todos ofrecen lo mismo. Esto es lo que encuentras aquí frente a una herramienta popular como imagecolorpicker.com.
| Modelos de color | HEX, RGB, HSL, HSV y CMYK | Principalmente HEX y RGB |
| CMYK para impresión | Sí, conversión directa a CMYK | No |
| Verificador de contraste WCAG | Sí, con niveles AA y AAA | No |
| Armonías de color | Sí, seis tipos de combinaciones | No |
| Anuncios | Sin anuncios | Con anuncios |
Preguntas frecuentes
¿Cómo selecciono un color de una imagen?
Sube o arrastra tu imagen, activa el gotero y haz clic sobre el píxel que quieras. Al instante verás sus valores en HEX, RGB, HSL, HSV y CMYK, listos para copiar. Puedes acercarte para elegir el punto exacto.
¿Qué es un código de color HEX?
Un código HEX es una forma de escribir un color con seis dígitos en formato hexadecimal precedidos por un signo de gato, como #3B82F6. Cada par representa la intensidad de rojo, verde y azul. Es el formato más usado en la web y en CSS.
¿Cómo convierto RGB a HEX?
No necesitas hacer cuentas: cuando eliges un color, la herramienta muestra al mismo tiempo su valor RGB y su equivalente HEX. Solo copia el que necesites. Detrás, cada componente RGB (0 a 255) se convierte a su representación hexadecimal.
¿Cómo creo una paleta a partir de una foto?
Sube la fotografía y usa la opción de extraer paleta. La herramienta analiza la imagen y te devuelve los colores predominantes en una paleta que puedes copiar o exportar. Ideal para reproducir la atmósfera de una foto en tu diseño.
¿Cómo verifico el contraste de color para accesibilidad?
Elige un color de texto y uno de fondo en el verificador de contraste. La herramienta calcula la relación de contraste y te indica si cumple los niveles AA y AAA de las pautas WCAG, para que tu contenido sea legible para todos.
¿Es gratis y respeta mi privacidad?
Sí, es totalmente gratis y sin anuncios. Todo el procesamiento ocurre dentro de tu navegador, así que tus imágenes nunca se suben a ningún servidor ni salen de tu equipo. Nada de tus archivos se guarda ni se comparte.
