Selector de color y extractor de paletas: elige colores de una imagen

Sube cualquier JPG, PNG, WebP o GIF y haz clic en cualquier punto de la imagen mostrada: se muestrea el píxel exacto bajo tu cursor y se muestra en HEX, RGB y HSL con copia en un clic para cada formato. Perfecto para igualar un color de marca, muestrear un tono de una fotografía o capturar colores de acento de un boceto de diseño.

La imagen se reduce a 320 píxeles en su lado más largo y luego cada píxel se agrupa según sus 4 bits superiores por canal. Los grupos más poblados se promedian de nuevo a color completo de 8 bits, se ordenan por frecuencia y se devuelven como tu paleta. El resultado suele ser de 5 a 24 colores dominantes que resumen visualmente la imagen.

Sí. Los botones de descarga producen dos formatos: un bloque de variables CSS listo para pegar en un selector :root (--color-1, --color-2…) y un archivo JSON con el valor hexadecimal, los componentes RGB y el porcentaje de peso de cada color. Ambos formatos se integran limpiamente en tokens de diseño, configuraciones de Tailwind y bibliotecas de paletas.

No: la selección de color y la extracción de paletas se realizan íntegramente en tu navegador mediante la API canvas de HTML. La imagen permanece en tu dispositivo, lo que hace que la herramienta sea segura para fotos de productos sin lanzar, maquetas en borrador y recursos de marca sujetos a acuerdos de confidencialidad.

Para trabajos de identidad de marca, de 5 a 8 colores es el punto ideal: captura el tema dominante sin diluir las opciones de acento. Para visualización de datos recomendamos de 10 a 16 colores, así tienes suficientes tonos categóricos. El control deslizante te permite elegir entre 5 y 24.

Los píxeles con un alfa inferior a 128 se ignoran, de modo que los fondos transparentes no contaminan la paleta con colores de «fondo». Esto hace que el Selector de Color de Imagen sea especialmente útil para recortes de productos, ilustraciones de stickers y sujetos aislados.

HEX (#RRGGBB) es el más compacto y es el que usan CSS, Figma y Sketch de forma predeterminada. RGB muestra los tres valores de componente del 0 al 255, útil al trabajar con datos de imagen de forma programática. HSL (tono, saturación, luminosidad) es intuitivo para ajustar colores: desplaza el tono para cambiar de familia de color y ajusta la luminosidad para los tintes y las sombras.

Sí. Gratis, sin necesidad de cuenta y sin límites en el tamaño de la imagen ni en el número de paletas extraídas. No hay nada que instalar: toda la herramienta es una única página web.