Selector de colores de imagen gratis
Elige cualquier píxel de una imagen con una lupa, copia los valores HEX, RGB o HSL y extrae una paleta de colores dominante en tu navegador.
Cargando herramienta…
Cómo elegir colores exactos y una paleta de una imagen
Cargar o pegar una imagen, pasar a píxeles de vista previa en una lupa ampliada y haz clic para elegir un color. Copia como HEX, RGB o HSL y tire de una paleta de los colores dominantes de la imagen.
- Elige, suelta o pega una imagen PNG, JPEG, WebP, AVIF, GIF o BMP, o sube el ejemplo.
- Mueve el puntero sobre la imagen para previsualizar los píxeles de la lupa. Con el teclado, enfocar la imagen y utilizar las teclas de flecha.
- Haz clic, toca suavemente o pulsa Intro para elegir el píxel. Sus valores HEX, RGB y HSL aparecen con botones de copia y se unen a sus elecciones recientes.
- Elige cuántos colores dominantes extraer y haz clic en cualquier swatch para copiarlo, o copiar toda la paleta como variables HEX o CSS.
- Cuando tu navegador lo soporta, usa el gotero de pantalla para elegir un color de cualquier parte de la pantalla.
Cuándo elegir colores de una imagen
Los diseñadores, desarrolladores y marketers a menudo necesitan un color que pueden ver, pero no tienen como código. Un cliente envía un logotipo como una captura de pantalla, una foto de tablero de estado de ánimo tiene el té exacto que una marca quiere, o una toma de producto necesita un fondo que coincida. La elección del píxel le da un valor HEX exacto que puede pegar en una herramienta de diseño, una hoja de estilos o una plantilla de diapositivas.
La función de paleta responde a una pregunta más amplia: ¿qué colores componen esta imagen? Es útil para construir un tema alrededor de una foto de héroe, comprobar si una ilustración se mantiene dentro de los colores de la marca, o crear una historia de color rápida para una presentación.
Todo sucede en tu navegador, para que puedas usar obras de arte o fotos privadas sin publicarlas.
Ejemplo trabajado: desde pixel hasta HEX, RGB y HSL
Suponga que hace clic en un píxel en un botón azul y la imagen lo almacena como rojo 52, verde 152 y azul 219. En hexadecimal, 52 es 34, 152 es 98 y 219 es DB, por lo que el código HEX es #3498DB y el valor RGB es rgb(52, 152, 219).
Para HSL, los canales se convierten en fracciones de 255: aproximadamente 0,204, 0,596 y 0,859. La luminosidad es el promedio de la más grande y más pequeña, (0,859 + 0,204) dividida por 2, que es de aproximadamente 0,53 o el 53%. La dispersión entre ellos es 0,655, y la saturación es que la dispersión dividido por 1 menos el valor absoluto de (2 veces la ligereza menos 1), dando alrededor de 70%. El azul es el canal más grande, por lo que el tono es 60 veces ((rojo menos verde) dividido por el spread, más 4), que viene a 204 grados. El resultado es hsl(204, 70%, 53%).
Ahora imagine un logotipo plano donde el 70% de los píxeles opacos son de color rojo puro, 20% azul puro y 10% verde puro. Con seis colores solicitados, la paleta muestra tres muestras, #FF0000 al 70%, #0000FF al 20% y #00FF00 al 10%, porque la imagen no tiene otros colores distintos.
Cómo funcionan el selector y la paleta
Cuando abre una imagen, el navegador la decodifica en una cuadrícula de valores rojo, verde, azul y alfa. El recolector mapea su posición de puntero al pixel correspondiente y lee sus valores, y la lupa dibuja un barrio de 11 por 11 pixels a gran tamaño para que pueda aterrizar en el píxel exacto que desee.
La paleta utiliza la agrupación k-means. Se necesita una muestra uniforme de hasta 20.000 píxeles, omite principalmente los transparentes, elige los colores iniciales bien extendidos y luego asigna repetidamente cada píxel a su color más cercano y mueve cada color al promedio de su grupo. Después de unas cuantas rondas los grupos se establecen, y la herramienta informa de cada color medio con su parte de la muestra.
Errores comunes cuando se toman muestras de colores
Elegir un borde es el error más común. Texto y formas antialiasadas mezclan el primer plano y el fondo, por lo que un píxel en el borde puede ser una mezcla de ambos. Ampliar con la lupa y elegir un píxel bien dentro de la forma.
Otro error es confiar en una captura de pantalla fuertemente comprimida. JPEG y aplicaciones de mensajería pueden cambiar los colores por varios valores, así que pida un PNG original o las directrices de la marca cuando la coincidencia exacta importa.
Finalmente, recuerda que una paleta describe el área, no la importancia. Un color de acento pequeño pero vívido puede cubrir sólo el 2% de la imagen y quedar fuera de una paleta corta, por lo que aumentar el número de colores o elegir directamente.
Consejos útiles y limitaciones
- Elige desde el centro de un área plana en lugar de un borde, donde los píxeles mezclan dos colores juntos.
- Las fotos tienen ruido, por lo que los píxeles vecinos difieren ligeramente; usa la paleta para un color medio de marca.
- Copia la paleta como variables CSS para iniciar una hoja de estilos con los colores de la imagen ya definidos.
- Verifica los textos y las selecciones de fondo juntos en un verificador de contraste antes de usarlos en un sitio web.
Preguntas frecuentes
¿El Color Picker de Image carga mi imagen?
No. La imagen se decodifica y se lee en tu navegador, y la paleta se calcula en tu dispositivo. Nada se envía a un servidor.
¿Por qué el Color Picker de Image da un HEX diferente a mi archivo de diseño?
Las imágenes exportadas pueden ser comprimidas o convertidas a otro perfil de color, que cambia ligeramente los valores de píxeles. La compresión JPEG en particular cambia los colores cerca de los bordes y en los gradientes.
¿Cómo el Color Picker de Imagen elige los colores dominantes?
Muestra hasta 20.000 píxeles, ignora sobre todo los transparentes y agrupa colores similares con clustering k-medias. Los relojes se clasifican por la cantidad de la imagen que cubre cada grupo.
¿Puede el Color Picker de Image leer los colores fuera de la ventana del navegador?
Sólo a través del gotero de pantalla, que aparece en los navegadores que soportan la función EyeDropper, como Chrome y Edge recientes en el escritorio.
¿El Color Picker de Image maneja archivos PNG transparentes?
Sí. El recolector informa de los valores RGB almacenados de cualquier píxel, y la paleta omite píxeles que son en su mayoría transparentes.
¿Cuál es la imagen más grande que el Color Picker de Image acepta?
Archivos de hasta 30 MB y 8.000 píxeles por lado, con no más de 12 millones de píxeles en total.
Su entrada se procesa en tu navegador sin una cuenta ToolWorld Online. Copia o descarga cualquier cosa que quieras guardar antes de salir de la página.
Lee nuestra política de privacidad · Acerca de ToolWorld Online