Crea una paleta de colores de marca a partir de tus propias fotos de producto
Extrae los colores reales de tus fotos de producto y envase, asigna una función a cada uno y comprueba cada combinación de texto con el contraste WCAG antes de que aparezca en un anuncio, un pie de foto o una tarjeta final.
Muchas marcas pequeñas tienen un archivo del logo y ninguna lista de colores. Los colores están en el propio producto: el frasco, la etiqueta, la caja, la tela. Cuando llega el momento de hacer un anuncio, una miniatura o un estilo de subtítulo, alguien mira un código hex en una foto a ojo y espera acertar.
Puedes hacerlo mejor en unos diez minutos. Extrae los colores de fotos del producto real, asigna una función a cada uno y comprueba qué combinaciones se leen bien como texto. Nuestro extractor de paletas de color gratuito hace la extracción y la comprobación en tu navegador, sin subir nada.
Por qué empezar por el producto y no por un moodboard
La gente reconoce tu producto por cómo se ve en la estantería o en la mano. Un anuncio cuyos colores coinciden con el envase parece, a primera vista, la misma marca, y uno que se aleja parece una imitación. Además, una paleta sacada del producto es fiel a lo que realmente vendes, cosa que un moodboard rara vez consigue.
También sirve para los servicios. Si no tienes un producto físico, usa tus mejores capturas, tu escaparate o fotos de tu equipo, lo que la gente ya asocia contigo.
Paso 1: elige y recorta las fotos
Elige dos o tres fotos limpias: el producto sobre un fondo liso, la cara del envase de frente y una foto de estilo de vida que te guste. Luego recorta bien. El extractor cuenta cada píxel que le das, así que una botella sobre una mesa de madera devolverá la mesa como uno de tus colores de marca. Recorta hasta el producto y la etiqueta, y la paleta será el producto.
Fotografía con luz de día o con luz suave si puedes. Una lámpara cálida vuelve crema el envase blanco, y cada color que extraigas llevará ese tinte.
Paso 2: extrae de cinco a ocho colores
Sube cada foto al extractor y pide 5 o 6 colores para una foto de producto limpia, u 8 para una más cargada. Agrupa los píxeles parecidos y muestra el promedio de cada grupo, de mayor a menor, con la proporción de la imagen que ocupa cada uno. El punto de partida es fijo, así que la misma foto siempre da la misma paleta, y un acento pequeño y brillante, como una tapa roja en una botella blanca, obtiene su propia muestra en lugar de diluirse en la media.
Pasa todas tus fotos y busca los colores que se repiten. Esos son la marca. Un color que aparece en una sola foto suele ser el fondo o la luz.
Paso 3: asigna una función a cada color
Una paleta solo es útil cuando cada color tiene un papel. La mayoría de las marcas necesitan cuatro:
- Fondo: el color sobre el que se apoya la mayor parte del diseño. A menudo es el color base del envase o un neutro claro.
- Texto: un color oscuro que se lea bien sobre el fondo. El casi negro funciona. Un color de marca profundo funciona mejor, si supera la comprobación de contraste.
- Acento: el color llamativo, para un botón, una etiqueta de precio o una sola palabra destacada.
- Apoyo: uno o dos neutros para cajas, separadores y texto secundario.
Resiste la tentación de usar todo lo que te dio la foto. Cinco colores con nombre y funciones claras mantendrán cien anuncios coherentes. Doce, no.
Paso 4: comprueba el contraste antes de usarlo en cualquier cosa
Las combinaciones de colores que se ven bien en un monitor grande pueden costar mucho leerlas en un móvil al sol, y bastante más a personas con baja visión. Las Pautas de Accesibilidad para el Contenido Web del W3C dan un número para esto, el ratio de contraste, que va de 1:1 (el mismo color dos veces) a 21:1 (negro sobre blanco). Los umbrales son:
| Texto normal | Texto grande | |
|---|---|---|
| AA (SC 1.4.3) | 4.5:1 | 3:1 |
| AAA (SC 1.4.6) | 7:1 | 4.5:1 |
Texto grande significa al menos 18 puntos, o 14 puntos en negrita, según la definición de WCAG. Y las cifras son límites estrictos: la guía sobre 1.4.3 del W3C dice que un ratio calculado no debe redondearse, así que 4.499:1 no cumple 4.5:1.
WCAG se escribió para contenido web, no para anuncios, pero el razonamiento se aplica a cualquier texto en pantalla, incluidos los subtítulos incrustados en un vídeo y las palabras de una tarjeta final.
Un ejemplo práctico
Supongamos que tu envase te da un azul marino #1a3c6e, un crema #fdf6e3 y un naranja #e07a2e.
La fórmula es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa va de 0 para el negro a 1 para el blanco. El azul marino sale en torno a 0.046, el crema en torno a 0.923 y el naranja en torno a 0.300.
- Texto azul marino sobre crema: (0.923 + 0.05) / (0.046 + 0.05) = 0.973 / 0.096, unos 10.1 con estas cifras redondeadas, y 10.16:1 exacto. Cumple AAA en cualquier tamaño. Es tu combinación principal.
- Texto naranja sobre crema: (0.923 + 0.05) / (0.300 + 0.05) = 0.973 / 0.350, unos 2.78:1. No cumple ni para texto grande. El naranja no debe llevar palabras sobre crema.
- Texto negro sobre naranja: (0.300 + 0.05) / (0 + 0.05) = 0.350 / 0.05, que es 7.0 con estas cifras redondeadas, pero 6.99:1 exacto. Cumple AA para todo el texto, aunque se queda justo por debajo de AAA. Vale para la etiqueta de un botón.
- Texto crema sobre azul marino: es la misma pareja que la primera, así que el mismo 10.16:1. Invertir una combinación nunca cambia el ratio.
Así que los papeles casi se eligen solos: fondo crema, texto azul marino y naranja como forma de acento con palabras en negro encima (azul marino sobre naranja solo llega a 3.65:1, que cumple AA solo para texto grande). El extractor muestra toda esta cuadrícula de una vez: cada color frente a todos los demás, más blanco y negro, con cada celda calificada como AAA, AA, AA grande o Fallo.
Paso 5: anótalo una vez
Exporta la paleta como propiedades personalizadas de CSS o como JSON y guárdala junto a los archivos de tu logo. Una vez decidido, renombra las variables según su función: --brand-bg, --brand-text y --brand-accent se leen mejor que --color-3 dentro de un mes. Añade debajo de cada una una línea que indique qué combinaciones superaron la prueba, para que nadie tenga que repetir la comprobación.
Después, contrasta los valores con cualquier dato oficial que ya tengas. Una foto te da el color que vio tu cámara, que se parece al envase impreso, pero no es idéntico a la especificación de tinta. Si tu imprenta o tu diseñador tienen valores exactos, esos mandan.
Cómo usar la paleta en anuncios y publicaciones
- Pies de foto y subtítulos: el color de tu texto sobre una caja en el color de fondo, o al revés. Comprueba antes la combinación.
- Tarjetas finales: el color de fondo con el logo y una línea en el color de texto. El acento puede rellenar la forma de un botón detrás de una llamada a la acción corta.
- Miniaturas y portadas: un acento, una palabra grande y legible y mucho fondo.
- Códigos QR en el envase: un color de marca funciona si es claramente más oscuro que el envase. Nuestro generador de códigos QR avisa cuando el contraste es bajo.
Dónde encaja Hermoso
Hermoso es un agente de marketing con IA. Investiga los anuncios que ya funcionan en tu mercado, crea anuncios de imagen y vídeo acordes a tu marca, publica y programa en tus propias cuentas de redes sociales, y gestiona campañas de pago en tus propias cuentas publicitarias. Cuando añades tu marca desde tu web, aprende tus productos, tu logo y tu paleta. Los subtítulos y las tarjetas finales siguen desactivados salvo que los pidas, y cuando lo haces, puedes definir los colores del texto, la caja y la tarjeta final con códigos hex, así que las combinaciones que has comprobado aquí son las que se publican. Funciona en la app web o dentro de Claude, ChatGPT y Cursor a través de su servidor MCP.
Preguntas frecuentes
¿Cómo encuentro los códigos hex de los colores de mi producto?
Recorta una foto limpia del producto o el envase y súbela a un extractor de paletas de color. Muestra los colores principales en HEX, RGB y HSL. Pasa dos o tres fotos y quédate con los colores que se repiten.
¿Qué ratio de contraste necesita el texto?
Según WCAG 2.2, el nivel AA exige 4.5:1 para texto normal y 3:1 para texto grande, y el AAA exige 7:1 y 4.5:1. El texto grande mide al menos 18 puntos, o 14 puntos en negrita.
¿Vale 4.49:1 para AA?
No. El W3C dice que el ratio no debe redondearse al compararlo con el umbral, así que 4.499:1 no cumple 4.5:1.
¿Cuántos colores debe tener una paleta de marca?
Los suficientes para asignar una función a cada uno: normalmente un fondo, un color de texto, un acento y uno o dos neutros. Cinco colores con nombre y funciones claras mantienen los anuncios más coherentes que una lista larga.
¿Son exactos los colores de una foto?
No. Son lo que registró la cámara con esa luz, cercanos al producto pero no iguales a una especificación de impresión o de tinta. Si tienes valores oficiales, úsalos.