Branding Colors (primary, secondary)


branding colors are a set of principal colors that determines your brand visually.

They should be the most used colors in your theme.

In ComboStrap, they are called:

  • primary
  • secondary

The primary color is the color

  • displayed most frequently with the most importance
  • that should have the most lightness and saturation

The secondary color :

  • is the second color in importance
  • is used to give another color accent if your theme is dual-tone.
  • is darker and mostly used in the text (This is the default color of icon for instance)


They are:

Color Name Precedence

When the color are set, they will take precedence:

For instance, a button:

  • that has the primary type has default
  • will take the primary color of this installation (ie #7611F7)
<btn>[[#|A button with the default primary color]]</btn>
  • Output:

Branding Color Inheritance

The branding color inheritance is a feature that will apply automatically the primary color to the following component.

You can disable this feature in the configuration.

For SEO purpose, we make sure that the contrast ratio is enough for best readability (if not, we change it to go above the minimum of 4.5 1)



You can set the brand colors in the configuration with the primary-color and secondary-color property.

Disable the branding color inheritance

You can disable the inheritance of the branding colors with the brandingColorInheritanceEnable configuration. The color of the bootstrap stylesheet will then take over.


The image below shows as example a list of primary/secondary colors that are the basic block for a theme.

This list of colors is used by Chrome to choose your theme for your profile (chrome://settings/manageProfile)

Primary Secondary Color

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Recommended Pages
Undraw Dark Mode 2xam
CSS Variable

This is an advanced CSS topic that you can use while creating your theme. You can set CSS variables: to have a global set of CSS values to customize the bootstrap stylesheet CSS If you want to...
Bootstrap Default Color
Color - How to specify a Color Value on ComboStrap Component

Color management in ComboStrap
Undraw Logo Design
ComboStrap - App Branding

branding is the process of creating a coherent design that is linked to your company. Through color palette and graphic design, your are passing a message of meaning, emotion and symbolism of what your...
Icon Default Location Combostrap
ComboStrap - Icon Component

An icon component that makes it easy to add icon to your pages
Undraw My Documents
ComboStrap UI - Brand

brand is a component that creates a company / brand button or link with the corresponding: logo icon and colors By default, the brand component will show your brand. Ie a button with: your...
Undraw Add Content Re Vgqa
ComboStrap UI - Button

Button is a ComboStrap UI component that implements a button style. The only action attached is to navigate to another page. buttonprimary color External Link and a secondary type With...
Undraw Growth Chart R99m
How ComboStrap tackles SEO to bring you more visitors?

seoSearch engine optimization (or SEO) is the process of making your website optimized for search/enginesearch engine (Google, Bing, ...) to get to the top of their result. On a website level, it means:...
Undraw Add Content Re Vgqa
How to highlight words in ComboStrap

This article shows you the highlighting syntax
Undraw My Documents
Identity Management in ComboStrap

This page is about the identify forms and styling documentation
Page-image Component: Renders the illustrative image of your page

Page-image is a component that renders the illustrative image of the page and is generally used in a fragment.

Task Runner