Harmonious color variants with transparent overlays

the way Material Design approaches the Color System, inspired me to experiment with a simple technique where I use transparent overlays of white and black, to generate light and dark variants based on my accent color. I was quite happy with the flexibility of it and especially for the fact that I could execute the whole recipe inside Elementor

The accent / primary / brand color

Or however you want to call it, it is the main branding color that is connected to your brand. You may want to use this (or lighter or darker variants) as background color on sections or columns, or any other surface in your layout.

You may also use it as button color, however you might want your button color to be something which harmonically contrasts your accent color.

In any case, you can get the idea of what an accent color is. It’s this light blue for twitter, the red of youTube, the violet of Elementor.

Light and dark variants and why you need them

Color in Elementor deserves a dedicated post, so let me just briefly say that you may want to differentiate different areas of your layout, by giving them a dark background color. Accordingly, you may want to have light background color over some sections, mainly to break the monotony of the white background in the flow.

Or perhaps you are customizing some vector illustrations and you want to replace the colours to match the colours of your site and brand.

In any of these cases, these color variations will need to be consistent, and there is an easy way to avoid guesswork and get compatible shades right out of the box.

Creating the variants inside an Elementor section

This recipe can be executed directly in Elementor, by adding a 3 col section with a background color, and then adding white and black transparent overlays on two of the columns. 

1. Create a section with three columns

Start by creating a simple 3-col section. You might want to add a spacer widget inside a column so you can manipulate the section of your height

2. Set the accent color as a background color of your section.

In our example we use #25B2BB as our accent color. 

3. Create the dark variant

On the right column, add a background color of black #000 with 50% opacity. Feel free to use higher values for opacity if you want darker variants. Lower opacity values will create not-so-dark variants.

4. Create the light variant

On the middle column, add a background color of white #fff with 50% opacity. Higher values will result in lighter variants.

By now you should have a consistent color scale for your variants that you can use and customize by simply adjusting the overlay opacities. 

Creating more palletes

By now, you have already figured out that whatever color you set as the background of your section, the light and dark variants are available right away, always in tune with your accent color.

Creating more variants

You actually want to create more steps in the scale. That’s fine. Simply add a column for each variant. 

You can create as many variants as you want, and customise them to your branding needs by adjusting the white or black overlay opacity on the column.

Want cool Elementor Design tips in your inbox? Sign up to the mailing list.

  • Easy to follow design tactics
  • Tutorials, courses and workflows
  • Curated lists of resources