¿Qué incluye una paleta de colores de marca?

Una paleta de marca asigna una función a cada color. El principal es el que la gente recuerda: aparece en el logotipo y en los botones principales. Un color secundario lo complementa, uno de acento hace que las llamadas a la acción destaquen, y los colores de fondo y de texto dan cohesión a la página.

El contraste es tan importante como la estética. Las Pautas de Accesibilidad para el Contenido Web (WCAG) exigen una relación de al menos 4.5:1 entre el texto normal y el fondo, o de 7:1 para el nivel AAA, más estricto.

Descripción de la herramienta

Describe tu marca en «Acerca de tu marca»: qué hace, a quién se dirige y qué sensaciones debería transmitir. Elige una personalidad de marca (Profesional, Alegre, Lujosa, Minimalista, Audaz o Natural) o déjala en «Coincidir con la descripción» para que la IA la deduzca a partir de tu texto.

Obtendrás cinco colores con nombre: Principal, Secundario, Acento, Fondo y Texto. El formato de salida cambia sus valores entre HEX, RGB, HSL, CMYK y otros formatos, y cada color tiene un botón para copiarlo. La guía de uso explica cómo utilizar cada color, y las variables CSS proporcionan un bloque para pegar en una hoja de estilos. Se pide a la IA que mantenga una relación de contraste de 7:1 o más entre el texto y el fondo, y de 3:1 o más para los colores principal y de acento.

Ejemplo

Para «Una tostaduría de café de barrio en Portland. Cálida, acogedora y sostenible», podrías obtener un marrón tostado como color principal, un fondo crema y un acento terracota, con variables CSS como estas:

:root {
  --brand-primary: #5b3a29;
  --brand-secondary: #a47551;
  --brand-accent: #d9643a;
  --brand-background: #faf6f0;
  --brand-text: #2b211c;
}

Funciones

  • Cinco colores con funciones claras, un nombre y una nota de uso para cada uno
  • Seis personalidades o una elegida a partir de tu descripción
  • Copia los colores en el formato que necesites o todo el conjunto como variables CSS

Limitaciones

La herramienta no mide el contraste por sí sola, así que comprueba la combinación de texto y fondo con un verificador de contraste antes de publicar.