Paleta de colores desde un logo
Sube tu logo o cualquier imagen y te damos sus colores principales con el código HEX, RGB y HSL, cuánto ocupa cada uno y qué color de texto se lee bien encima.
La imagen se analiza en tu navegador. No se sube a ningún servidor.Imagen y opciones
Los píxeles transparentes nunca se cuentan.
Paleta
Sube una imagen para sacar sus colores.
Cómo sacamos los colores
Reducimos la imagen y agrupamos sus píxeles con el método k-means: busca los grupos de colores parecidos y calcula el color promedio de cada grupo. Trabajamos en el espacio de color Lab, que se parece a cómo ve el ojo humano, así dos tonos que a la vista son iguales quedan juntos.
El sombreado de los bordes de un logo genera muchos tonos intermedios. Por eso unimos los colores muy parecidos y descartamos los que ocupan menos del 1% de la imagen.
El texto sugerido sobre cada color usa la fórmula de contraste de las pautas WCAG: 4,5 a 1 es lo mínimo para texto normal (nivel AA) y 7 a 1 el nivel más exigente (AAA).
Preguntas frecuentes
¿Los colores son exactos a los del manual de marca?
Son muy cercanos, pero una imagen comprimida (JPG) altera un poco los tonos. Si tienes el manual de marca, usa esos códigos; esta herramienta sirve cuando no lo tienes.
¿Sirve con una foto y no un logo?
Sí. En una foto conviene subir la cantidad de colores a 8 y desactivar "Ignorar el color de fondo".
¿Cómo uso las variables CSS?
Pega el bloque :root en tu hoja de estilos y usa var(--color-1) donde necesites el color. Cambia los nombres por algo como --marca o --acento.
¿Por qué un color sale "solo para títulos grandes"?
Porque ni el blanco ni el negro llegan a 4,5:1 de contraste sobre él. Sirve para fondos de botones con texto grande o para detalles, no para párrafos.