Añade la entrada
Una imagen compatible con el navegador y un punto de su vista previa.
Mesa de diseño
Selector de color de imagen
Extrae un color exacto de una referencia sin subir la imagen.
Privacidad integradaTu trabajo permanece contigo
Elige una imagen JPG, PNG, WebP, GIF u otro formato compatible con el navegador y selecciona un píxel.
HEX
#0EA5E9RGB
rgb(14, 165, 233)HSL
hsl(199, 88.7%, 48.4%)Tu trabajo permanece privado en el navegador mientras usas esta herramienta.
¿Qué hace selector de color de imagen?
Carga una imagen compatible en un canvas y toma el píxel mostrado que selecciones. El color aparece en HEX, RGB y HSL para copiarlo.
- Entrada
- Una imagen compatible con el navegador y un punto de su vista previa.
- Resultado
- El color seleccionado en HEX, RGB y HSL.
- Precio
- Gratis
- Cuenta
- No necesaria
Cómo usar selector de color de imagen
Elige los ajustes
Extrae un color exacto de una referencia sin subir la imagen.
Guarda o copia
El color seleccionado en HEX, RGB y HSL.
Consejo práctico
Prueba varios píxeles cercanos cuando la compresión haga que una sola muestra sea engañosa.
Cuándo usar selector de color de imagen
Igualar un acento CSS con un píxel de un logotipo o diseño.
Examinar el valor RGB mostrado de un fondo, icono o captura.
Tomar un color de referencia antes de comprobar su contraste.
Ejemplo
Un ejemplo concreto de selector de color de imagen
- Entrada
- Un PNG con una zona sólida #14B8A6; selecciona un píxel de esa zona
- Resultado
- El resultado es #14B8A6, rgb(20, 184, 166) y hsl(173, 80.4%, 40.0%). Un píxel semitransparente también conserva el alfa en HEX.
Qué puedes esperar
Cómo funciona
El archivo se lee como URL de datos, el navegador lo decodifica, se escala hasta caber en un canvas de 760 × 440 y se dibuja con Canvas 2D. Las coordenadas del puntero se transforman al canvas y getImageData() lee el píxel RGBA. El teclado selecciona el centro.
Antes de usarla
Límites y casos especiales
- Las imágenes mayores que la vista previa se remuestrean, por lo que un píxel mostrado puede mezclar varios píxeles de origen.
- Se rechazan archivos de más de 20 MB y formatos que el navegador no pueda decodificar; tampoco se promedia una región ni se muestra el perfil de color incrustado.
Normas y fuentes
Preguntas frecuentes
Preguntas sobre Selector de color de imagen
¿selector de color de imagen es gratis?
Sí. Selector de color de imagen se puede usar gratis.
¿selector de color de imagen mantiene privado mi trabajo?
Sí. Tu trabajo permanece privado mientras usas la herramienta; no se sube lo que introduces.
¿Por qué puede diferir el color respecto a un editor de imágenes?
El navegador puede gestionar el color y redimensionar la imagen antes de que Canvas exponga sus píxeles mostrados. Una vista previa reducida puede mezclar píxeles vecinos.
¿Qué selecciona la activación con teclado?
Selecciona el píxel central del canvas renderizado cuando no existen coordenadas del puntero.