Cuando un diseño usa un color que quieres reutilizar, calcularlo a ojo es lento e inconsistente. Un selector de color desde una imagen lee el píxel elegido y devuelve sus valores HEX, RGB y HSL. Abre el selector de color de imagen, carga una foto o captura, haz clic en el color y copia el valor que necesitas.
La herramienta lee la imagen en el navegador, admite archivos JPG, PNG y WebP y permite ampliar el lienzo cuando cuesta apuntar a un píxel preciso. Puedes hacer clic o usar el teclado; solo hay una muestra activa a la vez.
Qué hace un selector de color desde una imagen
La herramienta toma un píxel seleccionado y lo convierte a formatos habituales:
- HEX es práctico para CSS, diseño web y tokens de diseño.
- RGB sirve cuando el flujo necesita canales rojo, verde y azul.
- HSL facilita trabajar con tono, saturación y luminosidad.
Haz clic en otro punto para reemplazar la muestra activa y copia el nuevo valor. Esto sirve para igualar un fondo, revisar una foto de producto o convertir el color de una captura en un valor reutilizable.
Cómo elegir un color de una imagen en línea
1. Elige una imagen de origen clara
Usa la foto original o una captura de alta resolución cuando sea posible. Una miniatura comprimida, una vista borrosa o un filtro de color pueden cambiar el tono exacto que quieres repetir.
2. Abre el selector de color en línea
Abre el selector de color desde una imagen y selecciona un archivo JPG, PNG o WebP. La imagen se procesa en el navegador y no necesita subirse a un servidor para tomar la muestra.
3. Haz clic en el píxel objetivo
Haz clic en la parte de la imagen cuyo color quieres identificar. En un fondo plano, aléjate de bordes y sombras. En un producto o ilustración, elige una zona representativa en lugar de un brillo, reflejo o borde suavizado. Amplía la imagen cuando sea necesario.
4. Copia el código de color
Copia HEX cuando necesites un color CSS, o usa RGB y HSL si el siguiente editor o sistema de diseño los requiere. Pega el valor en código, un archivo de diseño, notas de marca o una variable y revísalo en su destino real.
Cómo obtener una muestra de color más fiable
La luz, las sombras, los reflejos, la compresión y la pantalla afectan al color visible. Un píxel devuelve el valor de ese punto; no recupera automáticamente el color de marca original si la fotografía o la gradación lo cambiaron.
En un gráfico plano, elige un área central con relleno uniforme. En una foto, toma varias muestras del mismo material y compáralas. Evita bordes, texto suavizado y superficies brillantes donde un reflejo sea mucho más claro.
Si la imagen es demasiado grande, usa el redimensionador de imágenes para crear una copia de trabajo y conserva el original. Si hay bordes molestos, usa primero el recortador de imágenes.
HEX, RGB o HSL: qué valor debes usar
Usa HEX para estilos web
HEX es compacto y común en CSS, tokens de diseño y documentación. Un valor como #2F80ED se puede pegar directamente en una hoja de estilos.
Usa RGB para canales y transparencia
RGB expone los valores rojo, verde y azul por separado. Es útil para comparar canales o ampliar el valor a rgba() con una transparencia independiente.
Usa HSL para variaciones controladas
HSL separa tono, saturación y luminosidad, lo que facilita crear fondos más claros, bordes apagados o estados hover más oscuros sin perder el tono base.
Errores comunes al elegir colores
Tomar una sombra en vez del color base
Una sombra puede volver gris una superficie neutra o oscurecer mucho un color. Elige un área representativa e iluminada y compara píxeles cercanos.
Elegir un píxel del borde
Los bordes pueden contener píxeles mezclados por suavizado o compresión. Mueve el punto al centro del objeto o del fondo.
Usar una captura con filtro de pantalla
El modo nocturno, HDR, los perfiles de color y las extensiones pueden cambiar la apariencia. Cuando importe el color, usa el archivo original o una captura sin modificar.
Tratar una muestra como una paleta completa
El selector identifica el color elegido y conserva una muestra activa, pero no infiere toda la paleta. Toma los colores clave uno por uno y anota su función.
Olvidar el contexto de salida
Un color puede verse diferente junto a otro fondo o en otra pantalla. Prueba el valor copiado en la página, componente, anuncio o archivo de diseño real y revisa contraste y legibilidad.
Flujo sencillo para entregar un diseño
- Conserva la foto o captura original como referencia.
- Toma por separado los colores de fondo, sujeto, texto y acento.
- Registra cada HEX con una función clara.
- Usa RGB o HSL cuando la implementación o variación lo necesite.
- Comprueba contraste, estados hover y tamaño final de visualización.
Usa el compresor de imágenes después de tomar las muestras. Convierte la copia final a PNG a WebP si el destino lo admite, pero conserva el origen para futuras comprobaciones.
Preguntas frecuentes
¿Cómo elijo un color de una imagen?
Abre el selector de color de imagen, selecciona JPG, PNG o WebP, haz clic en el píxel y copia su valor HEX, RGB o HSL.
¿Cómo encuentro un código HEX a partir de una imagen?
Carga la imagen en el selector HEX desde una imagen, haz clic en un píxel representativo y copia el HEX mostrado.
¿Puedo elegir un color de una captura de pantalla?
Sí. Una captura se puede muestrear como cualquier imagen compatible. Para acercarte al original, usa una captura sin comprimir y evita bordes, sombras y filtros de pantalla.
¿Puedo elegir varios colores?
Sí, aunque solo hay una muestra activa a la vez. Haz clic en cada píxel objetivo y copia o registra el valor antes de seleccionar el siguiente.
¿El selector de color es privado?
La toma de muestras se ejecuta en el navegador después de cargar la página. La imagen no necesita subirse a un servidor para leer el píxel.
Continúa con las herramientas de imagen
Usa el selector de color de imagen para obtener valores de una foto o captura. El recortador de imágenes elimina bordes, el redimensionador prepara una copia de trabajo y el compresor de imágenes prepara el archivo final.