How to use color picker in Elementor

By Rebecca
4 Min Read

Would you like to use the color picker in Elementor?

Elementor just released a new feature, Color Picker. This feature is quite handy because now you can use the same color on any part of your website with just one click. It is therefore no longer necessary to manually paste the hexadecimal code as before.

But how do you 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 hexadecimal code or an RGB code. Elementor itself supports both color codes. To use the same color, you can copy the hex code or RGB code of the color you want and paste the code into any part where you want to use the color.

It was before.

With Elementor’s Color Picker, you can now save a certain color and use it over and over again whenever you work with the Elementor Editor. With just one click. This new feature is pretty cool because finding a suitable color is one of the tricky tasks of web design other than choosing a font.

How to use Elementor’s color picker

To use Elementor’s color picker, first, add a widget as usual. Once the widget is added, go to the Style tab on the left panel. Choose any setting that involves color (for example, text color or background color).

Choose your favorite color on the color picker. Once you’ve found a suitable color, click the plus button inside the color picker.

You will be asked to confirm if you want to create a new global color. Enter a new name and click the Create button.

From now on, you can reuse the color you just added above whenever you want to set a color on Elementor. Whether it’s background color, font color, or other settings that involve color.

To prove it, you can look for another element that accepts the color such as the title, you can reuse that color as you see fit.

If you then want to manage these colors we recommend that you read our guide on How to use global colors in Elementor

Read more: How to import or export models in Elementor

Final words

In web design, choosing a color is one of the difficult tasks other than choosing a font. Once a suitable color is found, you typically copy the hex code or the RGB code to use it on other parts of the page you are working on.

With Elementor’s color picker, this old method no longer applies. You can now save a certain color and reuse it with one click, instead of pasting the hex code.


For website maintenance service contact us.

By Rebecca
Rebecca is an Independent content writer for breldigital, She writes content on any given topic. She loves to write a case study article or reviews on a brand, Be it any topic, she nails it