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.
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.
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:
Click Site Design on the left side of the Editor.
Hover over your Color & Text Theme and click Customize.
Click Colors under Current Theme.
Hover over your Color Theme and click Change.
Browse through the presets and click to select a new one.
(Optional) Customize the colors in your theme:
Hover over your Current Theme and click Colors.
Click the Edit Color icon next to the relevant color.
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
(Optional) Click a shade on the color scale to adjust it to your liking by setting the 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:
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.
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.
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.
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.
