Search
Close this search box.

How to Use the Color Picker Feature in Elementor

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 our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.