Extrae primero la paleta de ejemplo, luego usa la selección precisa y las ediciones manuales para decidir qué colores pertenecen a tu propio proyecto. Abrir Selector de color de imagen.
Subir y extraer una paleta inicial
Abra el selector de color de imagen y suba una imagen compatible, o pruebe la muestra. La extracción automática sube la fuente al servidor. La muestra en esta guía es collage-botanical.jpg, una foto de 1200 x 900 de flores, hojas y un fondo color melocotón.
Deje los colores a extraer en 6 y seleccione Dominante para el ejemplo. Dominante favorece los colores principales de la imagen, mientras que Vibrante da más influencia a los acentos coloridos. Una solicitud puede usar de 3 a 12 colores; una imagen con menos grupos visibles distintos puede devolver menos.
El resultado Dominante real contiene #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. El grupo más grande es #E3B49F con aproximadamente el 28.88% de los píxeles visibles muestreados. La extracción utilizó una muestra de 512 x 384; esos porcentajes no son un censo exacto de la imagen de resolución completa.
Un color de paleta puede ser un promedio de colores cercanos. Elija un píxel en particular cuando necesite el valor de un pequeño detalle.
Elegir y refinar colores individuales
Haga clic o toque la imagen para inspeccionar un píxel con la lupa. Enfoque la imagen y use las teclas de flecha para mover un píxel, Shift más una flecha para mover diez, luego Enter para elegir. Copie HEX, RGB o HSL con su botón de copia individual, o use Agregar a la paleta.
Selecciona una muestra para cambiar su valor HEX o color, muévela a la izquierda o derecha, o elimínala. Añadir un color personalizado acepta un valor HEX de tu elección. Bloquear color preserva una muestra seleccionada cuando Actualizar paleta o una configuración de extracción modificada genera otra paleta inicial.
Muestreo y transparencia ofrece Color de origen y Componer sobre un fondo. Color de origen incluye la opacidad en los códigos copiados cuando es relevante; Componer muestra el píxel mezclado sobre el fondo de muestra elegido. Las muestras de la paleta son valores RGB opacos. Los colores editados y seleccionados no tienen un porcentaje de origen estimado.
Las imágenes decodificables por el navegador utilizan muestras sRGB del navegador. Si se utiliza una vista previa normalizada, el selector etiqueta explícitamente sus colores y coordenadas como aproximados.
El ejemplo en esta guía
Colores a extraer: 6; Dominante; sin cambios manuales ni bloqueos; Guardar como: PNG. La extracción automática muestreó 512 x 384 píxeles.
- Imagen de origen
- 1200 x 900 px
- Colores extraídos
- 6 colores opacos
- Tarjeta de paleta
- 600 x 500 px
- PNG descargado
- 9,163 bytes
Comprueba un par de texto y fondo
Abre Comprobar contraste de color. Configura Texto y Fondo con los controles de color, introduce códigos HEX o utiliza el color seleccionado para cualquiera de los lados. La muestra de texto en vivo te permite comparar el par, y la relación va acompañada de resultados separados para Normal AA, Normal AAA, Grande AA y Grande AAA.
Elige un par para el propósito previsto en lugar de asumir que cada color extraído puede usarse como texto. Un melocotón claro y un morado claro pueden funcionar juntos en una foto, pero ser una mala combinación de texto y fondo.
Este control solo comprueba ese par de colores para el contraste de texto. No es una auditoría de accesibilidad completa y no decide si la tipografía, la interacción con el teclado o el resto del diseño son utilizables.
Una relación de contraste que cumple es una comprobación útil, no una garantía de que toda una página sea accesible.
Copiar valores o exportar la paleta
Para una entrega rápida, copia un código individual o usa Copiar colores de paleta HEX. Para un archivo, elige Guardar como y selecciona Iniciar. PNG crea una imagen de paleta etiquetada; SVG mantiene las muestras y etiquetas como contenido vectorial; CSS proporciona variables de color numeradas; JSON contiene valores HEX, RGB y HSL.
El ejemplo de seis colores sin editar exporta palette.png a 600 x 500 píxeles y 9,163 bytes. El orden de sus muestras coincide con la paleta. Tu paleta final puede contener de 1 a 12 colores después de editar, incluso cuando el conteo inicial automático era diferente.
Descarga antes de salir o actualizar. La exportación final sube el origen y los colores elegidos para el procesamiento en el servidor. Crea un nuevo archivo de paleta y no vuelve a colorear ni reemplaza la foto original.
PNG y SVG son referencias visuales convenientes. CSS y JSON son útiles cuando el siguiente paso necesita valores de color reutilizables.
Preguntas frecuentes
¿El cuentagotas devuelve los mismos colores que la extracción automática?
No necesariamente. Un valor seleccionado describe un píxel de origen o de vista previa en particular. La extracción automática agrupa los píxeles muestreados y puede devolver colores promediados.
¿Se cuentan los píxeles transparentes?
Los píxeles totalmente transparentes se excluyen de la extracción. Los píxeles parcialmente transparentes tienen un peso reducido. El muestreo de origen puede mostrar opacidad, pero las muestras de la paleta exportada son opacas.
¿Qué sucede con los colores bloqueados cuando actualizo?
Los colores bloqueados permanecen en la paleta mientras los nuevos colores extraídos llenan las otras posiciones. A un color retenido o editado no se le asigna un porcentaje de imagen inventado.
¿Puedo usar esto para un color de marca exacto?
Introduce un valor HEX conocido directamente o selecciona un píxel de origen adecuado. La iluminación de la foto, la compresión, la gestión del color y las vistas previas normalizadas pueden cambiar los valores muestreados, por lo que una paleta de fotos automática no es prueba de una especificación de marca original.
Crea una paleta que puedas llevar a tu próximo diseño
Prueba una muestra o usa tu propio archivo, y revisa el resultado antes de compartirlo.
