Introduction

Your website's colors can be edited quickly by changing three 'Key Colors' with our Basic Colors Editor.

This is a good way to start customizing the look of your site, then you can move to the Advanced Colors Editor to fine-tune every color option available.

Tap any image to view at larger size.


In this article
  • Basic: Overview of Key Colors
  • Changing Key Colors
  • View changes in Preview panel
  • Reset Modified Colors
  • Advanced Colors editing

Basic: Overview of Key Colors

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/q2yAf2nYMnQ7t7_hDanq-FVm0EAXlVIvwiI1g8wKsdY/02c_colors_toggle-Gco.png

Tap the 'Colors' panel in the Design Editor.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/x4Fe-Qcbl-4snnANU72o0V4Dyg7fUA_2U5YqusH-n50/01_basic_colors_panel-868.png

The default setting is the BASIC panel.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/PHuKusPbAMICVrSMeg8-2eHYrj4JM30FMrsedaBSGaI/02b_basic_colors_light_preview-rho.png

When selecting your Theme the Preset option selected will automatically set your Background Color, Text Color and Accent Color.

  1. Background Color: the background color throughout the site
  2. Text Color: all Headlines, Body Text, Captions, Menu Items, Blog Text and Footer Text can be set here. The Text Logo color is set separately
  3. Accent Color: for Text Links, Site Menu Hover/Selected, Page Links and Social Links.

Changing Key Colors

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/grF_Gth7ThtzELggQy_3aDyTntkIsxTmdNd-hpnDwac/04_basic_text_color_swatch_selector-BOY.png
  1. Tap the swatch to activate Color Picker
  2. Use slider (up/down) on right to pick the base color
  3. Use the picker circle to refine the color or add the #HEX number directly into the field above.

View changes in Preview panel

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/9fXtoRNXVQKVPyZQsp3xS6-m1wh6flJ7kFUIrupg5x0/03_basic_change_defaults_preview-WNA.png

As you make changes to the colors you can see the results in the Preview panel on the right.

  1. Save Changes to apply to your Live Site.

Reset Modified Colors

If you don't like the changes to the Key Colors you have made you can reset these to the original Preset default you selected in the Themes panel.

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/D7DkOg-JDHaNdqHbJIZoepQZQVPgIXxo2-Ipo8ehR7E/05_theme_basic_preset_modified-a7I.png
  1. Activate Themes > 'Basic' panel
  2. Presets area (under thumbnail preview) tap 'Modified'.
https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/C6l2Adn0hxUswocDDHpA7KNosmpoNDBlVP5Openu1jw/06_changing_theme_preset_warning-MkI.png

A warning will be displayed advising 'Changing your theme preset will reset all of your customizations'.

Tap 'Continue' to reset.

No content (images or text) that you have added to your site will be affected.

Advanced Color Edits

https://cdn.elev.io/file/uploads/k2lIo27OTcpW6kfEWaWzUT5hdKVItF5mpfv7htngHtE/aeQRQqZwz3y2my7RQQrUw9vnqdlgvkdDXscsqLh9dNI/07_colours_advanced_toggle-Z1Y.png

To refine individual colors further toggle to the Colors 'ADVANCED' panel.

See our Advanced Color Editor guide.


Reach us online at our live chat or via our email info@format.com if you have any more questions. We’re happy to help!