Skip to main content
Última modificación: 22 de agosto de 2025
Con la configuración de marca, los usuarios pueden configurar los colores , logotipos y favicons de la marca de la empresa que se utilizarán en todo el contenido de HubSpot. Esto te permite acceder a esa configuración de marca con tokens en el archivo de un tema fields.json y dentro de los archivos HTML/HubL y CSS. También puedes acceder a los colores de las marcas dentro del archivo de un módulo fields.json. Después de agregar estos tokens dentro de un archivo fields.json, los creadores de contenido pueden editar sus valores dentro del editor de configuración del tema. Al agregar estas fichas en un HTML, HubL o CSS, los valores estarán codificados de forma rígida y los creadores de contenido no podrán modificarlos en el editor de la página. A continuación, conoce las variables de configuración de marca disponibles junto con ejemplos de implementación.

​
Variables de configuración de marca

La siguiente es una lista de opciones a las que se puede acceder desde el área de configuración de la marca dentro del valor del objeto property_value_paths o dentro de los archivos HTML/HubL y CSS.

​
Colores

Los colores de la marca se pueden acceder tanto dentro del archivo fields.json de un tema o módulo, como dentro de los archivos HTML/HubL y CSS utilizando los siguientes tokens HubL:
  • Principal:
    • {{brand_settings.primaryColor}}
    • {{brand_settings.colors[0]}}
marca-colores-primarios
  • Secundario: {{brand_settings.secondaryColor}}
marca-colores-secundario
  • Colores de contraste:
    • {{brand_settings.accentColor1}}
    • {{brand_settings.accentColor2}}
    • {{brand_settings.accentColor3}}
marca-colores-acento
  • Colores adicionales:
    • {{brand_settings.colors[1]}}
    • {{brand_settings.colors[2]}}
    • {{brand_settings.colors[3]}}
marca-colores-adicionales
Para acceder directamente al código hexadecimal de un color, incluye un filtro hex en el token. Por ejemplo: {{brand_settings.primaryColor.hex}} Para incluir colores de configuración de la marca en el archivo fields.json de un tema o módulo, utiliza el siguiente formato: 
//Example of using the primary color in within a theme's
// field.json file
{
  "name": "branding_color",
  "label": "branding_color",
  "type": "color",
  "default": {
    "color": "#26ff55",
    "opacity": 60
  },
  "inherited_value": {
    "property_value_paths": {
      "color": "brand_settings.primaryColor"
    }
  }
}
Hay ocasiones en que las cuentas pueden no tener colores adicionales configurados en su configuración de marcas. Si el código hace referencia a un color heredado que no existe en la configuración de la marca, se utiliza la siguiente lógica de reserva:
  • secondaryColor vuelve al primer color adicional (colors[1]).
  • accentColor1 vuelve al segundo color adicional (colors[2]).
  • accentColor2 vuelve al tercer color adicional (colors[3]).
  • accentColor3 vuelve al cuarto color adicional (colors[4]).
  • Los colores adicionales (por ejemplo, colors[3]) volverán al valor default. Si no hay una propiedad predeterminada color establecido, se utilizará primaryColor.

​
Logotipos

Se puede acceder a los logotipos de marcas dentro del archivo fields.json de un módulo y dentro de los archivos HTML / HubL y CSS. Puedes usar los siguientes tokens para acceder al conjunto de logotipos principales dentro de la configuración de marcas:
  • {{brand_settings.primaryLogo}}
  • {{brand_settings.logos[0]}}
logotipo-de-configuración-de-marca0
Se puede acceder a todos los logotipos adicionales mediante {{brand_settings.logos[1-19]}}. Además, puede acceder a los siguientes atributos del logotipo:
  • URL del logotipo: {{brand_settings.primaryLogo.link}}
  • Texto alternativo del logotipot: {{brand_settings.primaryLogo.alt}}
  • Altura del logotipo: {{brand_settings.primaryLogo.height}}
  • Ancho del logotipo: {{brand_settings.primaryLogo.width}}
  • Enlace a la imagen del logotipo: {{brand_settings.primaryLogo.src}}

​
Favicons

Sólo se puede acceder a los favicons de marca dentro de archivos HTML/HubL y CSS. Puedes usar los siguientes tokens para acceder al conjunto de logotipos principales dentro de la configuración de marcas:
  • {{brand_settings.primaryFavicon}}
  • {{brand_settings.favicons[0]}}
marca-configuración-favicon0
Se puede acceder a todos los favicons adicionales usando {{brand_settings.favicons[1-19]}}. Puedes acceder a la URL del logotipo directamente incluyendo un filtro src. Por ejemplo:{{brand_settings.primaryFavicon.src}}