{"id":4588,"date":"2024-01-23T11:56:31","date_gmt":"2024-01-23T11:56:31","guid":{"rendered":"https:\/\/troothemes.trooinbounddev.com\/?p=4588"},"modified":"2024-01-23T11:56:31","modified_gmt":"2024-01-23T11:56:31","slug":"color-theory-and-color-palettes-in-ui-design","status":"publish","type":"post","link":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/","title":{"rendered":"Color Theory and Color Palettes in UI Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"4588\" class=\"elementor elementor-4588\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-650916b1 post_detail_content e-flex e-con-boxed e-con e-parent\" data-id=\"650916b1\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-33865f4e elementor-widget elementor-widget-text-editor\" data-id=\"33865f4e\" 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>Did you know that the inventor of the color wheel, as we know it today, was\u00a0<b>none other than Sir Issac Newton<\/b>?\u00a0<\/p><p>What was the reason that one of the greatest minds of the world was invested in studying color palettes?\u00a0<\/p><p>The reason was that the human mind\u2019s complexity was and is still a mystery to be solved. Something so basic such as the color of the wall or the table we are eating at can have a great impact on our mood and appetite.\u00a0<\/p><p>According to various studies, women can see more shades of red. Even the human anatomy tells us that colors aren\u2019t just colors.\u00a0<\/p><p>But why am I telling this to you?\u00a0<\/p><p>Color palettes in UI design can help you bring more personality and voice into your craft.\u00a0<\/p><p>As a UI designer, you have the power to make users attracted to certain spaces of the website. There are a lot of elements that can help you do that but here is one more for you: Colors.\u00a0<\/p><p><b>Read this blog to get an idea of:<\/b><\/p><ol><li aria-level=\"1\">The color wheel and basic understanding of brand color palettes\u00a0<\/li><li aria-level=\"1\">Color Palettes and the impact it has on Psychology\u00a0<\/li><li aria-level=\"1\">Practical rules to follow while picking out color palettes\u00a0<\/li><li aria-level=\"1\">How can you leverage color theory in UI design\u00a0<\/li><\/ol>\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-6a4f04a0 elementor-widget elementor-widget-heading\" data-id=\"6a4f04a0\" 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 Color Palette?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-477724e2 elementor-widget elementor-widget-text-editor\" data-id=\"477724e2\" 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\tA color palette is a collection of colors that will be used to design the entire user interface. Think of color palettes in UI design as your paint box. You can play around with color theory throughout your website. \n\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-73f86b4 elementor-widget elementor-widget-image\" data-id=\"73f86b4\" 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=\"768\" height=\"510\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/What-is-Color-Palette-Definitive-Guide-768x510-1.png\" class=\"attachment-large size-large wp-image-9279\" alt=\"What is Color Palette - Definitive Guide\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/What-is-Color-Palette-Definitive-Guide-768x510-1.png 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/What-is-Color-Palette-Definitive-Guide-768x510-1-300x199.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-6269055 elementor-widget elementor-widget-heading\" data-id=\"6269055\" 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\">Understanding The Color Palette through the Color Theory\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-418c5007 elementor-widget elementor-widget-text-editor\" data-id=\"418c5007\" 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>I can hear what you are saying.<\/p><p>\u201cI have seen this in school, I know this already\u201d.<\/p><p>You have seen this everywhere. Schools, colleges, art classes, and places that you don\u2019t even remember.<\/p><p>Your understanding of picking apt color palettes comes from the color wheel.<\/p><p>The inventor of the color wheel is one of the greatest minds in the world. You can only imagine the kind of impact he must have thought colors had in our world, which led him to build a framework to see something we keep seeing all day from a different perspective: Colors.<\/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-833aabf elementor-widget elementor-widget-image\" data-id=\"833aabf\" 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=\"768\" height=\"590\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Understanding-Color-Palettes-through-Color-Theory-768x590-1.png\" class=\"attachment-large size-large wp-image-9292\" alt=\"Understanding Color Palettes through Color Theory\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Understanding-Color-Palettes-through-Color-Theory-768x590-1.png 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Understanding-Color-Palettes-through-Color-Theory-768x590-1-300x230.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-3ebe7d09 elementor-widget elementor-widget-text-editor\" data-id=\"3ebe7d09\" 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>Let\u2019s delve deep into the color wheel and break down its parts to understand how you can leverage color palettes in UI design:<\/p><p>1. There are three primary colors: Red, Yellow, and Blue. Every color palette that you can possibly pick comes from these primary colors.<\/p><p>2. Primary colors can be mixed to derive more colors.<\/p><ul><li>Red + Blue = Purple<\/li><li>Red + Yellow= Orange<\/li><li>Yellow + Blue= Green<br \/>And so on.<\/li><\/ul><p>3. You can create tertiary colors by mixing a primary color with a secondary color.<\/p><p>4.\u00a0 You can further classify colors into cool, warm, and neutral colors. This is based on the tone of the color.\u00a0<\/p><p>For ex, shades of blue are cool, and shades of yellow and red are warm.\u00a0<\/p><p>There are some other colors that are neutral, and are soothing to the eye, like the ones shown below:<\/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-fd50269 elementor-widget elementor-widget-image\" data-id=\"fd50269\" 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=\"667\" height=\"491\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Neutral-Color-Palette-1.png\" class=\"attachment-large size-large wp-image-9293\" alt=\"Neutral Color Palette\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Neutral-Color-Palette-1.png 667w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Neutral-Color-Palette-1-300x221.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/>\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-6cf2cd6 elementor-widget elementor-widget-text-editor\" data-id=\"6cf2cd6\" 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>Cool tones are more likely to put users in a calm, peaceful mood and warm colors are preferred to excite them or make them perform certain actions sooner.<\/p><p>Neutral tones help to bring other forms of content to the forefront, so they are preferred as background colors.<\/p><p>5. Deciding the theme of the color palette:<\/p><ul><li>Monochromatic: Monochromatic color palettes are created when we use one bold color and multiple variations of that one color. Having a monochromatic color palette will go a long way in not overwhelming the users with tons of new shades and hues.<\/li><\/ul>\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-357f113 elementor-widget elementor-widget-image\" data-id=\"357f113\" 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=\"768\" height=\"427\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/monochromatic-color-palette-768x427-1.png\" class=\"attachment-large size-large wp-image-9299\" alt=\"monochromatic color palette\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/monochromatic-color-palette-768x427-1.png 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/monochromatic-color-palette-768x427-1-300x167.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-603fb063 elementor-widget elementor-widget-text-editor\" data-id=\"603fb063\" 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<ul><li>Analogous: When we use colors that are placed next to each other on the color wheel, the color palette developed is called as an analogous one.<br \/>Analogous color palettes are generally found in the nature, they are vibrant and also a safe choice as they mostly go well with each other.<\/li><li>Complementary colors: Next, you can use colors that are opposite to each other on the color wheel. Complementary color palettes create a nice balance in the page as one color is usually more dominating and the other brings more focus towards other elements.<br \/>For example, colors such as red and green, yellow and purple and others which are placed opposite to each other go well together.<\/li><li>Triadic: Pick out three colors that are equally spaced from each other in the color wheel.<br \/>Some very well-known color combinations are: Red, Yellow and Blue. You can also consider Green, Orange and Purple. If you take a closer look at the color wheel, you will be able to come up with more triadic color palettes of your own.<\/li><\/ul>\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-10bf434 elementor-widget elementor-widget-image\" data-id=\"10bf434\" 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=\"768\" height=\"306\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Triadic-Colors-in-UI-Design-768x306-1.png\" class=\"attachment-large size-large wp-image-9306\" alt=\"Triadic Colors in UI Design\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Triadic-Colors-in-UI-Design-768x306-1.png 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Triadic-Colors-in-UI-Design-768x306-1-300x120.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-720e9f8 elementor-widget elementor-widget-text-editor\" data-id=\"720e9f8\" 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<ul><li>Contrast: Want your content to pop? Or do you want to provide a more immersive reading experience?<br \/>Adopting contrasting color palettes is usually done to immerse the viewer and make certain blocks of content pop more than others.<br \/>You can use multiple options such as white with black, light blue with dark blue, and much more. See the example below:<\/li><\/ul>\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-06177f8 elementor-widget elementor-widget-image\" data-id=\"06177f8\" 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=\"768\" height=\"538\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Color-Contrast-in-UI-Design-768x538-1.png\" class=\"attachment-large size-large wp-image-9308\" alt=\"Color Contrast in UI Design\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Color-Contrast-in-UI-Design-768x538-1.png 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Color-Contrast-in-UI-Design-768x538-1-300x210.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-442790a elementor-widget elementor-widget-heading\" data-id=\"442790a\" 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\">Psychology Behind Picking the Right Color Palette \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6a8f479 elementor-widget elementor-widget-text-editor\" data-id=\"6a8f479\" 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>You can deliver a great user experience by learning how to leverage color palettes in UI design.<\/p><p>Being a UI designer, your core focus is delivering an enhanced user experience through all the elements at hand. Ofcourse you have to make their journey smooth so that they can buy from your website. But you also have to ensure that they feel good about making that purchase decision.<\/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-c3e1112 elementor-widget elementor-widget-image\" data-id=\"c3e1112\" 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=\"768\" height=\"524\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Color-Psychology-behind-the-colors-used-by-brands-768x524-1.png\" class=\"attachment-large size-large wp-image-9309\" alt=\"Color Psychology behind the colors used by brands\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Color-Psychology-behind-the-colors-used-by-brands-768x524-1.png 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Color-Psychology-behind-the-colors-used-by-brands-768x524-1-300x205.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-15b5655e elementor-widget elementor-widget-text-editor\" data-id=\"15b5655e\" 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>Many studies say that the combination of yellow and red makes people feel more hungry. Pink is supposed to calm your nervous system. Blue is regarded as the color of trust.<\/p><p>Imagine, you are getting to impact the mind of the end user just by choosing different color palettes.<\/p><p>Not by engaging copy, not by crazy animations and elements, just color palettes that align with what the brand wants to achieve. This is especially true for product-based companies.<\/p><p><strong>For example, people preferred the taste of Pepsi over that of Coca-Cola in blind taste tests, but when they were asked to decide based on the packaging, their preference shifted to Coca-Cola.<\/strong><\/p><p><strong>Why?<\/strong><\/p><p><strong>Coco-Cola\u2019s signature red and white packaging brought with itself a nostalgic, christmassy feeling to the user\u2019s mind.<\/strong><\/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-34d1537 elementor-widget elementor-widget-image\" data-id=\"34d1537\" 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=\"648\" height=\"464\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Red-Color-Branding-Message-Coca-cola-1.png\" class=\"attachment-large size-large wp-image-9312\" alt=\"Red Color Branding Message - Coca-cola\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Red-Color-Branding-Message-Coca-cola-1.png 648w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Red-Color-Branding-Message-Coca-cola-1-300x215.png 300w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/>\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-4722776 elementor-widget elementor-widget-text-editor\" data-id=\"4722776\" 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>There are a lot of considerations that you need to consider while picking color palettes. You need to delve deep into how your customers perceive color, and that depends on so many factors such as:<\/p><ul><li>Culture: Red is a beacon of love and celebrations in Western countries, while in Japan, red is the epitome of self-sacrifice, authority, power, and many other things.<\/li><li>Age and gender of your audience. Men would pick a bold color like blue or green and women would pick a softer tone like purple.<\/li><li>Are the color palettes you picked up aligning with other elements of your brand<\/li><\/ul><p>And much more.<\/p><p>TL; DR?<\/p><p><strong>Colors have a crucial role in impacting the psychological state of customers. While you can experiment and play around with other elements, playing with color palettes in UI design can also have an enormous impact. Try it out!<\/strong><\/p><p>Now, let us explore how you can play around with the element of color and choose the perfect color palette.<\/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-2b406dc elementor-widget elementor-widget-heading\" data-id=\"2b406dc\" 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\">How to play around with color palettes for a UI designer? \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03ee62b elementor-widget elementor-widget-text-editor\" data-id=\"03ee62b\" 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 a UI designer, you have to have the right mix of creativity, awareness of <a href=\"http:\/\/Try to keep the brand story and positioning in mind while selecting your color palette.\" data-wplink-url-error=\"true\">latest design trends<\/a>, and a general understanding of the impact of color theory on user behaviour.<\/p><p>You have to understand the trends that you will give in to and the ones that you will steer clear from. You also need to perform solid user research to understand your audience better.<\/p><p>Apart from that, here is the process you need to follow to pick the right color palette for your UI design:<\/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-30806ea elementor-widget elementor-widget-heading\" data-id=\"30806ea\" 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\">Choose your primary, secondary, and tertiary colors to start creating color palettes. \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df9eaa0 elementor-widget elementor-widget-text-editor\" data-id=\"df9eaa0\" 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>Try to keep the brand story and positioning in mind while selecting your color palette.<\/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-22ea473 elementor-widget elementor-widget-image\" data-id=\"22ea473\" 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=\"295\" height=\"300\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Primary-Secondary-and-Tertiary-Colors-295x300-1.png\" class=\"attachment-large size-large wp-image-9319\" alt=\"Primary, Secondary, and Tertiary Colors\" \/>\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-04a20a6 elementor-widget elementor-widget-text-editor\" data-id=\"04a20a6\" 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>For example, do you want to build on trust like Facebook, or excitement and nostalgia like Coca-Cola?\u00a0<\/p><p>The primary color you choose will be the most bold representation of your brand. It will be the most prominent color across the screen. Limit your choice of a primary color from 1 to 3 choices.\u00a0<\/p><ul><li aria-level=\"1\">Background: Colors such as absolute white or black usually have high contrast and strain the eyes. Opt for more neutral colors that provide a more comfortable experience.\u00a0<\/li><\/ul><ul><li aria-level=\"1\">Consistency: Having one color for all link buttons, and one for all CTAs helps to play with the user psychology in a very passive yet impactful way.\u00a0<\/li><\/ul><ul><li aria-level=\"1\">Use Semantic colors: Some colors have a universal meaning, for example, red for danger. Apart from certain cultural contexts, leverage the universal semantics too to engage with the user more. To be able to leverage this, you can learn a little more about color theory from various resources online.\u00a0<\/li><\/ul>\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-796a299 elementor-widget elementor-widget-heading\" data-id=\"796a299\" 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\">The 60-30-10 Rule for creating stunning color palettes\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-966138f elementor-widget elementor-widget-image\" data-id=\"966138f\" 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=\"768\" height=\"432\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/60-30-10-Rule-in-UI-Design-768x432-1.jpg\" class=\"attachment-large size-large wp-image-9333\" alt=\"60-30-10-Rule-in-UI-Design\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/60-30-10-Rule-in-UI-Design-768x432-1.jpg 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/60-30-10-Rule-in-UI-Design-768x432-1-300x169.jpg 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-1b040b4 elementor-widget elementor-widget-text-editor\" data-id=\"1b040b4\" 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>If you haven\u2019t already heard of the rule, the 60-30-10 rule is a simple framework of color theory that guides UI designers on how much color should be allotted to individual sections of the website.<\/p><p>It states that:<\/p><ul><li aria-level=\"1\">60% of your space should be colored in a primary color.<\/li><li aria-level=\"1\">30% with a secondary color.<\/li><li aria-level=\"1\">10% with an accent.<\/li><\/ul><p>As a UI designer, visual real estate matters the most to you. This particular framework guides on how much of the real estate you should allot to a specific color.<\/p><p>This proportion helps you to maintain a primary color scheme while also keeping a secondary color in mind and having one color for crucial real estate such as CTAs, and others.<\/p><p>That\u2019s color theory at its 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-c23c81c elementor-widget elementor-widget-heading\" data-id=\"c23c81c\" 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\">Use Contrast Effectively\n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aeecee4 elementor-widget elementor-widget-text-editor\" data-id=\"aeecee4\" 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<div class=\"elementor-element elementor-element-c173b72 elementor-widget elementor-widget-text-editor\" data-id=\"c173b72\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\"><div class=\"elementor-widget-container\"><p>Color theory can be used to grab the user\u2019s attention to certain areas of the website.\u00a0<\/p><\/div><\/div>\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-647e7f5 elementor-widget elementor-widget-image\" data-id=\"647e7f5\" 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=\"768\" height=\"442\" src=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Use-Constrast-Effectively-Definitive-Guide-to-Color-Theory-and-Color-Palettes-in-UI-Design-768x442-1.png\" class=\"attachment-large size-large wp-image-9340\" alt=\"Use Constrast Effectively - Definitive Guide to Color Theory and Color Palettes in UI Design\" srcset=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Use-Constrast-Effectively-Definitive-Guide-to-Color-Theory-and-Color-Palettes-in-UI-Design-768x442-1.png 768w, https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Use-Constrast-Effectively-Definitive-Guide-to-Color-Theory-and-Color-Palettes-in-UI-Design-768x442-1-300x173.png 300w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/>\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-8c0b441 elementor-widget elementor-widget-text-editor\" data-id=\"8c0b441\" 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 a UI designer, you have the power to draw users\u2019 attention to the areas you want to. It is a powerful tool to drive more sales, connect deeply with audiences, and enhance the overall user experience by a significant level.<\/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-e9f32a1 elementor-widget elementor-widget-heading\" data-id=\"e9f32a1\" 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\">Basics of color theory: \n<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-50a0720 elementor-widget elementor-widget-text-editor\" data-id=\"50a0720\" 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>Color theory, as we know today, as has three elements, namely HSL.\u00a0<\/p><p>HSL stands for hue, saturation, and lightness.\u00a0<\/p><p>Hue is a code that represents a color you pick from the wheel. For example, 0 or 360 means red. 120 denotes green and 240 is blue.\u00a0<\/p><p>Saturation denotes how strong the color is and lightness represents the amount of light that the color has.\u00a0<\/p><p>You could leverage all these elements to create a custom and unique color of your choice.\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-655ec65 elementor-widget elementor-widget-heading\" data-id=\"655ec65\" 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 should you choose TRooThemes as a UI designer? \n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2729fb elementor-widget elementor-widget-text-editor\" data-id=\"b2729fb\" 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 a UI designer, you are operating under brand guidelines that you have to adhere to.\u00a0<\/p><p>You could leverage the power of colors to enhance the personalization of your deliverables.\u00a0<\/p><p>At TRooThemes, we believe in giving designers the power to customize all elements of the theme such as typography, color palettes, element design, and everything under the roof.\u00a0<\/p><p>We make eye-catching themes accessible to you via our exclusive marketplace.\u00a0<\/p><p>Visit our marketplace and find the theme that calls out to you the most!\u00a0<\/p><p>Make your\u00a0<a href=\"https:\/\/www.troothemes.com\/blog\/ux-design-process\/\">UI\/UX design process<\/a>\u00a0much more smooth and professional with TRooThemes.\u00a0<\/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\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Did you know that the inventor of the color wheel, as we know it today, was\u00a0none other than Sir Issac Newton?\u00a0 What was the reason that one of the greatest minds of the world was invested in studying color palettes?\u00a0 The reason was that the human mind\u2019s complexity was and is still a mystery to [&hellip;]<\/p>\n","protected":false},"author":55,"featured_media":9274,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[754],"tags":[],"class_list":["post-4588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-ux-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.1 (Yoast SEO v26.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Color Theory and Color Palettes in UI Design: Definitive Guide<\/title>\n<meta name=\"description\" content=\"Guide on color theory and color palettes in UI Design that covers a basic understanding of color theory, psychology, and color palette in UI\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Color Theory and Color Palettes in UI Design\" \/>\n<meta property=\"og:description\" content=\"Guide on color theory and color palettes in UI Design that covers a basic understanding of color theory, psychology, and color palette in UI\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/\" \/>\n<meta property=\"og:site_name\" content=\"TRooThemes\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-23T11:56:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1037\" \/>\n\t<meta property=\"og:image:height\" content=\"551\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Amelia Dawson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amelia Dawson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/\"},\"author\":{\"name\":\"Amelia Dawson\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/#\/schema\/person\/f72e8aa8a765a55168462862f7ae3758\"},\"headline\":\"Color Theory and Color Palettes in UI Design\",\"datePublished\":\"2024-01-23T11:56:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/\"},\"wordCount\":1865,\"publisher\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png\",\"articleSection\":[\"UI\/UX Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/\",\"url\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/\",\"name\":\"Color Theory and Color Palettes in UI Design: Definitive Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png\",\"datePublished\":\"2024-01-23T11:56:31+00:00\",\"description\":\"Guide on color theory and color palettes in UI Design that covers a basic understanding of color theory, psychology, and color palette in UI\",\"breadcrumb\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage\",\"url\":\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png\",\"contentUrl\":\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png\",\"width\":1037,\"height\":551,\"caption\":\"Definitive Guide to Color Theory and Palettes in UI Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"TRooThemes\",\"item\":\"https:\/\/www.troothemes.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Color Theory and Color Palettes in UI Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/#website\",\"url\":\"https:\/\/www.troothemes.com\/blog\/\",\"name\":\"TRooThemes\",\"description\":\"Marketplace for Professional Themes, Templates &amp; Layouts!\",\"publisher\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/#organization\"},\"alternateName\":\"TRooThemes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.troothemes.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/#organization\",\"name\":\"TRooThemes\",\"url\":\"https:\/\/www.troothemes.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2023\/12\/TRT-Final-Logo.svg\",\"contentUrl\":\"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2023\/12\/TRT-Final-Logo.svg\",\"caption\":\"TRooThemes\"},\"image\":{\"@id\":\"https:\/\/www.troothemes.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/#\/schema\/person\/f72e8aa8a765a55168462862f7ae3758\",\"name\":\"Amelia Dawson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.troothemes.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ccf75a804a79fa839c23f9b93f91ec565248135a850b7cf9cd2e45af5589fc0e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ccf75a804a79fa839c23f9b93f91ec565248135a850b7cf9cd2e45af5589fc0e?s=96&d=mm&r=g\",\"caption\":\"Amelia Dawson\"},\"url\":\"https:\/\/www.troothemes.com\/blog\/author\/ameliadawson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Color Theory and Color Palettes in UI Design: Definitive Guide","description":"Guide on color theory and color palettes in UI Design that covers a basic understanding of color theory, psychology, and color palette in UI","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:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/","og_locale":"en_US","og_type":"article","og_title":"Color Theory and Color Palettes in UI Design","og_description":"Guide on color theory and color palettes in UI Design that covers a basic understanding of color theory, psychology, and color palette in UI","og_url":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/","og_site_name":"TRooThemes","article_published_time":"2024-01-23T11:56:31+00:00","og_image":[{"width":1037,"height":551,"url":"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png","type":"image\/png"}],"author":"Amelia Dawson","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Amelia Dawson","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#article","isPartOf":{"@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/"},"author":{"name":"Amelia Dawson","@id":"https:\/\/www.troothemes.com\/blog\/#\/schema\/person\/f72e8aa8a765a55168462862f7ae3758"},"headline":"Color Theory and Color Palettes in UI Design","datePublished":"2024-01-23T11:56:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/"},"wordCount":1865,"publisher":{"@id":"https:\/\/www.troothemes.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png","articleSection":["UI\/UX Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/","url":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/","name":"Color Theory and Color Palettes in UI Design: Definitive Guide","isPartOf":{"@id":"https:\/\/www.troothemes.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage"},"image":{"@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png","datePublished":"2024-01-23T11:56:31+00:00","description":"Guide on color theory and color palettes in UI Design that covers a basic understanding of color theory, psychology, and color palette in UI","breadcrumb":{"@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#primaryimage","url":"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png","contentUrl":"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2024\/01\/Definitive-Guide-to-Color-Theory-and-Palettes-in-UI-Design-1.png","width":1037,"height":551,"caption":"Definitive Guide to Color Theory and Palettes in UI Design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.troothemes.com\/blog\/color-theory-and-color-palettes-in-ui-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"TRooThemes","item":"https:\/\/www.troothemes.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Color Theory and Color Palettes in UI Design"}]},{"@type":"WebSite","@id":"https:\/\/www.troothemes.com\/blog\/#website","url":"https:\/\/www.troothemes.com\/blog\/","name":"TRooThemes","description":"Marketplace for Professional Themes, Templates &amp; Layouts!","publisher":{"@id":"https:\/\/www.troothemes.com\/blog\/#organization"},"alternateName":"TRooThemes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.troothemes.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.troothemes.com\/blog\/#organization","name":"TRooThemes","url":"https:\/\/www.troothemes.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.troothemes.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2023\/12\/TRT-Final-Logo.svg","contentUrl":"https:\/\/www.troothemes.com\/blog\/wp-content\/uploads\/2023\/12\/TRT-Final-Logo.svg","caption":"TRooThemes"},"image":{"@id":"https:\/\/www.troothemes.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.troothemes.com\/blog\/#\/schema\/person\/f72e8aa8a765a55168462862f7ae3758","name":"Amelia Dawson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.troothemes.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ccf75a804a79fa839c23f9b93f91ec565248135a850b7cf9cd2e45af5589fc0e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ccf75a804a79fa839c23f9b93f91ec565248135a850b7cf9cd2e45af5589fc0e?s=96&d=mm&r=g","caption":"Amelia Dawson"},"url":"https:\/\/www.troothemes.com\/blog\/author\/ameliadawson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/posts\/4588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/comments?post=4588"}],"version-history":[{"count":0,"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/posts\/4588\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/media\/9274"}],"wp:attachment":[{"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/media?parent=4588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/categories?post=4588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.troothemes.com\/blog\/wp-json\/wp\/v2\/tags?post=4588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}