How to Use the Color Picker Feature in Elementor

Updated: May 25, 2021

Recently, Elementor has just released a new feature, Color Picker. This feature is pretty handy since you can now use the same color on any part of your website with a single click. No longer need to manually paste the hex code like it used to be. How to use this feature? Read on to find out.

In case you forgot, there are over 10 million colors in this world. In the web world, a color can be represented with a hex code or RGB code. Elementor itself supports both color codes. To use the same color, you can copy either the hex code or the RGB code of the color you want and paste the code to any part you want to use the color on.

It was then.

With the new Color Picker feature of Elementor, you can now save a certain color and use it over and over every time you work with the Elementor editor. With a single click. This new feature is pretty cool since finding a suited color is one of the tricky tasks in web design, other than picking a font. Isn’t it?

How to use Color Picker of Elementor

To use the Color Picker feature of Elementor, first, add a widget just like usual. Once the widget is added, go to the Style tab on the left panel. Choose any setting that involves color (such as text color or background color). Pick your preferred color on the color selector. Once you found a suited color, click the plus button inside the color selector.

From now on, you can reuse the color you have just added above every time you want to set a color on Elementor. Be it the background color, font color or other settings that involve color. To prove it, you can click the color selector on the Background Color section.

How to Manage the Added Colors

Once you get bored with a color, you can get rid of it from the color selector and replace it with a new one. To remove an added color, open the color selector. Select a color you want to remove. Click and hold until you see a trash icon. Drag the color to the trash icon.

You can also change the order of the colors. Simply drag a certain color and drop it to an order you want.

Final Words

In web design, choosing a color is one of the challenging tasks other than choosing a font. Once a suited color is found, you usually copy the hex code or the RGB code to use it on other parts of the page you are working on. With the new Color Picker feature of Elementor, that old method doesn’t apply anymore. You can now save a certain color and reuse it with a single click, instead of pasting the hex code.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general