Extraer colores de imagen — paleta y clic
Haz clic en la imagen para promediar una región pequeña alrededor del punto (unos 7×7 píxeles de origen).
Obtén colores dominantes y una paleta completa de cualquier foto — o usa el selector de color con clic en una región. Pasos: elige imagen, define cuántos colores (2–12), extrae, copia HEX/RGB/HSL, o haz clic en la vista previa para un promedio local. Ejemplo: seis tonos de una foto de marca y luego un clic en el logo para un acento — el archivo no sale del dispositivo.
Cómo funciona
Elige una foto y extrae una paleta: la página reduce una copia de trabajo (lado largo ~256 px), omite píxeles casi transparentes, agrupa colores y ordena por frecuencia. Por separado, haz clic en la vista previa para promediar un cuadrado pequeño alrededor de ese punto en resolución completa y copiar HEX, RGB o HSL — nada se sube.
Qué debes esperar
La extracción de paleta y el clic para tomar color comparten una imagen pero responden preguntas distintas. Usa la lista si un color parece inesperado.
- El muestreo de paleta usa un bitmap reducido (borde máx. ~256 px) para que fotos grandes sigan siendo ágiles. Detalle fino puede fusionarse en tonos cercanos.
- Se ignoran píxeles con alfa menor de 128 tanto en la paleta como en los promedios por clic. Los puntos totalmente transparentes muestran un mensaje claro.
- Pides de 2 a 12 colores de paleta; en imágenes planas puede haber menos. Los colores se ordenan por proporción de muestras.
- El clic promedia píxeles opacos en una ventana de unos 7×7 alrededor del clic en coordenadas de origen (no solo la vista previa reducida). Es una muestra de región, no un cuentagotas de un solo píxel de laboratorio.
- Privacidad: decodificación, cálculo de paleta y muestreo por clic corren en local en esta pestaña.
Ejemplo
Carga el ejemplo de cuatro bloques, deja Colores en 6 y extrae — deberías ver turquesa, ámbar, verde, crema y rojo entre las muestras. Luego haz clic en el círculo rojo: la tarjeta de color tomado muestra un HEX rojo del promedio ~7×7 alrededor de ese punto, listo para copiar.
Cuándo encaja
- Fotos de marca: saca una paleta y luego haz clic en un logo o botón para un acento concreto.
- Capturas de UI: repasa la paleta de interfaz y luego haz clic en un chip o icono para el color exacto de esa región.
- Ideas de degradado: toma dos acentos de la paleta o haciendo clic, luego abre la calculadora de gradientes.
Frequently asked questions
¿Mi imagen sale del navegador?
No. El cálculo de paleta y el muestreo por clic corren en local. Revisa la pestaña Red — la imagen no se envía por POST.
¿Cómo se eligen los colores principales?
La página reduce la imagen, descarta píxeles de baja opacidad, divide el espacio de color con median-cut, promedia cada grupo y ordena por cuántas muestras cayó en cada uno.
¿Qué pasa cuando hago clic en la imagen?
La herramienta mapea el clic a píxeles de origen y promedia colores opacos en un cuadrado pequeño (~7×7). Obtienes HEX/RGB/HSL de esa región, aparte de la lista de paleta.
¿Por qué un clic no es un solo píxel?
Fotos y capturas de UI son ruidosas en 1×1. Un promedio de región pequeña es más estable para acentos CSS y sigue reflejando dónde hiciste clic.
¿Los GIF animados se analizan enteros?
Solo se dibuja el primer fotograma, se usa para la paleta y está disponible para tomar color con clic.
Related tools
Consultas o comentarios
¿Algo poco claro, roto o que falte? Redacta un mensaje abajo — leemos cada nota sobre estas herramientas.