Modify element colors dynamicaly

Change the color of a design element manually, or based on product colors

Table of Contents

Change the color manuallyPaint methodChange the color based on the productPaint methodBased on colorAdjust to colorMood

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", and choosing the paint method and color.

Paint method

  • 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.


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 "Product" under the "Method" option.

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.

Based on color

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.

  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 focuses on vibrant colors, and identifies the most used among them.

  4. Secondary saturated color:  Identifies the second most used saturated color.

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

Adjust to color

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: This changes the color to create triadic harmony. For example, yellow will change to cyan or purple.

  4. Tetradic colors: This creates harmony between colors, changing the element and the product's color—for example, yellow turns to green, blue, or red.

  5. Analogous colors (1st & 2nd): This creates an analogous color harmony for the product. For example, if the color is yellow, it may shift to green, red, or other yellow shades.

Mood

Your color change will range from vibrant to dark. "Colorful" means high intensity, while "very dark" indicates low intensity.