Customizing the Color Palette in BoldGrid Crio

BoldGrid Crio gives you a variety of color palettes that you can use when creating a business website. You have an Active Palette as well as a list of Saved Palettes. You will also have the ability to create a custom color palette, which is part of what designers refer to as their style guide when creating a website. The following article will walk you through the usage of color palettes within your Crio theme to help you understand how the color positions are applied to the elements within your BoldGrid Crio website.

Creating Your Color Palette

• In the Dashboard, navigate to Appearance → Customize
• In the Customizer menu, navigate to Colors

In this Customizer section, you have the ability to set color positions 1 through 6, with a live preview of how the change affects your sites appearance. You can drag colors to different positions, as well as click them to open the color picker tool to change them.

To Customize the Color Palette

• In the Dashboard, navigate to Appearance → Customize
• In the Customizer menu, navigate to Colors

Changing Colors Within the Active Palette

• Select a single color that you wish to change in the Active Palette
• Enter the numeric value for the color or select it from the Color Picker
• Use the bottom slider to adjust color opacity
• Click Done to update the color
• Click the thumbtack symbol to add your Active Palette to the Saved Palettes list
• Click Publish to save your changes

Using the Suggested Palettes

• Click the Suggest Palettes button
• Select an available palette or click Suggest Palettes to generate a new options
• Click the lock icon under a color to keep it in future suggested palettes
• Select an available palette
• Click Done
• Click Publish to save your changes

Moving Colors in the Palette

• Hover over a color in your Active Palette
• Click and drag the color to reorder it in your list
• The Customizer preview updates with the new color arrangement
• Click Publish to save your changes

Palette Positions

• Position 1 = primary accent color
• Position 2 = secondary accent color
• Position 3 = designer’s choice
• Position 4 = designer’s choice
• Position 5 = neutral color
• Position 6 = neutral color used for the default site background

Both Position 1 and Position 2 must be visible on the Neutral Color to ensure text is visible.

The Neutral Color is listed as the 5th and 6th positions in the color palettes because the BoldGrid Post and Page Builder only has access to the first 5 colors of this palette when used in conjunction with Crio, while the 6th position is your base color set in the Customizer for your sites default background color. This allows you to duplicate the color within Blocks, giving you the options you need for creating modern designs for your WordPress Website.