{"id":4648,"date":"2021-07-21T07:36:13","date_gmt":"2021-07-21T07:36:13","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=4648"},"modified":"2023-08-02T14:36:22","modified_gmt":"2023-08-02T14:36:22","slug":"how-to-use-the-color-sampler","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/","title":{"rendered":"How To Use the Color Sampler"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4648\" class=\"elementor elementor-4648\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-10e92bb4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"10e92bb4\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-62d9a37e\" data-id=\"62d9a37e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-61f35719 elementor-widget elementor-widget-video\" data-id=\"61f35719\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=CWGHyJf72FY&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-25e792c6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"25e792c6\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1234c459\" data-id=\"1234c459\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-34638326 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"34638326\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-8781\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-8781\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-8782\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-8782\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-8781\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-8781\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-8781\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, you\u2019ll 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:<\/p><p>\u2714\ufe0e Activating the color sampler<\/p><p>\u2714\ufe0e Pulling color palettes from images on your web pages<\/p><p>\u2714\ufe0e Finding any Elementor element\u2019s hex color<\/p><p>\u2714\ufe0e And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-8782\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-8782\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-8782\" tabindex=\"0\" hidden=\"hidden\"><p>Hey there, it\u2019s Aviva from Elementor.<\/p><p>Today I\u2019ll show you how to use the Color Sampler feature in Elementor. A website\u2019s color palette is an essential part of a great user experience. <br \/>But sometimes, finding the right colors can prove to be both challenging and time consuming.<\/p><p>Enter the Color Sampler!<\/p><p>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.<\/p><p>So let\u2019s get started and see how it works! <br \/>To check that this feature is active, from the WordPress Dashboard, go to Elementor &gt; Settings &gt; Experiments, where you\u2019ll find it &#8211; here.<\/p><p>Once it\u2019s activated, save the changes, and open an existing Elementor page to see the color sampler in action.<br \/>I\u2019ve already created this portfolio website for the lovely Irina Spellman, a sensational Skateboard Influencer!<\/p><p>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.<\/p><p>I\u2019d like to change the background color here to something that better complements these images.<\/p><p>Select any element whose color you wish to change. For this example, I\u2019ll choose this section to change its background color.<\/p><p>In Style, click the Color picker, where you\u2019ll find the Color Sampler. And\u2026 here it is!<\/p><p>Now click the Color Sampler. You\u2019ll 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.<\/p><p>No matter where I click on the image, the same set of colors displays.<\/p><p>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.<\/p><p>Hovering over a specific color will bring up the color\u2019s HEX code and preview that color, in action. Choose the color best suited to your design to apply the changes.<\/p><p>You can also use the Color Sampler on other elements that have colors applied in their settings, such as this Heading.<\/p><p>And there you have it! That\u2019s all there is to using the Color Sampler. <br \/>So go ahead and create your own custom palettes from the images and elements on your website, using the Color Sampler. I can\u2019t wait to see what you come up with.<\/p><p>Thanks for watching!\u00a0<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, you\u2019ll 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: \u2714\ufe0e Activating the color sampler \u2714\ufe0e Pulling color palettes from images on your web pages \u2714\ufe0e Finding any Elementor element\u2019s [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":4649,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-4648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How To Use the Color Sampler | Elementor Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Use the Color Sampler | Elementor Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, you\u2019ll 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: \u2714\ufe0e Activating the color sampler \u2714\ufe0e Pulling color palettes from images on your web pages \u2714\ufe0e Finding any Elementor element\u2019s [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-21T07:36:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-02T14:36:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/color-sample-tycover.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Saar Kedem\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Saar Kedem\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Use the Color Sampler | Elementor Academy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/","og_locale":"en_US","og_type":"article","og_title":"How To Use the Color Sampler | Elementor Academy","og_description":"Overview Transcript Overview In this tutorial, you\u2019ll 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: \u2714\ufe0e Activating the color sampler \u2714\ufe0e Pulling color palettes from images on your web pages \u2714\ufe0e Finding any Elementor element\u2019s [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/","og_site_name":"Academy","article_published_time":"2021-07-21T07:36:13+00:00","article_modified_time":"2023-08-02T14:36:22+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/color-sample-tycover.jpeg","type":"image\/jpeg"}],"author":"Saar Kedem","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Saar Kedem","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/"},"author":{"name":"Saar Kedem","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/7d19eaa5cd2e49e5f8037ec2e985eaf5"},"headline":"How To Use the Color Sampler","datePublished":"2021-07-21T07:36:13+00:00","dateModified":"2023-08-02T14:36:22+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/"},"wordCount":512,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/color-sample-tycover.jpeg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/","url":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/","name":"How To Use the Color Sampler | Elementor Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/color-sample-tycover.jpeg","datePublished":"2021-07-21T07:36:13+00:00","dateModified":"2023-08-02T14:36:22+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/color-sample-tycover.jpeg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/07\/color-sample-tycover.jpeg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-the-color-sampler\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How To Use the Color Sampler"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/7d19eaa5cd2e49e5f8037ec2e985eaf5","name":"Saar Kedem","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1088ed3a6dcab53c172d632030ff97173b1e7adc49cd74d116e0e9d0f43b0d7a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1088ed3a6dcab53c172d632030ff97173b1e7adc49cd74d116e0e9d0f43b0d7a?s=96&d=mm&r=g","caption":"Saar Kedem"},"sameAs":["https:\/\/test.com"],"url":"https:\/\/elementor.com\/academy\/author\/saarkedem\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=4648"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4648\/revisions"}],"predecessor-version":[{"id":9349,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/4648\/revisions\/9349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4649"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=4648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=4648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=4648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}