How do I choose a color?


Elementor offers you several ways to choose colors for your text, background and anywhere else you need to choose colors.

Choosing a color

Click the globe icon to choose a global color. Global colors help you maintain design consistency by letting you create a fixed palette for your site.

The global color icon
Click the global icon to choose a global color.

Click the color swatch to open the color picker.

The color swatch that opens the color picker
Click the color swatch to open the color picker.

Color Controls

Click the icons below to find out what each does.

The color sampler allows you to choose a color based on your pages existing colors. Click anywhere on the page and the sampler will generate five complimentary colors based on the selected target for you to choose from.

Choose colors using dynamic tags. Learn more about dynamic colors.

After you choose a color, clear here to make make that color a global color

Clear will delete the color information you inputted, allowing you to start from scratch.


Click and drag the slider to choose a color range. Click inside the square to select an exact color.


Click and drag the slider to adjust the opacity of the color you choose.


If you know the exact code of the color you want. You can use any one of three color coding systems:

  1. HEXA (Hexadecimal)
  2. RGBA (Red, Green, Blue, Alpha)
  3. HSLA (Hue, Saturation, Lightness. Alpha)


Share it on social networks

Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page

Birthday Sale: Up to 50%30% Off
Birthday Sale: Last 24 hours!
Birthday Sale: Last 24 hours:
Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount