Modify element colors dynamicaly

Color modifications allow you to change the color of different elements in the design, either manually or dynamically based on the product. 

You can find the options on most element types (text, shapes etc.), on the right side of the editor.

Change the color manually

This is the static way to change an element to a specific shade. The color the element is changed to will stay the same, no matter what (it won't adapt to the product tones).

You can choose this by going to the "Adjust" settings, selecting "Manual" under "Method".

Choose the paint method

This is how the color is changed. And there are two types of paint methods:

• Hue: This will change the hue (or shade) of the design element. 
• Color overlay: This will change the element's color by placing an 'invisible' layer, filled with the said color over the element.

Choose the desired color

Simply select a color next to the “Color to change to” option. This is the color you want the element to be changed to.

Change the color based on the product

This is the dynamic way to change the color of an element; this will change the color based on the colors of the product.

This is done by selecting the “Product” option under “Method”.

Choose the paint method

This is how the color is changed. There are two types of paint methods:

• Hue: This will change the hue (or shade) of the design element.
• Color overlay: This will change the element's color by placing an 'invisible' layer filled with said color over the element.

Which product color should the colorizing be based on

Product images generally have different colors on them. With this setting, you can select from which colors of the product the color change will be created.

This is done by adjusting the “Based on” option.

There are 5 different options in this setting:

1. Primary color: This is the color that takes up most on the product.

2. Secondary color: This is the second most used color on the product.

3. Primary saturated color: This setting will only look at highly saturated (colorful, vibrant) colors (e.g. exclude white, black & gray), and will then take the most used color, of the highly saturated colors.

4. Secondary saturated color: This setting will only look at highly saturated colors (e.g. exclude white, black & gray), and will then take the second most used color, of the highly saturated colors.

5. Most saturated color: This will take the color that is most saturated.

Which color should the object be adjusted to

This is how the color that the change is based on, will actually be transferred to the design element you are changing the color of:

1. Same color: This will change the color to the same color as it's based on.

2. Complimentary color: This will change to the complementary color of the selected color. Examples: if it's a blue color it will be changed to yellow.

3. Triadic colors (1st & 2nd): This will change the color so you will have a triadic color harmony, with the new color changing element and the product. Examples: If it's a yellow color, it will be changed to either cyan or purple.

4. Tetradic colors (1st, 2nd & 3rd): This will change the color so you will have a tetradic color harmony, with the new color changed element and the product. Examples: If it's a yellow color, it will be changed to either green, blue, or red.

5. Analogous colors (1st & 2nd): This will change the color so you will have an analogous color harmony, with the new color changed element, and the product. Examples: If it's a yellow color, it will be changed to either green, red, or other shades of yellow.

Mood

This is how 'moody' your color change will be, and ranges from colorful to very dark. Where colorful will be high vibrance colors, while very dark will be low vibrance colors.

This can also be seen as the intensity of the color change.