Wix Editor: Customizing Your Color Theme

5 min read
Creating a color theme is an important step in your site's design process. When used consistently, these colors set the tone for your visitors and introduce them to your brand. 
Screenshot showing the color theme panel.
Your color theme is automatically used across your site, and in the 'themed" elements in the Add panel. You can also apply the colors of your theme to any element on your site.
In this article, learn more about:

Customizing your color theme

There are tons of color theme presets available for you to apply to your site. These themes are have been carefully created with complementary colors that cover a range of styles, from sleek and sophisticated pastels, to bold and bright palettes. Browse through the presets and choose the perfect option for your brand. 

Once you have chosen a color theme preset, you can also customize the individual colors. 

To choose and customize a color theme:

  1. Click Site Design  on the left side of the Editor.
  2. Hover over your Color & Text Theme and click Customize.
  3. Click Colors under Current Theme.
  4. Hover over your Color Theme and click Change.  
  5. Browse through the presets and click to select a new one. 
Screenshot showing the site design panel. The cursor is hovering over a site theme to select.
  1. (Optional) Customize the colors in your theme:
    1. Hover over your Current Theme and click Colors.
    2. Click the Edit Color icon  next to the relevant color.
    3. Select a new color by either using the cursor to find and select a new color, or entering the exact color in HEX, RGB or HSB values
GIF showing the cursor selecting new colors.
  1. (Optional) Click a shade on the color scale to adjust it to your liking by setting the saturation and brightness.
Screenshot of the panel showing where you can adjust the shade's saturation and brightness.

Applying your theme colors to elements on your site

You can apply the colors of your theme to any element on your site. They are saved in the color picker in the design panels:
Screenshot showing the color picker panel that has been opened from a container box's design.
Tip:
You can also save custom colors that aren't part of your theme in the color picker. Click + Add next to My colors to select a new color.
Additionally, the themed elements inside the Add panel in the Editor already feature your theme's colors (e.g., themed buttons, boxes, and lines), so you don't need to worry about manually adjusting them to match your site.  
Screenshot showing themes elements available to add from the Add panel.

Understanding how your theme colors are used on your site

As well as appearing in the color picker, your theme colors are used across your site as follows:

Color 1: Background & text

Color 1 is used for background and text across your site. If you've added Wix apps (e.g., Wix Stores, Wix Blog, etc.) to your site, those pages use the same background and text colors. 
In most cases, you'll see that the brightest tint (1) is used for the background while the darkest (2) is for text. We recommend creating a high-contrast pairing so that the information on your site is easy to read.
Screenshot showing color 1

Color 2: Action color

Drive visitors to make the choices you want by selecting an action color that stands out. This color is used for actionable elements like links, buttons and menu elements. It also appears in themed elements like buttons and boxes, as well as pages related to Wix apps (e.g., Wix Stores, Wix Blog, etc.)
The tint in the middle is used most frequently, so we recommend choosing one that contrasts with your background. This ensures that the most important elements in your site are accessible and noticeable.
screenshot showing color 2

Colors 3, 4 and 5: Additional colors

Choose three additional colors to complete your color scheme. These are displayed in various places across your site, so they should match and compliment the other colors you've selected.
screenshot showing colors 3, 4, and 5.

Did this help?

|