ADI: Customizing Your Site's Colors

3 min read
ADI has put together many complementary color palettes for you to choose from, making it even easier to design your site. You can customize the palettes and even create your own.
When you add a logo to your site, ADI extracts the main colors and creates a special palette you can use. 

Changing your color palette

Change your site's color palette in just one click.

To change your color palette:

  1. Click Design on the top bar inside ADI.
  2. Select Colors
  3. Select a new color palette.

Changing the main color in your palette

Change the main color of your site and generate a new list of recommended color palettes.

To change the main color in your palette:

  1. Click Design on the top bar inside ADI.
  2. Select Colors
  3. Click the Design icon  in the Main Color box at the top. 
  4. Choose one of the suggested colors, or click the Add icon  to choose a custom color. 

Customizing your color settings

Customize your site colors further, by controlling the strength of color used (Coloration Level), as well as the palette's color mode.

To customize your color mode and coloration level:

  1. Click Edit under Color Mode.
  2. Customize your color settings:
    • Mode: Choose how dark or light your site's background colors are (Light, Dark or Mix).
    • Coloration Level: Define how colorful you want your site to be (Plain, Tinted, Colorful or Vibrant).

Creating your own color palette

Create your own color story for your site by designing a custom color palette.

To create your own color palette:

  1. Click Design on the top bar inside ADI.
  2. Click Colors
  3. Click Edit Palette Colors. 
  4. Click the Design icon  on the color you wish to change.
  5. Choose the new color. 
  6. Click Apply
ADI color palettes are carefully crafted to compliment the site design and each other. When you change the main color in the palette, ADI suggests palette combinations that suit your new main color. 
If the color contrast between your text color and ADI elements is too low, ADI will suggest that you adjust your palette colors. Click Adjust Colors at the bottom of the Palette Colors panel and ADI will automatically change the problematic color to a more suitable one.

Did this help?