Paleta de colores de una imagen
Sube una foto, ilustración o captura de pantalla y obtén al instante sus colores dominantes. Elige cuántos colores quieres, compara dos métodos de extracción y copia los códigos HEX, las variables CSS o los colores de Tailwind, o descarga la paleta como imagen.
Última actualización:
Cómo usar Paleta de colores de una imagen
- Añade una imagen: suéltala en el recuadro, pégala con Ctrl+V o pulsa Elegir imagen. Se carga una foto de ejemplo para que puedas probar la herramienta enseguida.
- Elige el número de colores (de 3 a 12) con el control deslizante. La paleta se actualiza al instante.
- Elige un método: K-means encuentra los colores que mejor representan toda la imagen; Median cut es más rápido y conserva más colores de acento pequeños.
- Copia los colores: haz clic en una muestra para copiar su código HEX, o elige un formato de código y pulsa Copiar código.
- Descarga la paleta como imagen PNG para compartirla o guardarla como mood board.
K-means vs. median cut
| K-means (Lab) | Median cut (RGB) | |
|---|---|---|
| Cómo funciona | Parte de colores semilla bien repartidos (k-means++) y luego asigna repetidamente cada píxel al color más cercano y mueve cada color al promedio de sus píxeles hasta que nada cambia. | Coloca todos los colores en una caja y luego sigue cortando por la mitad la caja con más píxeles (después: más píxeles × mayor dispersión) en la mediana de su canal más amplio. |
| Distancia de color | CIELAB, diseñado para que distancias iguales se vean aproximadamente igual de distintas a la vista | Rangos de los canales RGB |
| Punto fuerte | Colores que mejor representan la imagen en conjunto; paletas estables y equilibradas | Conserva colores de acento pequeños pero distintos, como una flor roja en un campo verde |
| Ideal para | Fotos, paletas de marca a partir de fotos de producto, mood boards | Ilustraciones, carteles, logotipos e imágenes con unos pocos acentos fuertes |
Ambos métodos analizan una copia reducida de hasta unos 40,000 píxeles, más que suficiente para captar la distribución de colores y obtener resultados al instante. Los resultados son deterministas: la misma imagen con los mismos ajustes siempre da la misma paleta.
Cómo convertir la paleta de una imagen en un esquema de colores útil
- Elige un color dominante y un neutro. El color con mayor proporción suele ser un fondo o el cielo. Combínalo con el neutro más oscuro o más claro para el texto.
- Comprueba el contraste antes de usar colores para texto. WCAG exige una relación de contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande.
- Usa los acentos con moderación. Una regla práctica habitual es 60% de color dominante, 30% de color secundario y 10% de acento.
- ¿Necesitas más tonos? Pega un código HEX en un generador de tonos o de colores de Tailwind para crear una escala completa de 50 a 900 a partir de un color extraído.
Preguntas frecuentes
¿Cómo encuentra la herramienta los colores principales de una imagen?
Lee los píxeles de una copia reducida de tu imagen y agrupa los colores parecidos. Con k-means, los colores se agrupan en el espacio de color CIELAB, que se ajusta mejor a la percepción humana del color que RGB, y el promedio de cada grupo se convierte en un color de la paleta. Median cut divide repetidamente el conjunto de colores por su canal más amplio hasta tener tantas cajas como colores has pedido.
¿Se sube mi imagen?
No. La imagen se abre y se analiza por completo en tu navegador con la Canvas API. No se envía nada a ningún servidor, así que es seguro para fotos privadas y diseños no publicados.
¿Por qué los colores son algo distintos de un píxel concreto que elijo?
Cada color de la paleta es el promedio de todo un grupo de píxeles parecidos, así que representa una zona de la imagen y no un píxel exacto. Para leer el color exacto de un punto, usa un selector de color de imagen.
¿Qué significan los porcentajes?
Muestran qué proporción de los píxeles de la imagen pertenece a cada grupo de color. El color de fondo suele tener la mayor proporción, mientras que los colores de acento pequeños pueden tener solo de un 1 a un 3%.
¿Cuántos colores debería extraer?
Para la paleta de un sitio web o de una marca, 5 o 6 colores son un buen comienzo: uno o dos colores dominantes, un neutro y algunos acentos. Usa de 8 a 12 colores para captar más detalle de ilustraciones muy coloridas.
¿Se cuentan los píxeles transparentes?
No. Los píxeles mayoritariamente transparentes (alfa por debajo del 50%) se ignoran, así que los logotipos e iconos con fondo transparente dan una paleta solo con sus colores visibles.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.