Selector de Color
Haz clic en un píxel de una imagen para obtener su HEX, RGB y HSL
Arrastra una imagen aquí o haz clic para subirla
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Colores recientes
🔒 Tu imagen se procesa por completo en el navegador y nunca se sube.
Procesando…
0.0
No se ha bloqueado: el resultado aparecerá cuando termine el cálculo.
Acerca de Selector de Color
Carga una imagen y la herramienta la dibuja en un canvas, lee el píxel sobre el que haces clic y lo muestra en HEX, RGB y HSL. Una lupa de 6 aumentos ayuda a apuntar al píxel exacto, y los últimos ocho colores elegidos quedan en un historial.
Un cuentagotas parece trivial, pero sacar el color correcto de una foto o una captura tiene trampas. Aquí se explica por qué el mismo punto puede dar valores ligeramente distintos y en qué punto está el selector de pantalla del propio navegador, la API EyeDropper.
Por qué la misma zona da valores distintos
JPEG comprime en bloques de 8×8 y normalmente guarda el color (croma) a la mitad de resolución en cada dirección. Incluso sobre un logotipo plano, moverse un píxel puede convertir #2F6FD1 en #3070D2, y cerca de los bordes, como el contorno de un texto, aparecen colores intermedios que nunca estuvieron en el diseño. Haz clic dentro de una zona plana, a unos píxeles de cualquier borde, toma dos o tres muestras y quédate con el valor que se repite.
Las imágenes cuyo lado largo supera los 1.600 píxeles se muestran reducidas a 1.600, pero el color se lee del píxel a resolución original: la posición del clic se convierte a coordenadas de origen. Así, una línea de un píxel en una captura 4K sale sin mezclarse con su entorno. Acertar una línea tan fina en la vista reducida cuesta, así que guíate por la lupa o recorta esa zona primero.
Perfiles de color y el color que viste
Las fotos de iPhone y las capturas de Mac suelen llevar un perfil Display P3. Cuando el navegador dibuja esa imagen en un canvas la convierte al espacio de color del canvas, que por defecto es sRGB, así que los valores que obtienes aquí son sRGB. Los rojos y verdes muy saturados que solo existen en P3 se recortan al borde de sRGB. Si vas a pegar el resultado en CSS normal, sRGB es justo lo que necesitas.
En PNG transparentes también se lee el canal alfa y se muestra como rgba(). El campo HEX siempre tiene seis dígitos sin alfa, de modo que el HEX de un píxel semitransparente da un color más intenso que el que veías en pantalla.
La API EyeDropper: elegir en cualquier parte de la pantalla
Chrome y Edge (desde la versión 95) incluyen la API EyeDropper, que permite a una página abrir un selector del sistema capaz de muestrear cualquier píxel de la pantalla, incluso fuera de la ventana del navegador. Solo funciona en páginas HTTPS y en respuesta a un gesto del usuario, como un clic; el cursor se convierte en lupa y Escape cancela, así que una página no puede leer tu pantalla a escondidas. MDN la marca como experimental y fuera de Baseline porque Firefox y Safari no la admiten.
En los navegadores compatibles con EyeDropper esta herramienta muestra el botón «Tomar un color de la pantalla», que muestrea cualquier punto de la pantalla, incluidas otras aplicaciones. Firefox y Safari no muestran el botón; en ellos, haz una captura de pantalla y cárgala. En Windows con HDR activado las capturas pueden salir lavadas, y eso desplaza todos los colores que muestrees.
Qué formato copiar
HEX es el más compacto y el que suelen citar las guías de marca. rgb() se lee mejor y admite alfa. HSL es útil si quieres una versión más clara u oscura del color muestreado: mantén H y S y cambia L. Eso sí, la luminosidad HSL no es brillo percibido: un amarillo y un azul con la misma L se ven muy distintos, así que comprueba el contraste real antes de usar un tono derivado para texto.
Ejemplos
Dónde cae un clic en el array de píxeles
- Entrada
Clic en (x=10, y=5) sobre una imagen de 100 px de ancho- Resultado
data[2040] a data[2043] = R, G, B, A
Los píxeles del canvas se guardan fila a fila, cuatro bytes cada uno: (5 × 100 + 10) × 4 = 2040.
Pasar una muestra a HSL
- Entrada
#3366CC (R51, G102, B204)- Resultado
hsl(220, 60%, 50%)
Canales 0,2, 0,4 y 0,8. Luminosidad = media de máximo y mínimo = 0,5. Saturación = rango 0,6 / (1 − |2 × 0,5 − 1|) = 0,6. El azul es el máximo, así que el tono es ((0,2 − 0,4)/0,6 + 4) × 60 = 220°.
Un píxel semitransparente
- Entrada
R0, G0, B0, A128- Resultado
rgba(0, 0, 0, 0.5) / HEX #000000
128/255 = 0,502, redondeado a dos decimales. Si copias solo el HEX, una sombra negra al 50 % se vuelve negro sólido.
Cómo se usa
- Arrastra o elige una imagen.
- Apunta con la lupa y haz clic en el píxel que quieras.
- Copia HEX, RGB o HSL; pulsa una muestra del historial para recuperar un color anterior.
Preguntas frecuentes
El valor difiere en uno o dos del archivo de diseño.
Casi siempre por la compresión JPEG o la conversión de perfil de color. Las imágenes de más de 1.600 px se muestrean en sus píxeles originales, así que la vista reducida no es la causa. Usar el PNG original reduce la diferencia.
¿Puedo tomar un color directamente de una web?
En Chrome y Edge sí: el botón «Tomar un color de la pantalla» muestrea cualquier punto de la pantalla, webs incluidas. Firefox y Safari no lo muestran; ahí usa el cuentagotas de las herramientas de desarrollo o una captura.
¿Por qué en Firefox no aparece el selector de pantalla en otras webs?
Firefox y Safari no han implementado la API EyeDropper, así que esas webs ocultan el botón o usan otro método.
¿El color es lo bastante oscuro para texto?
Pega el HEX en el comprobador de contraste de color para ver su relación WCAG con el fondo.
Guías relacionadas
Fuentes
Revisado el: