Herramientas Web

Paleta de colores

Sube una imagen para obtener sus colores dominantes o genera una paleta armónica desde cero. Copia cada color en HEX, RGB o HSL y exporta toda la paleta a CSS, Tailwind, JSON o imagen.

Se procesa en tu dispositivo. No se sube nada.

Arrastra una imagenToca para elegir tu archivo

o haz clic para elegir · pega con Ctrl+VJPG, PNG, WEBP, GIF, AVIF · hasta 30 MB

Paso a paso

Cómo se usa

  1. Elige «Desde una imagen» y arrastra una foto, o pega una captura. Si solo quieres probar, usa la imagen de ejemplo.
  2. Ajusta cuántos colores quieres y en qué orden verlos. Arrastra los círculos numerados sobre la imagen para cambiar un color, o toca cualquier punto para agregar otro.
  3. Para crear una paleta desde cero abre «Generar paleta», elige el tipo de armonía y presiona «Generar». Bloquea los colores que quieras conservar y vuelve a generar.
  4. Copia cualquier color en HEX, RGB o HSL, o exporta toda la paleta como CSS, SCSS, Tailwind, JSON, imagen PNG o SVG.
FAQ

Preguntas frecuentes

¿Cómo se eligen los colores de una imagen?

La imagen se reduce, los píxeles parecidos se agrupan según cómo los percibe el ojo (espacio OKLab) y se toma el color representativo de cada grupo. Los colores que casi no aparecen, menos del 1 % de la imagen, se descartan para no incluir bordes suavizados ni ruido.

¿Por qué obtengo menos colores de los que pedí?

Si la imagen tiene pocos colores distintos, como un logo o una ilustración plana, los grupos casi idénticos se fusionan y los que apenas aparecen se ignoran. Es lo esperado: con fotos ricas en tonos verás la cantidad completa.

¿Para qué sirve «Ignorar blancos y negros»?

Descarta los píxeles casi blancos o casi negros, típicos de fondos y sombras, para que la paleta muestre los colores del motivo. Si la imagen es en blanco y negro se usan todos los píxeles.

¿Cómo genero colores que combinen bien?

Cada tipo de armonía usa una regla del círculo cromático: análogos (tonos vecinos), monocromática (un tono con distintas luminosidades), complementaria (tonos opuestos), triádica y tetrádica. Si bloqueas un color y generas de nuevo, los demás se calculan a partir de él.

¿Puedo compartir una paleta con otra persona?

Sí. En «Generar paleta» la dirección de la página incluye los códigos de los colores. Usa «Copiar enlace» y quien lo abra verá la misma paleta. Los colores viajan en la propia dirección: no pasan por ningún servidor.

¿Mi imagen se sube a algún servidor?

No. La imagen se analiza en tu dispositivo y nunca sale de él. Tampoco hay registro, límites ni marcas de agua.

Qué es una paleta de colores

Es el conjunto reducido de colores que da identidad a una marca, una web, una presentación o una ilustración. Una buena paleta tiene pocos colores, con suficiente contraste entre sí y con una relación clara: unos protagonistas, otros de apoyo y un par neutros.

Dos formas de crearla

  • Desde una imagen: ideal si ya tienes una foto, un cuadro o una captura que transmite lo que buscas. La herramienta detecta los colores dominantes y te dice cuánto pesa cada uno en la imagen.
  • Generada: parte de una regla de armonía y de los colores que bloquees. Sirve para explorar ideas rápido sin partir de una referencia.

Cómo usarla en tu proyecto

  • CSS y SCSS: variables listas para pegar en tu hoja de estilos.
  • Tailwind: un bloque para tu archivo de configuración; después usas clases como bg-paleta-1.
  • JSON y JavaScript: para gráficos, temas de aplicaciones o pruebas de diseño.
  • PNG y SVG: una imagen con los colores y sus códigos, para compartir por chat o adjuntar a un documento.

Consejos

Revisa siempre que el texto se lea sobre cada color: en cada tarjeta verás con qué tinta, blanca o negra, se lee mejor y con qué relación de contraste. Si necesitas ajustar un tono con precisión, ábrelo en el selector de color.

Cuántos colores conviene usar

Para una marca o una interfaz bastan entre cuatro y seis colores: uno principal, uno o dos de apoyo, un acento y algún neutro. Una regla práctica es repartir el color en proporciones de 60 % para el dominante, 30 % para el secundario y 10 % para el acento. Si la herramienta te devuelve más colores de los que necesitas, baja la cantidad o activa «Ignorar blancos y negros» para quedarte solo con los tonos con carácter.

Cómo leer los resultados

  • Orden: por defecto, del color que más pesa en la imagen al que menos. También puedes ordenar por claridad o por tono.
  • Marcadores: los círculos numerados sobre la imagen muestran de dónde salió cada color; arrástralos para tomar otro punto.
  • Enlace para compartir: en el modo generado, la dirección de la página incluye los colores, así que puedes enviarle tu paleta a un colega.

Privacidad

La imagen se analiza en tu navegador y no se sube a ningún servidor.

Actualizada el 29 de septiembre de 2026