Cómo usar el extractor de colores de imágenes
- Suelta una imagen en el cuadro de línea discontinua, elige un archivo con el botón de archivo o pega una imagen copiada con Ctrl+V. En un móvil, elige una foto con el botón de archivo.
- Elige entre 3 y 8 en «Número de colores» y los colores principales aparecen como una barra y como tarjetas en orden de uso. El ancho de la barra es la proporción de ese color en la foto.
- Haz clic en el valor HEX, RGB o HSL de una tarjeta para copiarlo. Debajo de cada tarjeta ves la relación de contraste del texto blanco y del texto negro sobre ese color, así que sabes al instante qué color de texto se lee mejor.
- Si quieres el color exacto de un punto, haz clic en la foto. Un círculo marca el punto y ese color aparece como una tarjeta aparte.
- Usa «Copiar la lista HEX» y «Copiar variables CSS» para pegarlos directamente en un diseño o en código, y «Guardar la imagen de la paleta» para guardar una tarjeta PNG con la miniatura de la foto y las barras de color.
Cómo se eligen los colores principales
Calcular una foto grande tal cual sería lento, así que la imagen se reduce a 220 píxeles como máximo y se reúnen los colores de los píxeles no transparentes. Los colores parecidos se agrupan en pequeñas celdas del espacio de color, la búsqueda empieza por el color más común y se van añadiendo uno a uno los colores alejados de los ya elegidos hasta que los puntos de partida alcanzan el número que quieres.
Después, un método llamado k-means asigna cada color al color principal más cercano y mueve cada color principal al promedio de su grupo, repitiéndolo 12 veces. No hay aleatoriedad, así que la misma imagen siempre da el mismo resultado, y también se calcula la proporción que ocupa cada color principal en la foto. Todo el cálculo ocurre dentro de tu navegador.
Entender los códigos de color y el contraste del texto
HEX escribe los valores de rojo, verde y azul como dos dígitos hexadecimales cada uno, como #RRGGBB, y es la forma más común en el diseño web. RGB escribe los mismos valores como números decimales de 0 a 255, y HSL escribe el tono (de 0 a 360 grados), la saturación (%) y la luminosidad (%), lo cual resulta práctico cuando quieres hacer el mismo color más claro o más apagado. Esta herramienta muestra los tres y te deja copiar cualquiera.
El contraste entre el texto y el fondo se calcula a partir de la luminancia relativa de los dos colores y va de 1:1 (el mismo color) a 21:1 (blanco y negro). Las Pautas de Accesibilidad para el Contenido Web (WCAG) recomiendan al menos 4,5:1 para el texto normal (AA), al menos 3:1 para el texto grande, y el nivel AAA, más estricto, pide 7:1 para el texto normal. Ayuda a comprobar que el texto sigue siendo legible cuando se usa un color de una foto como fondo de un botón o de un título.
Al construir una paleta a partir de una foto, resulta natural usar el color más ancho como fondo, los colores de proporción media como colores de apoyo y el color llamativo de poca proporción como acento. Si los colores salen demasiado parecidos, prueba con más colores; si hay demasiados, prueba con menos.
Los usos típicos incluyen ajustar la portada de una presentación o de un blog a los colores de una foto, ordenar combinaciones de color a partir de fotos de interiores o de ropa, anotar el ambiente de color de una pintura o de un paisaje y elegir los colores de los botones y los títulos de un sitio web a partir de una sola foto. Puedes pegar la lista HEX extraída en una herramienta de diseño o copiarla como variables CSS para código, así que una sola foto basta para empezar rápidamente un esquema de color.
Consejos para obtener buenos resultados
- Una foto con un fondo liso es sobre todo color de fondo. Si necesitas el color del sujeto, aumenta el número de colores o haz clic en la foto para elegirlo directamente.
- Las fotos muy comprimidas u oscuras pueden dar colores apagados. Usa un original claro y nítido cuando puedas.
- Los colores de un logotipo o de una imagen de marca pueden estar sujetos a las normas de esa marca, así que compruébalo antes de usarlos comercialmente.
- Tras elegir los colores, vuelve a comprobar las parejas de texto y fondo en el Comprobador de contraste de color para estar seguro.
- Esta herramienta nunca envía tu imagen a un servidor, pero ten cuidado al compartir la pantalla si la imagen muestra caras o datos personales.
Preguntas frecuentes
¿Cómo se eligen los colores principales?
La imagen se reduce a 220 píxeles como máximo, se reúnen los colores de los píxeles no transparentes y se agrupan por semejanza, y el color más común y los colores alejados entre sí se usan como puntos de partida que k-means refina en 12 rondas. No hay aleatoriedad, así que la misma imagen siempre da el mismo resultado.
¿Qué significa «AA correcto»?
Las Pautas de Accesibilidad para el Contenido Web (WCAG) consideran que una relación de contraste de al menos 4,5:1 entre el texto y el fondo cumple el nivel AA para el texto de tamaño normal. Para cada color como fondo, esta herramienta calcula la relación para el texto blanco y para el texto negro y muestra cuál se lee con más facilidad. El texto grande (18 pt o más, o negrita de 14 pt o más) solo necesita 3:1.
El color extraído se ve ligeramente distinto de la foto.
Un color principal es un promedio de colores parecidos, así que puede no coincidir exactamente con un solo punto de la foto. Si necesitas el color exacto de un punto, haz clic en la foto para elegirlo. La compresión de la imagen, la luz y las sombras también afectan a los colores.
¿Mi imagen se sube a un servidor?
No. La imagen se lee y se calcula solo dentro de este navegador y nunca se envía a un servidor ni se guarda. Se admiten imágenes JPG, PNG, WebP, GIF, SVG y similares de hasta 25 MB.
¿Puedo obtener colores de impresión (CMYK)?
Esta herramienta muestra solo valores sRGB de pantalla (HEX, RGB, HSL). Los colores de impresión dependen del papel, de la tinta y de la impresora, así que consulta la guía de color de tu impresora o la conversión de color de tu programa de diseño.
Notas y limitaciones
Esta herramienta muestra valores sRGB de pantalla como referencia, y los colores reales pueden verse distintos según la compresión de la foto, la luz y los ajustes del monitor. No se admiten los colores de impresión. Tu imagen nunca se envía a un servidor ni se guarda. BTSPACE WAGLE es un sitio de información no oficial.