The Colors portion of your Theme Editor can be broken up into two pieces: Color Palette and Color Schemes.
Color Palette
The Color Palette is a group of colors that will be used as the default colors for your site and will show up throughout your Page and Theme editors so you can easily select them.
β
For example, if you're in the page editor and want to change the color for a heading block, you can select the text block and click 'Edit'. From there, click the color drop-down menu, and a box will pop up allowing you to change the color of the text. By default, the colors in the Color Palette will be available for you to easily select.
Color Schemes
Color Schemes are like more specific Color Palettes that can be applied to individual Blocks or entire Sections. To learn how to apply them, check out our articles on Block Options and Section Options! One Color Scheme can be applied to as many different items as you like!
Two extra important Color Schemes are Default and Dark Background (labeled "Image Overlay" in some accounts).
Default: This is the color scheme that is applied to every section on every page of your site unless you have changed it in the Section Options or added a background to the section.
Dark Background/Image Overlay: If you add any kind of background to a section, whether it is an image or a colored background, all blocks in that section will automatically swap to this color scheme. You can manually adjust these sections to a different scheme if desired!
The Different Color Fields in a Scheme
Within a Color Scheme, there are several different color fields that you can adjust: Body, Background, Dividers, Buttons (button & label), and Links (hover & default). These will present a little differently depending on whether the Color Scheme is applied directly to a block (via the Block Options) or applied to a whole Section (via the Section Options).
Body: This will affect any Heading or Text blocks within a section that is using the color scheme, or will affect just one Heading/Text block if the scheme is applied directly to the block
Background: affects the padding (space) immediately around a block when applied directly to it, or will affect the entire background of a section
Dividers: will only apply to Divider blocks within the given space, whether applied directly to one divider block or applied to a section where it will affect all divider blocks within that space
Buttons: The "button" color determines the overall color of a specific button or all the buttons in a section, while the "label" color applies to the text written on those buttons
Links: The "default" field will determine the color the color that a piece of text containing a link, while the "hover" field controls the color that the link will turn when you move your cursor over it
If you are working on a custom Color Scheme you added, you will also see an "Icons" color field. This will apply to any Icon blocks within a section to to specific Icon blocks you apply it to