In this tutorial, you’ll learn how to use the Color Sampler feature in Elementor to find color palette inspiration in any image or element on your Elementor website. The tutorial will cover:
✔︎ Activating the color sampler
✔︎ Pulling color palettes from images on your web pages
✔︎ Finding any Elementor element’s hex color
✔︎ And much more!
Hey there, it’s Aviva from Elementor.
Today I’ll show you how to use the Color Sampler feature in Elementor. A website’s color palette is an essential part of a great user experience.
But sometimes, finding the right colors can prove to be both challenging and time consuming.
Enter the Color Sampler!
The color sampler allows you to extract colors from images and other elements on your page to create a coordinating color palette, to use on a single web page or throughout your site.
So let’s get started and see how it works!
To check that this feature is active, from the WordPress Dashboard, go to Elementor > Settings > Experiments, where you’ll find it – here.
Once it’s activated, save the changes, and open an existing Elementor page to see the color sampler in action.
I’ve already created this portfolio website for the lovely Irina Spellman, a sensational Skateboard Influencer!
As you can see, there are a number of images on this page, and looking closely, we can detect a pattern of colors that repeat themselves, such as these brilliant purples and various shades of blue.
I’d like to change the background color here to something that better complements these images.
Select any element whose color you wish to change. For this example, I’ll choose this section to change its background color.
In Style, click the Color picker, where you’ll find the Color Sampler. And… here it is!
Now click the Color Sampler. You’ll notice that the cursor changes to an Eye-Dropper icon, indicating the Color-Sampler is active. Click anywhere on the image to sample its colors. The Color Sampler generates a palette of up to five colors that work together harmoniously.
No matter where I click on the image, the same set of colors displays.
This is because the Color Sampler works to select the best mix of colors for a visually pleasing color palette, rather than simply displaying the most representative colors.
Hovering over a specific color will bring up the color’s HEX code and preview that color, in action. Choose the color best suited to your design to apply the changes.
You can also use the Color Sampler on other elements that have colors applied in their settings, such as this Heading.
And there you have it! That’s all there is to using the Color Sampler.
So go ahead and create your own custom palettes from the images and elements on your website, using the Color Sampler. I can’t wait to see what you come up with.
Thanks for watching!
