help center

On this page

Pick a color

Last Update: February 2, 2024


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.

Screenshot 2023 04 19 135747 Pick a color 11

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)

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article