CodeKitHub
Por qué añadimos extracción automática de paleta al selector de color

Por qué añadimos extracción automática de paleta al selector de color

Publicado el 5 ago 2026

Nuestro selector de color siempre ha permitido subir una imagen y hacer clic en cualquier píxel para obtener su valor exacto en HEX, RGB y HSL. Eso responde “¿de qué color es este punto exacto?” — útil, pero no es la pregunta que la mayoría de la gente tiene en mente al subir una foto. Normalmente es “¿cuál es la paleta de colores general de esta imagen?” — extraer la paleta de marca de un logo, o igualar el tono de una foto de referencia para el esquema de color de un sitio web.

El muestreo de un solo píxel no puede responder eso. Así que añadimos la extracción de paleta: sube una imagen, y la herramienta extrae automáticamente los ocho colores más dominantes y los muestra como muestras en las que puedes hacer clic.

Cómo funciona

No hay ningún modelo de IA involucrado y no se sube nada a ningún sitio — es un algoritmo directo de conteo de frecuencias que se ejecuta en pocos milisegundos:

  1. La imagen se reduce a un lienzo de 80×80. No se necesita la resolución completa para las estadísticas de color, y reducirla mantiene todo instantáneo incluso con fotos grandes.
  2. Cada píxel se agrupa según una versión simplificada de su color — los 5 bits superiores de cada canal RGB, así los píxeles visualmente casi idénticos caen en el mismo grupo en vez de contarse cada uno como un color único.
  3. Los grupos se ordenan según cuántos píxeles cayeron en ellos, y los ocho más grandes forman la paleta, cada uno mostrado como el color promedio de todo lo que hay en ese grupo.

Eso es todo. Sin machine learning, sin servicios externos — solo reducción de muestreo y conteo, por eso es instantáneo y nunca sale de tu navegador.

Haz clic en una muestra, obtén el código

Cada muestra de la paleta es clicable: haz clic en una y se convierte en el color activo de la herramienta, con HEX, RGB y HSL rellenados automáticamente y el hex copiado a tu portapapeles en el mismo clic. También hay un botón “copiar todo” si quieres la paleta completa como una lista separada por comas, útil para pegarla directamente en una herramienta de diseño o en un bloque de propiedades personalizadas de CSS.

Pruébalo

Sube cualquier imagen — una captura de pantalla, un logo, una foto — en la página del selector de color y la paleta aparece automáticamente debajo.

← Volver al blog