{"id":41434,"date":"2020-08-07T08:57:16","date_gmt":"2020-08-07T08:57:16","guid":{"rendered":"https:\/\/elementor.com\/blog\/?p=41434"},"modified":"2025-12-03T23:32:53","modified_gmt":"2025-12-03T21:32:53","slug":"website-color-schemes","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/website-color-schemes\/","title":{"rendered":"7 Rules for Choosing A Website Color Scheme"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"41434\" class=\"elementor elementor-41434\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d79eb2c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d79eb2c\" data-element_type=\"section\">\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-0741324\" data-id=\"0741324\" 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-bd7fa4c elementor-widget elementor-widget-text-editor\" data-id=\"bd7fa4c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As experienced designers of all backgrounds can tell you, color schemes require a profound amount of thought and consideration in the web creator&#8217;s design workflow. Because of the large scope of this topic, there are many best practices to master in order to create the perfect color scheme. After understanding the significance that color schemes play in the website design process, we will be even better equipped for our future design-related decision making and our careers as web creators.<\/p><p>When it comes to branding, specifically, color schemes are almost always a key component in a brand&#8217;s <a href=\"https:\/\/elementor.com\/blog\/design-system\/\" target=\"_blank\" rel=\"noopener\">design system<\/a> or <a href=\"https:\/\/elementor.com\/blog\/style-guide-examples\/\" target=\"_blank\" rel=\"noopener\">style guide<\/a>, which is a set of guidelines that defines a brand&#8217;s personality, brand messaging, <a href=\"https:\/\/elementor.com\/blog\/brand-imagery\/\" target=\"_blank\" rel=\"noopener\">brand imagery<\/a>, and content assets. Branding, as we know, is one of the most crucial components in the website design process. As such, a defined, carefully crafted color palette will solidify our brand identity so that our websites and their content become a polished, professional brand asset.<\/p><p>There are many best practices and \u201crules\u201d that, when put into effect by web creators, will maximize the potential of their web design skills and best represent their prestige and competence as a web designer. It&#8217;s time to learn and understand just how valuable website color schemes are in website design and the rules you can follow to make yours the very best.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d4ae65 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"9d4ae65\" data-element_type=\"widget\" data-gac=\"CTA_Elements\" data-gaa=\"Link\" data-gal=\"Position_Text_CTA\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/elementor.com\/blog\/color-theory-web-design\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn Everything There Is To Know About Color Theory<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2d33481 blog-toc elementor-widget elementor-widget-heading\" data-id=\"2d33481\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Table of Contents<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ece7127 blog-toc elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"ece7127\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#what-is-a-color-scheme\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">What Is a Color Scheme<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#why-are-color-schemes-important\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Why Are Color Schemes Important<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#creating-website-color-schemes\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">7 Rules for Creating Website Color Schemes<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#color-wheel\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">1. Get To Know The Color Wheel<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#color-combinations\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">2. Understand Color Combinations<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#color-psychology\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">3. Consider Color Psychology<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#visual-hierarchy\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">4. Address Visual Hierarchy<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#actionability-clickability\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">5. Focus on Actionability, Especially Clickability<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#responsive-design\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">6. Keep Responsive Design In Mind<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#neutral-colors\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-angle-right\" viewBox=\"0 0 256 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">7. Embrace Neutral Colors<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#website-color-scheme-examples\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Our Favorite Website Color Scheme Examples<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"#following-the-rules\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Following the Rules<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e63b045 elementor-widget elementor-widget-menu-anchor\" data-id=\"e63b045\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"what-is-a-color-scheme\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2643c43 elementor-widget elementor-widget-heading\" data-id=\"2643c43\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What Is a Website Color Scheme?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7e5a5d3 elementor-widget elementor-widget-text-editor\" data-id=\"7e5a5d3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A website color scheme is the collection of colors that a designer chooses for their website design. Also known as color palettes, color schemes can include as few or as many colors as the designer sees fit. Each color can be used for a variety of elements throughout the website, meaning the same color may be used for different types of components.\u00a0<\/p><p>That being said, color palettes are generally divided into two sets of colors: primary and secondary. The primary colors are generally the more dominant colors in the site, accounting for background colors, logo colors, menu colors, etc., and secondary colors are often used as accent colors, among other use cases. Very often, you\u2019ll also see that a color palette will include several shades of the same color, which gives the website a varied yet consistent feeling throughout its design.<\/p><p>Consistency is actually one of the fundamental values in creating a color scheme for your website. Because brand personality is so crucial to a successful website and business, having a consistent color palette solidifies your brand identity, as your repeated use of color and styling will create associations between your brand and your audience.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6f1662 elementor-widget elementor-widget-image\" data-id=\"e6f1662\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=800\/blog\/wp-content\/uploads\/2020\/08\/macaroons-color-scheme-1024x1024.jpg\" class=\"attachment-large size-large wp-image-41632\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/08\/macaroons-color-scheme-1024x1024.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/08\/macaroons-color-scheme-300x300.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=150\/blog\/wp-content\/uploads\/2020\/08\/macaroons-color-scheme-150x150.jpg 150w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/08\/macaroons-color-scheme-768x768.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/08\/macaroons-color-scheme-1536x1536.jpg 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=2048\/blog\/wp-content\/uploads\/2020\/08\/macaroons-color-scheme-2048x2048.jpg 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d6054a6 elementor-widget elementor-widget-menu-anchor\" data-id=\"d6054a6\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"why-are-color-schemes-important\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4287b3 elementor-widget elementor-widget-heading\" data-id=\"c4287b3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why Website Colors Are Important<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af5ae70 elementor-widget elementor-widget-heading\" data-id=\"af5ae70\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. They Present Your Visual Identity\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2475c6 elementor-widget elementor-widget-text-editor\" data-id=\"a2475c6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #5c6771;font-weight: 400;font-size: 18px\">Your crucial choice of color scheme becomes your visual identity, and it is how your brand will resonate in the minds of your visitors and prospective customers, otherwise known as brand recognition. This form of visual identity materializes into a communication medium between you and your target audience, as different user personas will be drawn to various types of color palettes. Color schemes also visualize your brand messaging, which is why they influence a large part of your user experience.\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29dc49a elementor-widget elementor-widget-image\" data-id=\"29dc49a\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"445\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=445\/blog\/wp-content\/uploads\/2020\/08\/importance-of-color-schemes-1.png\" class=\"attachment-large size-large wp-image-41634\" alt=\"importance of color schemes\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/08\/importance-of-color-schemes-1.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/08\/importance-of-color-schemes-1-300x185.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17dc29c elementor-widget elementor-widget-heading\" data-id=\"17dc29c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. They Make a First Impression<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-385fe54 elementor-widget elementor-widget-text-editor\" data-id=\"385fe54\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #5c6771;font-weight: 400;font-size: 18px\">As web creators, we know that while we design (and redesign) our websites in the back of our mind, we are often thinking, even if subconsciously, \u201cwhat kind first impression will this design make on my visitor?\u201d. That\u2019s one of the main things website color schemes are about: first impressions. This is true to the extent that in <\/span><a style=\"font-weight: 400;background-color: #ffffff;font-size: 18px\" href=\"https:\/\/gomedia.com\/zine\/insights\/business-philosophy\/web-design-stats-2018\/\" target=\"_blank\" rel=\"noopener\">one survey<\/a><span style=\"color: #5c6771;font-weight: 400;font-size: 18px\"> conducted in 2018, 94% of respondents said that their first impressions of a website are design-related.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-605c8cd elementor-widget elementor-widget-heading\" data-id=\"605c8cd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. They Create Emotional Connections<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5d34e86 elementor-widget elementor-widget-text-editor\" data-id=\"5d34e86\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Finally, even if you don\u2019t realize it at first, different color palettes trigger different emotions and associations in the eye of the beholder. Depending on how you want to communicate with your audience and visitors, your choice of colors will play a strong role in the dynamic of your \u201cconversation\u201d and in shaping your voice and tone. The topic of color psychology is a world of its own, which we will soon discuss.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3dfed81 elementor-widget elementor-widget-menu-anchor\" data-id=\"3dfed81\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"creating-website-color-schemes\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dcf9490 elementor-widget elementor-widget-heading\" data-id=\"dcf9490\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">7 Rules for Choosing a Website Color Scheme<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0edc31c elementor-widget elementor-widget-menu-anchor\" data-id=\"0edc31c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"color-wheel\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b71f220 elementor-widget elementor-widget-heading\" data-id=\"b71f220\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. Get To Know The Color Wheel<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-98ca720 elementor-widget elementor-widget-image\" data-id=\"98ca720\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"720\" height=\"540\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=540\/blog\/wp-content\/uploads\/2020\/07\/color-wheel-for-designers-tubik-blog.png\" class=\"attachment-large size-large wp-image-41444\" alt=\"color wheels in color schemes\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/07\/color-wheel-for-designers-tubik-blog.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/color-wheel-for-designers-tubik-blog-300x225.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Taken from: tubikstudio.com<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac17af7 elementor-widget elementor-widget-text-editor\" data-id=\"ac17af7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The fundamentals of <a href=\"https:\/\/www.webfx.com\/blog\/web-design\/a-look-into-color-theory-in-web-design\/\" target=\"_blank\" rel=\"noopener\">color theory<\/a> begin with understanding the three groups that the color wheel includes: primary, secondary, and tertiary. The primary colors, red, blue, and yellow, are the color wheel\u2019s base colors, and all of the remaining colors are derived from these three. Next, come secondary colors. Secondary colors are what you get when you mix any of the three primary colors together, otherwise known as orange, green, and purple. Finally, there are tertiary colors, also referred to as \u201cmiddle colors\u201d. These are what you get when you combine a primary color and a secondary color. Examples of these are red-orange, yellow-green, or blue-purple.<\/p><p>Understanding relationships between colors doesn\u2019t stop here. But now that we\u2019re aware of how colors are formed, we can define how they \u201cinteract\u201d with each other, or in other words, how they work together, and how we build our own color combinations.<\/p><p>Ironically, although the types of relationships between colors on the color wheel fall into concrete relationship \u201ccategories\u201d, there are also many options for how these colors can combine with each other, and that\u2019s where color combination-types come into play.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-484ebef elementor-widget elementor-widget-menu-anchor\" data-id=\"484ebef\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"color-combinations\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cbcbd9d elementor-widget elementor-widget-heading\" data-id=\"cbcbd9d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. Understand Color Combinations<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6afefec elementor-widget elementor-widget-image\" data-id=\"6afefec\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"259\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=259\/blog\/wp-content\/uploads\/2020\/07\/color-relationships.png\" class=\"attachment-large size-large wp-image-41445\" alt=\"types of color combinations\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/07\/color-relationships.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/color-relationships-300x108.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Taken from: 99designs.com<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bfec18 elementor-widget elementor-widget-text-editor\" data-id=\"7bfec18\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Just as each color bears a personality and significance alone, the same is true for the relationships between each color. When you choose a color combination, you\u2019re often conveying a certain message or concept to your website visitor, depending on how the color\u2019s \u201cpersonalities\u201d combine.\u00a0<\/p><p>If, for example, if you choose a complementary color scheme that includes red and blue, red, which represents urgency and strength, and blue, which represents peace and loyalty, your end result is a blended atmosphere of strong, forthcoming loyalty and stability.\u00a0<\/p><p>Alternatively, if you choose two or more colors that strike a harmonious balance rather than a contrast, you are creating a completely different vibe. It\u2019s up to you as a web designer to decide which type of color combination is a better fit for your website.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a2bbab elementor-widget elementor-widget-menu-anchor\" data-id=\"1a2bbab\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"analogous-colors\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-439e01c elementor-widget elementor-widget-heading\" data-id=\"439e01c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Analogous Colors: Side by Side<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25c3066 elementor-widget elementor-widget-text-editor\" data-id=\"25c3066\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Analogous color schemes consist of three colors that are directly beside each other on the 12-spoke color wheel. Web designers often choose <a href=\"https:\/\/www.figma.com\/dictionary\/analogous-colors\/\" target=\"_blank\" rel=\"noopener\">analogous color palettes<\/a> when looking to create a modern yet sophisticated website. For example, an analogous color scheme consisting of red, red-orange and light orange will emphasize the vibrant relationship between the red and light orange.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0749dca elementor-widget elementor-widget-menu-anchor\" data-id=\"0749dca\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"complementary-colors\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d57bef6 elementor-widget elementor-widget-heading\" data-id=\"d57bef6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Complementary Colors: Opposites Attract<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5242b74 elementor-widget elementor-widget-text-editor\" data-id=\"5242b74\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Examples of complementary colors are red and green, blue and yellow, blue and orange, red and blue, among many others. What these pairs have in common are that they are two opposites of each other, and you can identify them by finding two colors that are directly opposite one another on the color wheel. In practice, the significance of primary color combinations in web design is that because a sharp contrast exists between them, they can make one color, especially accent colors, stand out.<\/p><p>In the context of website design, using complementary colors bears great value for elements such as buttons or <a href=\"https:\/\/elementor.com\/blog\/custom-navigation-menu\/\" target=\"_blank\" rel=\"noopener\">navigation menus<\/a>. When your objective is for visitors to notice a button and click it, using a complementary color scheme as accent colors for your text and its background, is much more likely to grab user attention because of the stark contrast and differentiation between the two.\u00a0<\/p><p>Similarly, designing a button with a font color that contrasts with the button\u2019s background color will make the button text a lot easier to see. This can often result in higher clickability and conversion rates, and the same is true for navigation menus and menu items.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99067d2 elementor-widget elementor-widget-menu-anchor\" data-id=\"99067d2\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"triadic-colors\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7ba9a6 elementor-widget elementor-widget-heading\" data-id=\"b7ba9a6\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Triadic Colors: Evenly Spaced <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edca161 elementor-widget elementor-widget-text-editor\" data-id=\"edca161\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Considered to be the most basic type of color scheme, a <a href=\"https:\/\/www.invisionapp.com\/inside-design\/website-color-schemes\/\" target=\"_blank\" rel=\"noopener\">triadic color scheme<\/a> is defined as any three colors located 120 degree from each other on the color wheel. In some way, triadic schemes can be considered the most flexible of the three combination-types, as there are many directions you can go in to measure 120 degrees. Different to analogous, which is limited to three somewhat similar colors, or complementary colors, which can only be contrasting colors. Triadic can be seen as a mixture of the two, as triadic color schemes can combine both analogous and complementary colors, and there\u2019s (even) more room for creativity. As you can see, the options of color combinations that a web designer can create truly are endless.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd13303 elementor-widget elementor-widget-menu-anchor\" data-id=\"bd13303\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"color-psychology\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28002fc elementor-widget elementor-widget-heading\" data-id=\"28002fc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Consider Color Psychology <\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a30d546 elementor-widget elementor-widget-image\" data-id=\"a30d546\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"440\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=440\/blog\/wp-content\/uploads\/2020\/07\/color-psychology-1024x563.png\" class=\"attachment-large size-large wp-image-41447\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/07\/color-psychology-1024x563.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/color-psychology-300x165.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/07\/color-psychology-768x422.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1200\/blog\/wp-content\/uploads\/2020\/07\/color-psychology.png 1200w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Taken from: usertesting.com<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4deb90d elementor-widget elementor-widget-text-editor\" data-id=\"4deb90d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The world of <a href=\"https:\/\/99designs.com\/blog\/web-digital\/web-design-colors\/\" target=\"_blank\" rel=\"noopener\">color psychology<\/a> is built on the idea that certain colors trigger specific feelings and emotions, which trigger certain courses of action. If you haven\u2019t encountered color psychology until now, you\u2019re up for a true intellectual discovery.\u00a0<\/p><p>Color psychology suggests that choosing your website color scheme based on the <a href=\"https:\/\/elementor.com\/blog\/elementor-weekly-news-14\/\" target=\"_blank\" rel=\"noopener\">emotional experience<\/a> you want to deliver to your users will not only impact your brand\u2019s personality, but it will trigger certain visitor reactions based on the emotional environment you create.\u00a0<\/p><p>Once we understand what each color is known to represent, choosing the most appropriate color palette for our website becomes profoundly intuitive. For example, if you\u2019re building a website for your spa business, it makes sense to use colors that represent nature and healing, such as green, and possibly blue, which symbolizes peace and trust.\u00a0<\/p><p>With so many color palette options that exist within the color wheel, using color psychology as a guiding principle when choosing your color scheme allows you to make more informed design decisions, and focus your theme and style in a way that suits your industry and business persona.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7583e6a elementor-widget elementor-widget-menu-anchor\" data-id=\"7583e6a\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"visual-hierarchy\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34e455f elementor-widget elementor-widget-heading\" data-id=\"34e455f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Address Visual Hierarchy<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f78883f elementor-widget elementor-widget-image\" data-id=\"f78883f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"400\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=400\/blog\/wp-content\/uploads\/2020\/07\/visual-hierarchy-1.png\" class=\"attachment-large size-large wp-image-41449\" alt=\"visual hierarchy colors\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/07\/visual-hierarchy-1.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/visual-hierarchy-1-300x167.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2fd1369 elementor-widget elementor-widget-text-editor\" data-id=\"2fd1369\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>As web creators, investing in visual hierarchy is a natural step in our design workflow. Last year, the Shutterstock blog <a href=\"https:\/\/www.shutterstock.com\/blog\/establish-visual-hierarchy\" target=\"_blank\" rel=\"noopener\">published<\/a> an article naming \u201c6 Rules of Visual Hierarchy That Will Help You Design Better\u201d. These rules, they explain, are based on the overarching goal of arranging design components based on importance, which \u201cguides the viewer through the design and ensures the message is clear and concise.\u201d<\/p>\n<p>Of their six rules, Shutterstock&#8217;s first and foremost rule pertains to a website&#8217;s color scheme, and they state this rule as: \u201cMake a Focal Point with Color.\u201d What we can understand from this is that when you&#8217;re addressing your website&#8217;s visual hierarchy, your color palette is one of the most fundamental design choices to take into consideration. This is true for the colors you choose for your text, your button colors, your backgrounds, and so on.<\/p>\n<p>According to this mindset, when you have a hero text, and then a description beneath it, your choice of font colors is crucial, as is your choice of background color. In the image above, for example, it&#8217;s much easier to distinguish between the heading and the subheading when they are given two different colors. This way, the more \u201cimportant\u201d text is in a dark color, and the \u201cless important\u201d text is in a contrasting, lighter color. The eye addresses the h1 before the subheading, simply because it&#8217;s much prominent, and it&#8217;s easy to see each in its own light. In the second visual, both text elements are in the same color, so the eye instinctively sees them as one unit, and is slower to separate them into two different entities.&nbsp;<\/p>\n<p>The <a href=\"https:\/\/elementor.com\/blog\/principles-of-website-design\/\">design principle<\/a> of color palettes as a determinant of visual hierarchy pertains to almost every visual component in a website. This is true for text colors, as we described, but also for background colors and button colors. Emphasizing the importance of a specific button can often be achieved by <a href=\"https:\/\/elementor.com\/blog\/how-to-design-effective-buttons-for-wordpress-websites\/\" target=\"_blank\" rel=\"noopener\">choosing a button color<\/a> that is most likely to draw user attention, and ultimately result in a higher clickthrough rate.<\/p>\n<p>Generate the <a href=\"https:\/\/html-css-js.com\/css\/\" target=\"_blank\" rel=\"nofollow noopener\">CSS<\/a> style for border-radius, fonts, transforms, backgrounds, box and text shadows with the online CSS code generators.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab9cb6c elementor-widget elementor-widget-menu-anchor\" data-id=\"ab9cb6c\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"actionability-clickability\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f24fac9 elementor-widget elementor-widget-heading\" data-id=\"f24fac9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">5. Focus on Actionability, Especially Clickability<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b795032 elementor-widget elementor-widget-image\" data-id=\"b795032\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"455\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=455\/blog\/wp-content\/uploads\/2020\/07\/icreate-image-overlay-example-1024x582.jpg\" class=\"attachment-large size-large wp-image-41450\" alt=\"actionable colors\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/07\/icreate-image-overlay-example-1024x582.jpg 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/icreate-image-overlay-example-300x171.jpg 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/07\/icreate-image-overlay-example-768x437.jpg 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1291\/blog\/wp-content\/uploads\/2020\/07\/icreate-image-overlay-example.jpg 1291w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Taken from: ic-creative.co.uk<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-63b0b49 elementor-widget elementor-widget-text-editor\" data-id=\"63b0b49\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Looks aren\u2019t everything. What we mean by this is that yes, a visually-pleasing color palette is one of the fundamental factors in top-tier web design. That being said, the way your color palette affects your user experience is of equal importance. When you want your website visitors to take a specific course of action when browsing your site, the colors you choose can play a very dominant role.\u00a0<\/p><p>The example above from IC Creative illustrates the impact that a brightly colored button in front of a dark background overlay can have on your user activity. The black overlay allows the clear white text and bright orange button to stand out without clashing with the background photograph. At the same time, the transparency in the overlay still allows the people in the image background to be subtly visible.<\/p><p>This is visual proof that <a href=\"https:\/\/elementor.com\/help\/global-colors\/\" target=\"_blank\" rel=\"noopener\">choosing two or more colors<\/a> that bear a strong contrast between them, such as black and bright orange, is a powerful choice of color scheme. Alternatively, you can also choose multiple shades of a color and apply them to a cluster of elements, which can convey that those elements are indeed related to each other, yet some are more \u201cimportant\u201d than others.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d72e441 elementor-widget elementor-widget-menu-anchor\" data-id=\"d72e441\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"responsive-design\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9217104 elementor-widget elementor-widget-heading\" data-id=\"9217104\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">6. Keep Responsive Design In Mind<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a6bd18 elementor-widget elementor-widget-image\" data-id=\"7a6bd18\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"433\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=433\/blog\/wp-content\/uploads\/2020\/08\/slack-mockups.png\" class=\"attachment-large size-large wp-image-41628\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/08\/slack-mockups.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/08\/slack-mockups-300x180.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73ff228 elementor-widget elementor-widget-text-editor\" data-id=\"73ff228\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The <a href=\"https:\/\/www.youtube.com\/watch?v=0RrpdWCcskU\" target=\"_blank\" rel=\"noopener\">importance of responsive design<\/a> is a rule of thumb for any web creator. But what may be less intuitive about how to make your website <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25841\">responsive<\/a>, is that responsiveness goes beyond the sizing and layout of your site. Choice of color palettes is also a strong contributor to how a website will look on mobile.\u00a0<\/p><p>In fact, keeping mobile responsive in mind when crafting your color palette will often make your design process much easier. This way, you can guarantee that your text elements are equally legible regardless of screen size, and that icons and buttons are also just as visible on mobile as they are on desktop.\u00a0<\/p><p>Given how much smaller mobile screens are than desktop view, you may find that you&#8217;ll need to use fewer colors for mobile than you do for desktop. The smaller interface might look overwhelming if it has too many colors, yet the added space you have on desktop can handle a larger number of colors without seeming too busy.\u00a0<\/p><p>This is where Slack&#8217;s website becomes a perfect example of choosing a primary color for a color palette based on responsiveness. Their choice of <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/text-bold\/\"   title=\"How to Make Text Bold in HTML &#038; CSS\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"25842\">bold<\/a> purple is engaging and visible on any screen. It is loud enough to make a small (mobile) screen fun and exciting, yet dark enough that on a desktop view it won&#8217;t be \u201ctoo much.\u201d<\/p><p>Another helpful way to ensure that you don&#8217;t have too many colors on your mobile UI, yet still obtain visual hierarchy and uniqueness, is to add multiple shades of one color to your color scheme. The similarities between the color shades are similar enough that they&#8217;ll make the mobile interface look clean and cohesive, yet different enough to keep your website interactive and engaging.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d538d55 elementor-widget elementor-widget-menu-anchor\" data-id=\"d538d55\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"neutral-colors\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-15e5a7f elementor-widget elementor-widget-heading\" data-id=\"15e5a7f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">7. Embrace Neutral Colors<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ba06f1 elementor-widget elementor-widget-image\" data-id=\"2ba06f1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"409\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=800,h=409\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-15.26.51-1024x523.png\" class=\"attachment-large size-large wp-image-41457\" alt=\"dang colors\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1024\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-15.26.51-1024x523.png 1024w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-15.26.51-300x153.png 300w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=768\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-15.26.51-768x392.png 768w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1536\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-15.26.51-1536x785.png 1536w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=1636\/blog\/wp-content\/uploads\/2020\/07\/Screen-Shot-2020-07-29-at-15.26.51.png 1636w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d2a7d4f elementor-widget elementor-widget-text-editor\" data-id=\"d2a7d4f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Although they may be less exciting, neutral colors are a necessity for any correctly-crafted <a href=\"https:\/\/websitesetup.org\/website-color-schemes\/\" target=\"_blank\" rel=\"noopener\">color scheme<\/a>. Even if you only use them for text elements, every professional color palette should include neutral colors. As beautiful as non-neutral colors are, website visitors will, at one point or another, need a \u201cbreak\u201d from visual stimulation, especially when trying to process qualitative information through text.<\/p><p>In the example above, although dang\u2019s <a href=\"https:\/\/dangfoods.com\/\" target=\"_blank\" rel=\"noopener\">website<\/a> has a rich, colorful color scheme of orange, green and brown, the simple use of white is still a necessity. Using white is what makes their call to action texts visible (\u201cbuy now\u201d), what makes their navigation icon and menu look neat and visible, and what makes their logo be prominent among the dark, detailed imagery.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da7077b elementor-widget elementor-widget-menu-anchor\" data-id=\"da7077b\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"website-color-scheme-examples\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bc8d3f3 elementor-widget elementor-widget-heading\" data-id=\"bc8d3f3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Our Favorite Website Color Scheme Examples<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a622854 elementor-widget elementor-widget-heading\" data-id=\"a622854\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">1. KLM iFly 50<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2391390 elementor-widget elementor-widget-image\" data-id=\"2391390\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"609\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=609\/blog\/wp-content\/uploads\/2020\/07\/KLM.png\" class=\"attachment-large size-large wp-image-41454\" alt=\"klm color palette\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/07\/KLM.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/KLM-300x254.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-86f9697 elementor-widget elementor-widget-text-editor\" data-id=\"86f9697\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>KLM <a href=\"https:\/\/www.ifly50.com\/en_in\/43\" target=\"_blank\" rel=\"noopener\">iFly 50<\/a>, the iFly KLM Magazine\u2019s 50th anniversary edition, uses an analogous color scheme of medium-light blue, greenish light gray (this one is a derivative of blue) and dark-grayish green. Analogous color schemes, as we discussed earlier, are two or three colors close to each other on the color wheel, including shades and tints of those colors. These colors seem to be derived from the site\u2019s hero image, a detailed photograph of a waterfall on a high cliff below a bright blue sky. It\u2019s no wonder that the colors appear to be such a natural combination, as they are all derived from the colors moss on the cliff, the white waterfall, and the blue sky.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd17950 elementor-widget elementor-widget-heading\" data-id=\"cd17950\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">2. JOCO<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8393c4 elementor-widget elementor-widget-image\" data-id=\"d8393c4\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"609\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=609\/blog\/wp-content\/uploads\/2020\/07\/JOCO-1.png\" class=\"attachment-large size-large wp-image-41455\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/07\/JOCO-1.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/JOCO-1-300x254.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-934a3cc elementor-widget elementor-widget-text-editor\" data-id=\"934a3cc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Joco.io, a portfolio website belonging to developer Jon Corbett, shows a <a href=\"https:\/\/joco.io\/\" target=\"_blank\" rel=\"noopener\">unique way<\/a> to use a complementary color scheme that features bold shades of the three most basic primary colors (blue, yellow and red). By choosing bright blue, sunflower yellow and bold red-orange, Jon illustrates the potential of how to make the most fundamental set of three primary colors look unique yet traditional all in one.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fac0168 elementor-widget elementor-widget-heading\" data-id=\"fac0168\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">3. Embacy.io<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1c7080 elementor-widget elementor-widget-image\" data-id=\"c1c7080\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"609\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=609\/blog\/wp-content\/uploads\/2020\/07\/embacy.png\" class=\"attachment-large size-large wp-image-41452\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/07\/embacy.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/embacy-300x254.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\">Taken from: embacy.io<\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9e5574 elementor-widget elementor-widget-text-editor\" data-id=\"d9e5574\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Embacy.io uses a <a href=\"http:\/\/paletton.com\/wiki\/index.php?title=Split_complementary_color_scheme#:~:text=Split%2Dcomplementary%20is%20a%20color,only%20for%20highlights%20and%20accents.\" target=\"_blank\" rel=\"noopener\">split-complementary<\/a> color scheme as a <a href=\"http:\/\/www.embacy.io\" target=\"_blank\" rel=\"noopener\">sophisticated way<\/a> of blending delicate shades of complementary colors (yellow, light purple-blue, red). This collection of colors is derived (and slightly adjusted) from their logo, which includes unique shades of the three primary colors, red, blue and yellow.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a2852f8 elementor-widget elementor-widget-heading\" data-id=\"a2852f8\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">4. Odopod<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02e3d31 elementor-widget elementor-widget-image\" data-id=\"02e3d31\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"609\" src=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720,h=609\/blog\/wp-content\/uploads\/2020\/07\/odopod-visual.png\" class=\"attachment-large size-large wp-image-41453\" alt=\"\" srcset=\"https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=720\/blog\/wp-content\/uploads\/2020\/07\/odopod-visual.png 720w, https:\/\/elementor.com\/cdn-cgi\/image\/f=auto,w=300\/blog\/wp-content\/uploads\/2020\/07\/odopod-visual-300x254.png 300w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e92a21e elementor-widget elementor-widget-text-editor\" data-id=\"e92a21e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Odopod, a San Francisco-based digital design agency, <a href=\"https:\/\/www.odopod.com\/\" target=\"_blank\" rel=\"noopener\">successfully portrays themselves<\/a> with an individualistic flair, all with one multiple shades of a single hue, otherwise known as a monochromatic color scheme. Odopod takes this deep pink-orange color and creates a gradient background that transitions into a more traditional orange. This is what we consider to be the perfect balance of <a href=\"https:\/\/elementor.com\/blog\/tips-for-minimalist-web-design\/\" target=\"_blank\" rel=\"noopener\">colorful yet minimalistic<\/a> website design.<\/p><p>These four examples are only a short list of the vast choices we have as web designers when it comes to website color palettes. The options are endless, and all it takes is some dedication and creativity to find the color combination that best suits your website.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc1bc9e elementor-widget elementor-widget-menu-anchor\" data-id=\"fc1bc9e\" data-element_type=\"widget\" data-widget_type=\"menu-anchor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-menu-anchor\" id=\"following-the-rules\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-68af89b elementor-widget elementor-widget-heading\" data-id=\"68af89b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Following the Rules\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d618dd elementor-widget elementor-widget-text-editor\" data-id=\"0d618dd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Now that we have a better idea of what website color schemes are and why they are a must-have stage in every web creator\u2019s design workflow, it\u2019s time to see if we\u2019ve followed the rules in our own websites. As we mentioned in the beginning of the post, one of the most, if not the most, important principle when crafting a website color scheme is consistency.\u00a0<\/p><p>In order to attain that consistency, there are many principles, as we mentioned, to keep in mind. This includes, to name a few, navigating the color wheel, exploring different possible color combinations, considering color psychology, prioritizing visual hierarchy, actionability, and responsiveness, and finally, using neutral colors. When a beautiful color palette is used wisely throughout a website, visitors will not only enjoy navigating your site in the moment, but it will also leave a lasting impression in their minds.<\/p>\t\t\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>Colors are the first thing people notice when they visit your site, and your color scheme can make a huge impact on both style and consistency. Learn how to choose the right color palette, and work it into your site&#8217;s design system.<\/p>\n","protected":false},"author":340600,"featured_media":41646,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[32],"tags":[81],"marketing_persona":[47],"marketing_intent":[48],"class_list":["post-41434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-create"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>7 Rules for Choosing a Stunning Website Color Scheme | Elementor<\/title>\n<meta name=\"description\" content=\"Learn how to choose the perfectly-crafted right color palette for your website and work it into your site&#039;s design system.\" \/>\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\/blog\/website-color-schemes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Rules for Choosing a Stunning Website Color Scheme | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn how to choose the perfectly-crafted right color palette for your website and work it into your site&#039;s design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/website-color-schemes\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-07T08:57:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-03T21:32:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1201\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Orlee Gillis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Orlee Gillis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/\"},\"author\":{\"name\":\"Orlee Gillis\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/328053c188caa983135122eb1f4c62f6\"},\"headline\":\"7 Rules for Choosing A Website Color Scheme\",\"datePublished\":\"2020-08-07T08:57:16+00:00\",\"dateModified\":\"2025-12-03T21:32:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/\"},\"wordCount\":3210,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png\",\"keywords\":[\"Create\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/website-color-schemes\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/\",\"url\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/\",\"name\":\"7 Rules for Choosing a Stunning Website Color Scheme | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png\",\"datePublished\":\"2020-08-07T08:57:16+00:00\",\"dateModified\":\"2025-12-03T21:32:53+00:00\",\"description\":\"Learn how to choose the perfectly-crafted right color palette for your website and work it into your site's design system.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/website-color-schemes\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png\",\"width\":1201,\"height\":629},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/website-color-schemes\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\/\/elementor.com\/blog\/category\/design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"7 Rules for Choosing A Website Color Scheme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/328053c188caa983135122eb1f4c62f6\",\"name\":\"Orlee Gillis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/42bbded5d63d5cb8af7896e256e70095f2254b7e6957471a74c9bf5cdf8cbd5d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/42bbded5d63d5cb8af7896e256e70095f2254b7e6957471a74c9bf5cdf8cbd5d?s=96&d=mm&r=g\",\"caption\":\"Orlee Gillis\"},\"description\":\"Orlee is a Content Creator at Elementor who's enamored by UX\/UI Design and UX Writing. She spends a lot of time practicing her design skills and steeping cold brew coffee.\",\"url\":\"https:\/\/elementor.com\/blog\/author\/orlee\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"7 Rules for Choosing a Stunning Website Color Scheme | Elementor","description":"Learn how to choose the perfectly-crafted right color palette for your website and work it into your site's design system.","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\/blog\/website-color-schemes\/","og_locale":"en_US","og_type":"article","og_title":"7 Rules for Choosing a Stunning Website Color Scheme | Elementor","og_description":"Learn how to choose the perfectly-crafted right color palette for your website and work it into your site's design system.","og_url":"https:\/\/elementor.com\/blog\/website-color-schemes\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2020-08-07T08:57:16+00:00","article_modified_time":"2025-12-03T21:32:53+00:00","og_image":[{"width":1201,"height":629,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png","type":"image\/png"}],"author":"Orlee Gillis","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Written by":"Orlee Gillis","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/"},"author":{"name":"Orlee Gillis","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/328053c188caa983135122eb1f4c62f6"},"headline":"7 Rules for Choosing A Website Color Scheme","datePublished":"2020-08-07T08:57:16+00:00","dateModified":"2025-12-03T21:32:53+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/"},"wordCount":3210,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png","keywords":["Create"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/website-color-schemes\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/","url":"https:\/\/elementor.com\/blog\/website-color-schemes\/","name":"7 Rules for Choosing a Stunning Website Color Scheme | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png","datePublished":"2020-08-07T08:57:16+00:00","dateModified":"2025-12-03T21:32:53+00:00","description":"Learn how to choose the perfectly-crafted right color palette for your website and work it into your site's design system.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/website-color-schemes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/08\/Website-Color-Schemes_external.png","width":1201,"height":629},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/website-color-schemes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/elementor.com\/blog\/category\/design\/"},{"@type":"ListItem","position":3,"name":"7 Rules for Choosing A Website Color Scheme"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/#website","url":"https:\/\/elementor.com\/blog\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/328053c188caa983135122eb1f4c62f6","name":"Orlee Gillis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/42bbded5d63d5cb8af7896e256e70095f2254b7e6957471a74c9bf5cdf8cbd5d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/42bbded5d63d5cb8af7896e256e70095f2254b7e6957471a74c9bf5cdf8cbd5d?s=96&d=mm&r=g","caption":"Orlee Gillis"},"description":"Orlee is a Content Creator at Elementor who's enamored by UX\/UI Design and UX Writing. She spends a lot of time practicing her design skills and steeping cold brew coffee.","url":"https:\/\/elementor.com\/blog\/author\/orlee\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/41434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/users\/340600"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/comments?post=41434"}],"version-history":[{"count":4,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/41434\/revisions"}],"predecessor-version":[{"id":146504,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/posts\/41434\/revisions\/146504"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media\/41646"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/media?parent=41434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/categories?post=41434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/tags?post=41434"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_persona?post=41434"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/wp-json\/wp\/v2\/marketing_intent?post=41434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}