Herramienta online de paleta de color

Una paleta compartida mantiene coherencia visual, agiliza la entrega a desarrollo y evita adivinar códigos hex sin criterio.

Ventajas

• Coherencia: Mismos acentos y neutros en pantallas y materiales.
• Marca: Tome muestras de fotos o moodboards para alinear marketing.
• Rapidez: Compare muestras sin cuentagotas manual en cada elemento.
• Temas: Convierta una referencia en variables para modos claro/oscuro.
• Inspiración: Descubra matices que no siempre elegiría a mano.

La herramienta lee cada píxel de tu imagen, lo clasifica en una rejilla de 262.144 celdas de color y agrupa esas celdas en el número de muestras que hayas pedido. Trabajar con las celdas y no con los píxeles es lo que hace que cambiar un ajuste sea instantáneo incluso en una foto de 48 megapíxeles.

Flujo de trabajo habitual

• Carga el archivo: Empieza con una fuente nítida y bien iluminada para que los colores dominantes sean significativos.
• Lee los píxeles: Se cuenta cada píxel, a resolución completa, y por defecto se excluyen los totalmente transparentes para que el fondo de un logotipo no se convierta en una muestra.
• Agrupa: Los colores parecidos se reúnen según el algoritmo y el ambiente que hayas elegido.
• Mide: Cada grupo informa del color medio exacto de sus propios píxeles y de la proporción de imagen que ocupa.
• Entrega: Copia los hex, exporta a formatos listos para código y comprueba contraste y daltonismo antes de publicar.

La mayoría de los extractores cuantizan antes de informar: redondean cada canal a un intervalo y devuelven el valor del intervalo, así que una imagen de #ff0000 puro sale como #fa0000, un color que no está en ninguna parte de la foto. Para una herramienta cuya salida entera es un código hex que vas a pegar en una hoja de estilos, eso es exactamente el trabajo hecho mal.

• Agrupar es aproximado y rápido; informar es exacto. Son dos pasos deliberadamente separados.
• Cada muestra es la media aritmética de los píxeles reales asignados a ella, acumulada con precisión completa.
• Una imagen de un solo color devuelve exactamente una muestra con exactamente ese color.
• La proporción bajo cada muestra es un recuento real de píxeles, no una estimación: seis franjas iguales informan de 16,7 % cada una.
• La misma imagen con los mismos ajustes produce siempre la misma paleta. Aquí nada usa una semilla aleatoria.

Los tres leen cada píxel y los tres informan de colores exactos. Se diferencian en qué optimizan, y el adecuado depende de qué quieras sacar de la imagen.

• K-means: el predeterminado. Agrupa los colores para que las muestras estén lo más separadas posible perceptualmente, que es lo que quieres de una fotografía.
• Frecuencia: ancla cada muestra en un color que realmente ocupa mucha superficie. La respuesta correcta a «cuál es el color de marca de este logotipo», donde una media entre dos colores reales es justo lo contrario de lo que buscas.
• Median cut: divide por población de píxeles igual, así que un pequeño acento brillante recibe proporcionalmente más espacio que con los otros dos. El cuantizador clásico y el indicado para tramado.

Un ambiente cambia qué colores se eligen, nunca cómo se informa de un color elegido. Pondera los colores de la propia imagen antes de agrupar, de modo que la misma fotografía rinde un conjunto de paletas realmente distintas y todas igual de honestas.

• Neutral: solo cobertura: los colores que ocupan la mayor parte de la imagen.
• Colorful: favorece la saturación a cualquier luminosidad, para la lectura más viva de la imagen.
• Bright: favorece los colores que son a la vez claros y saturados.
• Muted: favorece los medios tonos desaturados, evitando el negro y el blanco, que son los dos colores menos apagados que existen.
• Deep: favorece los tonos joya oscuros y saturados.
• Dark: favorece los tonos de sombra a cualquier saturación.

Una armonía es una rotación de tono que mantiene todo lo demás fijo. Hacerlo en LCH y no en HSL importa más de lo que parece: girar un azul 180 grados en HSL da un amarillo con la misma luminosidad nominal que resulta unas nueve veces más brillante a la vista.

