Global Styles
Color Picker
Take charge of the design elements on your website by customizing the color scheme and font. These options are part of Global Styles and can be modified by clicking on the gear-shaped icon located at the top of the page.
After you click on Global Styles, a menu of options will pop-out from the left-side of the screen.
The color swatch on the far left represents the Primary color, which will be applied to the background, headings, icons, and other design elements throughout your website. Moving to the right, the next color swatch signifies the Accent color, which is utilized for smaller interactive elements like buttons and links to create a contrast with the Primary color. As for the remaining unlabeled color swatches, they determine the font colors and unfortunately, these cannot be customized.
Select from a range of preset color options available to you. The radio button next to your current color palette will be highlighted, indicating your selection. Click on any of the other radio buttons to see a preview of those colors reflected in the editor.
To update your website to this new preset, click the blue Save button at the bottom of the menu.
If you are not satisfied with the preset color options, you have the flexibility to customize both the Primary and Accent colors to your preference. Simply click on the swatch of the color you wish to modify, which will open a color picker. Your website will instantly reflect the changes you make.
Alternatively, if you already have the hexadecimal (hex) code for a specific color, you can input it into the field located below the rainbow bar.
Please acknowledge your responsibility for maintaining WCAG standards when selecting custom colors for your website. Outside of the preset color palettes, it is your responsibility to ensure accessibility compliance. While you have robust customization options for your website, know that once you go outside the presets, it becomes your responsibility to maintain those WCAG standards. For this reason, we require you to acknowledge this responsibility before saving custom-picked colors.
After you click on Global Styles, a menu of options will pop-out from the left-side of the screen.
The color swatch on the far left represents the Primary color, which will be applied to the background, headings, icons, and other design elements throughout your website. Moving to the right, the next color swatch signifies the Accent color, which is utilized for smaller interactive elements like buttons and links to create a contrast with the Primary color. As for the remaining unlabeled color swatches, they determine the font colors and unfortunately, these cannot be customized.
Select from a range of preset color options available to you. The radio button next to your current color palette will be highlighted, indicating your selection. Click on any of the other radio buttons to see a preview of those colors reflected in the editor.
To update your website to this new preset, click the blue Save button at the bottom of the menu.
If you are not satisfied with the preset color options, you have the flexibility to customize both the Primary and Accent colors to your preference. Simply click on the swatch of the color you wish to modify, which will open a color picker. Your website will instantly reflect the changes you make.
Alternatively, if you already have the hexadecimal (hex) code for a specific color, you can input it into the field located below the rainbow bar.
Please acknowledge your responsibility for maintaining WCAG standards when selecting custom colors for your website. Outside of the preset color palettes, it is your responsibility to ensure accessibility compliance. While you have robust customization options for your website, know that once you go outside the presets, it becomes your responsibility to maintain those WCAG standards. For this reason, we require you to acknowledge this responsibility before saving custom-picked colors.