¿Qué hace el Selector de color de imagen?
El Selector de color de imagen te dice el color exacto de cualquier punto de una imagen y extrae la paleta de sus colores dominantes. Los diseñadores lo usan para igualar el color de marca de un logotipo, los desarrolladores para copiar colores de una captura a CSS, y cualquiera puede usarlo para encontrar el tono de pintura de una habitación o los colores que dan a una foto su ambiente.
Elegir colores
Mueve el puntero sobre la imagen y el panel muestra el color que hay debajo en HEX
(#1E40AF), RGB y HSL, junto con las coordenadas del píxel en la imagen
original. Haz clic para guardar un color: los doce últimos se listan con un botón de copiar cada uno, así puedes reunir
varios colores antes de pegarlos en tu herramienta de diseño o tu código. En pantallas táctiles, toca la imagen para
elegir.
La paleta dominante
En cuanto se abre la imagen, la herramienta calcula sus colores principales con el algoritmo de corte por la
mediana: divide una y otra vez los colores de la imagen por el canal con mayor rango hasta tener el número de
grupos que pediste, y después promedia cada grupo. Cada muestra indica qué parte de la imagen ocupa, ordenadas de más a
menos frecuente. Elige entre 4 y 12 colores y copia la paleta como propiedades personalizadas de CSS listas para usar
(--color-1, --color-2…). Los píxeles totalmente transparentes se ignoran, así que los
logotipos con fondo transparente dan resultados limpios.
Formatos de color en breve
- HEX es la forma compacta que se usa en CSS, herramientas de diseño y manuales de marca.
- RGB indica los valores de rojo, verde y azul de 0 a 255.
- HSL describe tono, saturación y luminosidad, lo que facilita crear variantes más claras u oscuras.
Privado por diseño
La imagen se lee en tu navegador y nunca se sube, así que puedes analizar con tranquilidad diseños sin publicar y material de clientes.
Cómo sacar un color de una imagen
- Suelta una imagen (fotos, capturas, logotipos y archivos SVG funcionan).
- Pasa el cursor para inspeccionar y haz clic para guardar los colores que necesites.
- Copia códigos sueltos o toda la paleta como CSS.
Preguntas frecuentes
¿Por qué un color difiere un poco del diseño original?
La compresión JPG y los perfiles de color pueden desplazar los colores unas pocas unidades. Usa el PNG o SVG original cuando importen los colores exactos de marca.