Cómo utilizar un selector de color para encontrar colores desde cualquier píxel
Respuesta rápida
Para elegir un color: abra el Selector de color, cargue una imagen (o use el cuentagotas de la pantalla), haga clic en el píxel cuyo color desea y aparecerán los valores HEX, RGB y HSL. Todo el procesamiento se realiza localmente: su imagen nunca se carga.
Introducción
Un selector de color (también llamado cuentagotas) le permite encontrar el color exacto de un píxel. Esto es esencial para combinar colores de marca, probar colores de imágenes o crear una paleta de colores a partir de una fotografía. Los selectores de color basados en el navegador pueden leer los colores de las imágenes cargadas usando Canvas API, y el cuentagotas integrado del navegador API puede seleccionar colores desde cualquier lugar de la pantalla. Esta guía le muestra cómo utilizar un selector de color en su navegador.
Paso a paso
-
Abra la herramienta Selector de color
Vaya a la página de herramientas Selector de color. La herramienta admite la selección de colores de las imágenes cargadas y, en los navegadores compatibles, desde cualquier lugar de la pantalla mediante el cuentagotas API.
-
Elige tu fuente
Para elegir entre una imagen: cargue o arrastre y suelte una imagen. Para seleccionar desde la pantalla (solo Chrome/Edge): haga clic en el botón 'Seleccionar desde la pantalla' y luego haga clic en cualquier lugar de la pantalla.
-
Haga clic en el píxel para probar
Para seleccionar imágenes, mueva el cursor sobre la imagen y haga clic en el píxel cuyo color desee. La herramienta lee el color del píxel del lienzo usando getImageData(). Una lupa puede ayudarle a seleccionar el píxel exacto.
-
Leer los valores de color.
La herramienta muestra el color seleccionado en los formatos HEX, RGB y HSL, junto con una muestra. Los valores se actualizan instantáneamente a medida que mueve el cursor.
-
Copia el color
Haga clic en Copiar junto a cualquier formato para copiar el valor del color a su portapapeles. Úselo en su CSS, herramienta de diseño o aplicación.
Ejemplos
Elija un color de marca de un logotipo
Aporte: logo.png, haga clic en el píxel de color de la marca
Producción: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Muestra un color de una foto
Aporte: photo.jpg, haga clic en un píxel del cielo
Producción: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Seleccionar desde la pantalla (Chrome/Edge)
Aporte: Haga clic en 'Seleccionar de la pantalla', luego haga clic en cualquier píxel de su pantalla
Producción: HEX valor de ese píxel, por ejemplo, #ff5733
Problemas comunes
- El suavizado combina colores en los bordes: los píxeles en el borde entre dos colores son una mezcla. Muestre desde el centro de un área de color sólido para mayor precisión.
- EyeDropper API no es compatible: el selector de pantalla requiere Chrome 95+ o Edge 95+. Firefox y Safari no lo admiten; utilice el método de carga de imágenes en su lugar.
- La compresión JPEG altera los colores —JPEG la compresión con pérdida cambia ligeramente los colores de los píxeles. Para obtener colores de marca exactos, utilice PNG o la fuente vectorial original.
- Diferencias de perfiles de color: las imágenes con perfiles de color integrados (ICC) pueden mostrarse de manera diferente a lo que sugieren sus valores de píxeles sin procesar.
Consejos
- Utilice la lupa para seleccionar el píxel exacto; con el zoom alto, puede seleccionar un único píxel preciso en lugar de un borde combinado.
- Muestre varios píxeles de un área sólida y promedielos si la compresión ha introducido ruido; esto proporciona un color más representativo.
- Utilice el cuentagotas API (Chrome/Edge) para seleccionar colores desde cualquier aplicación, no solo imágenes en el navegador.
- Utilice nuestro Selector de color para obtener muestras de color instantáneas y privadas: sus imágenes nunca salen de su navegador.