Branding Colors (primary, secondary)

About

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 and is used to give another color accent if your theme is dual tone.

Usage

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:

A button with the default primary color

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)

Configuration

Colors

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.

Example

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)

Powered by ComboStrap