Selector de color de imagen — HEX, RGB y paleta
Herramienta de navegador que saca códigos de color de una imagen y crea una paleta de colores dominantes
Funciona en tu navegador · no se sube nada
Suelta la imagen de la que quieres sacar colores
Una imagen, por ejemplo JPG, PNG o WebP. También puedes pegar una imagen copiada con Ctrl+V (⌘V en Mac). Nunca sale de tu navegador.
Haz clic o toca la imagen para obtener el color que hay debajo. Después de hacer clic también puedes moverte con las teclas de flecha (Mayús + flecha para 10 píxeles).
Lupa
Cursor: -
Color elegido
Todavía no has elegido ningún color. Haz clic en la imagen.
Paleta de colores dominantes
Se obtiene con k-means: la imagen se reduce y los colores parecidos se agrupan. La misma imagen siempre da el mismo resultado. Haz clic en un color para cargarlo arriba.
Qué es
Esta herramienta te dice el color de cualquier píxel de una foto o un diseño como código HEX (#2563EB), RGB y HSL. Haz clic o toca la imagen para elegir un píxel; una lupa amplía la zona para que aciertes en el punto exacto. También crea automáticamente una paleta con los 5 a 8 colores más destacados.
Cómo se usa
- Suelta una imagen o pulsa Elegir imagen. También puedes pegar una imagen copiada con Ctrl+V (⌘V en Mac).
- Al moverte por la imagen, la Lupa de la derecha muestra ampliados los píxeles cercanos. Haz clic o toca donde quieras.
- Consulta HEX, RGB y HSL en Color elegido y pulsa Copiar.
- Después de hacer clic en la imagen, las teclas de flecha mueven el cursor de píxel en píxel, y Mayús más una flecha, diez píxeles, para afinar más.
- En Paleta de colores dominantes elige entre 5 y 8 colores y haz clic en una muestra para cargarla en los valores de arriba.
Cómo funciona
- HEX: cada canal como dos dígitos hexadecimales en mayúsculas. R37 G99 B235 da #2563EB.
- HSL: tono de 0 a 360 grados, saturación y luminosidad de 0 a 100 %, redondeados a enteros. El color anterior es hsl(221, 83%, 53%).
- Paleta: los píxeles con al menos un 50 % de opacidad se agrupan con k-means (inicialización k-means++, semilla fija, 20 iteraciones como máximo) y los centros se redondean. Los grupos más grandes van primero, con su porcentaje de la imagen.
- Reducción: antes de agrupar, la imagen se reduce a unos 10.000 píxeles, así que las fotos grandes se procesan rápido. Los píxeles se muestrean sin mezclar, de modo que ningún color intermedio que no esté en la imagen se cuela en la paleta.
- Valores de color: son los valores de píxel tal como el navegador los dibujó en sRGB; una imagen con otro perfil de color se lee después de que el navegador la convierta a sRGB.
Ejemplos de uso
| Objetivo | Cómo hacerlo |
|---|---|
| Comprobar el color de marca de un logotipo | haz clic en una zona uniforme y copia el HEX |
| Elegir un fondo que combine con una foto | usa el color más grande de la paleta |
| Revisar un solo píxel | muévete con las teclas de flecha y mira la lupa |
Preguntas frecuentes
¿Se sube mi imagen?
No. Tanto dibujar la imagen como leer los valores de sus píxeles ocurre en tu navegador. Ni el archivo ni los colores que eliges se envían a ningún sitio.
El color elegido se ve un poco distinto de lo que veo.
La herramienta lee los valores de píxel que el navegador dibujó para la pantalla en sRGB. Si la imagen lleva un perfil de color como Display P3 o Adobe RGB, el navegador la convierte antes a sRGB, así que los valores pueden diferir de los del documento en un editor como Photoshop. Los ajustes y el brillo del monitor también influyen en cómo se ve. Además, las fotos tienen un poco de ruido, así que los píxeles vecinos varían ligeramente. Para un color exacto, haz clic dentro de una zona uniforme.
¿Puedo elegir con el teclado?
Sí. Haz clic una vez en la imagen o llega a ella con Tab y usa las teclas de flecha para mover el cursor un píxel, o diez con Mayús; el color que queda debajo se elige al instante. Enter o la barra espaciadora vuelven a tomar el color del cursor actual. La lupa muestra los 11 × 11 píxeles de alrededor.
¿Cómo se elige la paleta?
La imagen se reduce a unos 10.000 píxeles y los colores parecidos se agrupan con k-means en 5 a 8 colores. Los puntos de partida salen de una semilla aleatoria fija, así que la misma imagen siempre da la misma paleta. Los píxeles transparentes no se tienen en cuenta.
¿Funciona con imágenes muy grandes?
Si el lado largo supera los 4096 píxeles, la imagen se carga a ese tamaño y los colores se toman de la imagen reducida. Si necesitas precisión de un solo píxel en una imagen enorme, recorta antes la parte que te interesa.
¿Y los píxeles parcialmente transparentes?
HEX, RGB y HSL solo muestran el color, sin alfa. Si eliges un píxel semitransparente, aparece un aviso de que el alfa no se incluye.