• Seis reglas: complementaria, análoga, triádica, complementaria dividida, tetrádica y monocromática.
• El croma se conserva: una base apagada da armonías apagadas y una base viva las da vivas.
• Los colores fuera de gama se mapean, no se recortan: el croma se reduce hasta que el color cabe, así que el tono que pides es el que obtienes.
• Los colores casi neutros lo dicen: un gris no tiene tono que rotar, y la herramienta muestra su escala en lugar de inventar un complemento.
• Escalas de tintes y sombras: once pasos perceptualmente uniformes por muestra, en el formato 50-950 que espera cualquier framework CSS.

Una paleta que queda bien y no se puede leer no está terminada. Ambas comprobaciones son gratuitas en todos los planes, porque una comprobación de accesibilidad tras un muro de pago es peor que no tener ninguna.

• Contraste WCAG para cada par de la paleta: todos, no una muestra de los primeros.
• Cada color contra negro y blanco, indicando cuál de los dos es mejor, para saber qué color de texto necesita un botón.
• Resultados AA, AA grande y AAA etiquetados por par.
• Protanopía, deuteranopía y tritanopía simuladas sobre toda la paleta.
• Cualquier par que deje de distinguirse se nombra con la diferencia de color medida al lado.

La exportación es el producto: nadie extrae una paleta para mirarla. CSS, JSON y una lista hex simple son gratuitos; los formatos que llevan una paleta a otro software forman parte de Pro.

• CSS y SCSS: propiedades personalizadas y variables, cada una anotada con su nombre de color más cercano y su proporción de la imagen.
• Tailwind: un bloque @theme, listo para pegar en una hoja de estilos de Tailwind v4.
• JSON: cada muestra con sus coordenadas RGB, Lab y LCH, su proporción y su nombre de color CSS más cercano.
• ASE: Adobe Swatch Exchange, para Illustrator, InDesign y Photoshop.
• GPL: el formato de paleta de GIMP, que también leen Inkscape, Krita y Scribus.
• SVG y PNG: una tarjeta de muestras para compartir, cuando la paleta va a un chat y no a un repositorio.

Guía para obtener colores dominantes y exportarlos.

1. Añade una imagen. Arrastra un archivo a la página, pégalo desde el portapapeles (Ctrl+V o ⌘V) o pulsa Examinar. La paleta aparece en cuanto se lee la imagen.
2. Elige los ajustes. Selecciona un algoritmo (frecuencia, K-means o median cut), un ambiente de color y cuántos colores quieres: de tres a ocho en el plan gratuito.
3. Ajusta. Usa el cuentagotas para sustituir cualquier muestra por un color tomado de la imagen, y revisa la rejilla de contraste y el informe de daltonismo antes de decidir.
4. Usa o exporta. Copia los valores hex, descarga CSS, SCSS o JSON y revisa las sugerencias de armonía y contraste antes de fijar un esquema.

Limitar el número de colores y validar accesibilidad reduce retrabajo en producción.

Referencias prácticas

• La mayoría de los sistemas de interfaz se quedan en unos tres a diez colores base para que los estados y los neutros sigan siendo legibles.
• La extracción por frecuencia favorece los colores que cubren grandes áreas de la foto, lo que ayuda en imágenes de cabecera.
• Los métodos de agrupamiento sacan a la luz degradados sutiles que una sola muestra de cuentagotas se perdería.
• Las exportaciones en CSS o JSON encajan directamente en tokens de diseño y bibliotecas de componentes.
• Una foto de 12 megapíxeles se lee por completo en bastante menos de un segundo, y cambiar un ajuste después cuesta una fracción de eso porque los píxeles no se vuelven a leer.

Buenas prácticas

Trate el resultado como base y refínelo con guías de marca y contraste.

• Usa referencias de alta resolución sin artefactos de compresión fuertes para obtener medias más limpias.
• Aumenta el número de colores cuando la escena tenga muchos materiales distintos; redúcelo en diseños minimalistas.
• Guarda las exportaciones y un README breve con los nombres de los tokens para que el equipo sepa cómo importarlos.
• Previsualiza texto e iconos sobre fondos reales, no solo muestras aisladas.
• Usa el cuentagotas cuando la respuesta automática se acerque pero quieras exactamente el píxel que tenías en mente.

Casos de uso

• Web: Landings a partir de fotos de cliente.
• Marca: Documentar colores de campañas o packaging.
• Espacios: Inspiración para pintura y materiales.
• Moda y retail: Tableros estacionales desde stills.
• Arte y formación: Analizar distribución de color en obras.

• Selector de color
• Hex a RGB
• RGB a Hex
• Analizador de imágenes
• Etalonaje de color
• Comprimir imagen
• Todos los conversores