{"id":5196,"date":"2017-01-09T18:12:15","date_gmt":"2017-01-09T18:12:15","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=5196"},"modified":"2020-09-03T11:55:48","modified_gmt":"2020-09-03T10:55:48","slug":"designing-in-color","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designing-in-color\/","title":{"rendered":"Designing in Color"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Color is a powerful force in the hands of a designer. It draws your eye, evokes emotion, and communicates meaning. To give you an idea of how important color is, in a widely cited study titled <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/marketingology.nl\/wp-content\/uploads\/2015\/03\/impact-of-color-on-marketing.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">The Impact of Color on Marketing<\/a>, researchers discovered that for some products, 90% of snap decisions people make about products could be based on color alone.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"90% of snap decisions people make about products could be based on color alone.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So effectively using color is important to designs. But coming up with different color combinations is also hard. Each color has its own meaning, and there are an infinite number of combinations out there.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This article is designed to serve as a guide to help you come up with color palettes for your designs. It encourages you to explore more with color, which will help you develop an intuitive sense for good color combinations.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">As you explore more with color, you\u2019ll develop an intuitive sense for good color combinations.<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Choosing a color palette<\/h2>\n<div id='gallery-1' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-Palette.png'><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-Palette.png\" class=\"attachment-full size-full\" alt=\"color-palette\" aria-describedby=\"gallery-1-5197\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-Palette.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-Palette-600x225.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-Palette-768x288.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-5197'>\n\t\t\t\t<a href=\"https:\/\/dribbble.com\/shots\/2684569-Color-Palette-Sketch-Template\">Pretty fly for a color palette (by Alex Vanderzon)<\/a>\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sometimes a color palette is the result of sudden inspiration. But most of the time, it comes from taking a systematic approach.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Identify purpose<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Good design aligns its color palette with its purpose.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Before doing anything else, first identify the purpose of your design. Good design aligns its color palette with its purpose.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Ask yourself the following questions:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>What is the message that you want to convey with your design?<\/li>\n<li>What is the purpose of your design? To be informative? To convince?<\/li>\n<li>What emotions do you want your design to evoke?<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The purpose of your design should serve as a guide for you as you choose your color palette.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Identify your audience<\/h2>\n<div id='gallery-2' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Your-audience-.png'><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Your-audience-.png\" class=\"attachment-full size-full\" alt=\"your-audience\" aria-describedby=\"gallery-2-5198\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Your-audience-.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Your-audience--600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Your-audience--768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-5198'>\n\t\t\t\tWho is your audience and how does that affect your design? &#8211; <a href=\"https:\/\/dribbble.com\/shots\/2305976-Qualtrics-Target-Audience-Illustrations\">Qualtrics Target Audience Illustrations\nby Jeff Wiggins<\/a>.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">People perceive colors differently. As Fairchild put it, color is a psychological phenomenon that arises within the observer. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Colors have different effects on people based on their personal preference, cultural upbringing, and experiences<\/strong>. As such, in order to understand how people will react to your design, you need to identify your audience.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Colors have different effects on people based on their personal preference, cultural upbringing and experiences.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">While some meanings of color are universal across audiences, others are not. Green universally represents nature as it\u2019s the color of vegetation. However, a color like red is interpreted differently across cultures. In the western world, red is associated with fire, violence, and warfare. It is also associated with love and passion. However, countries like China associate red with prosperity and happiness.<\/p>\n<div id='gallery-3' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"842\" height=\"842\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope.jpg\" class=\"attachment-full size-full\" alt=\"chinese-red-envelope\" aria-describedby=\"gallery-3-5199\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope.jpg 842w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-300x300.jpg 300w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-600x600.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-768x768.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-32x32.jpg 32w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-50x50.jpg 50w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-64x64.jpg 64w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-96x96.jpg 96w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Chinese-Red-Envelope-128x128.jpg 128w\" sizes=\"auto, (max-width: 842px) 100vw, 842px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-5199'>\n\t\t\t\tChinese red envelope &#8211; <a href=\"https:\/\/www.behance.net\/gallery\/34018164\/ECESIS-Ang-Pow-Design\">ECESIS: Ang Pow Design<\/a>.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Because colors have so many different meanings, it\u2019s important to match the mental color models you have as a designer with the ones of your audience.<\/strong><\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"It\u2019s important to match the mental color models you have as a designer with the ones of your audience.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To read more about what colors mean across different countries and demographics, check out <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.helpscout.net\/blog\/psychology-of-color\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Psychology of Color in Marketing and Branding<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.smashingmagazine.com\/2010\/01\/color-theory-for-designers-part-1-the-meaning-of-color\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Meaning of Color<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Review color theory<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When choosing a color palette, it\u2019s sometimes helpful know a little color theory. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/Color_theory\" target=\"_blank\" rel=\"noopener noreferrer\">Color theory<\/a> is a logical structure and practical guide for mixing colors. It encompasses everything from the color wheel to the meaning of individual colors.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A good primer is <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/designschool.canva.com\/color-theory\/\" target=\"_blank\" rel=\"noopener noreferrer\">Color Theory<\/a> by Design School, and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/blog.hubspot.com\/marketing\/color-theory-design#sm.0000b2d5sjq45dd0qmr2bvxpdxttz\" target=\"_blank\" rel=\"noopener noreferrer\">Color Theory 101<\/a> by Hubspot. You can read about an interesting application of color theory in <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.fastcompany.com\/3009317\/why-is-facebook-blue-the-science-behind-colors-in-marketing\" target=\"_blank\" rel=\"noopener noreferrer\">Why Is Facebook Blue? The Science Behind Colors In Marketing<\/a>.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Find inspiration<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Try looking at designs that come from outside of the specific medium you are designing for.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Sometimes it\u2019s hard to visualize the right color palette for your design. That\u2019s okay, great artists <em>steal<\/em>. Or rather, they take inspiration from other artists.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The usual suspect for color palette inspiration are sites like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/dribbble.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Dribbble<\/a> and <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.behance.net\/\" target=\"_blank\" rel=\"noopener noreferrer\">Behance<\/a>. If you want to find color inspiration for a specific design style like material design, you can use a site like <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.materialui.co\/colors\" target=\"_blank\" rel=\"noopener noreferrer\">MaterialUI<\/a>. The flat design equivalent can be found at <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/flatuicolors.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">FlatUIColors<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Those sites are useful, but try looking at designs that come from outside of the specific medium you are designing for.<\/strong> Doing so will help you come up with unexpectedly unique and pleasing color palettes. As an example, you could look at interior designs.<\/p>\n<div id='gallery-4' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-interior-design.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-interior-design.png\" class=\"attachment-full size-full\" alt=\"color-in-interior-design\" aria-describedby=\"gallery-4-5200\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-interior-design.png 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-interior-design-600x400.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-interior-design-768x512.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-4-5200'>\n\t\t\t\tInterior designers use color to bring spaces alive &#8211; <a href=\"http:\/\/www.lago.it\/\">via Lago<\/a>.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">If you want something different, look for color inspiration in the design of other cultures. For example, Korean music video set designs are known for their colorful and eye catching color palettes. Each frame can serve as a source of inspiration.<\/p>\n<div id='gallery-5' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Set-design-inspiration.png'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"788\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Set-design-inspiration.png\" class=\"attachment-full size-full\" alt=\"set-design-inspiration\" aria-describedby=\"gallery-5-5201\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Set-design-inspiration.png 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Set-design-inspiration-600x338.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Set-design-inspiration-768x432.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-5201'>\n\t\t\t\t<a href=\"https:\/\/www.youtube.com\/watch?v=N5wzkQvzp4c\">Set design is a great source of inspiration<\/a>.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You don\u2019t have to go to Korea to find color inspiration. It\u2019s everywhere, including your daily life. Next time you go out, stop to appreciate the colors around you.<\/p>\n<div id='gallery-6' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-everyday-life.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-everyday-life.png\" class=\"attachment-full size-full\" alt=\"color-in-everyday-life\" aria-describedby=\"gallery-6-5202\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-everyday-life.png 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-everyday-life-600x400.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Color-in-everyday-life-768x512.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-5202'>\n\t\t\t\t<a href=\"https:\/\/www.instagram.com\/jonathanzwhite\/\">Color inspiration is everywhere, including your daily life<\/a>.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When you find something that inspires you, create a color palette for it. You can use the eye dropper tool in your favorite design program to tease out a color palette and make adjustments if necessary.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Establish a design system<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A design system, sometimes called a style guide, is a framework that encapsulates all the elements that go into your design.<\/strong> This includes everything from buttons to typography. Consider things like what kinds of buttons you will use and what your navigation bar looks like.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For an example of a design system, check out the design system of <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.lightningdesignsystem.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Salesforce<\/a>. For even more examples, here is a list of <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/designschool.canva.com\/blog\/50-meticulous-style-guides-every-startup-see-launching\/\" target=\"_blank\" rel=\"noopener noreferrer\">50 Meticulous Style Guides Every Startup Should See Before Launching<\/a>.<\/p>\n<div id='gallery-7' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Mash-Creative-design-system.jpeg'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"799\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Mash-Creative-design-system.jpeg\" class=\"attachment-full size-full\" alt=\"mashcreative-design-system\" aria-describedby=\"gallery-7-5203\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Mash-Creative-design-system.jpeg 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Mash-Creative-design-system-600x400.jpeg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Mash-Creative-design-system-768x511.jpeg 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-5203'>\n\t\t\t\t<a href=\"http:\/\/www.mashcreative.co.uk\/work\/black-watch-global\/\">The design system of MashCreative<\/a>.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It\u2019s helpful to establish a design system before choosing a color palette, even if it\u2019s just a rough sketch.<\/strong> Doing so will give you an idea of what elements you have and how your colors could apply to them.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When choosing a color palette for your design, it\u2019s best to stick to the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/en.wikipedia.org\/wiki\/KISS_principle\" target=\"_blank\" rel=\"noopener noreferrer\">KISS (Keep it simple, stupid) principle<\/a>. The fewer the colors, the better. For most design systems, the following structure is a good start:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Background<\/li>\n<li>Primary accent<\/li>\n<li>Secondary accent<\/li>\n<li>Error color<\/li>\n<li>Success color<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The primary color is the color you most often use for important buttons and accents. For many companies, this is also the color of their logo.<\/p>\n<div id='gallery-8' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Logos.png'><img loading=\"lazy\" decoding=\"async\" width=\"1093\" height=\"290\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Logos.png\" class=\"attachment-full size-full\" alt=\"logos\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Logos.png 1093w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Logos-600x159.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Logos-768x204.png 768w\" sizes=\"auto, (max-width: 1093px) 100vw, 1093px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The secondary color is the color you use to differentiate secondary actions from primary ones. For example, primary and secondary buttons. Error and success colors, typically red and green, convey design states. For example, success or error notifications.<\/p>\n<div id='gallery-9' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Design-States.png'><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Design-States.png\" class=\"attachment-full size-full\" alt=\"design-states\" aria-describedby=\"gallery-9-5205\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Design-States.png 800w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Design-States-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Design-States-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-5205'>\n\t\t\t\tDesign States &#8211; <a href=\"https:\/\/dribbble.com\/shots\/2684479-Flash-Messages\">Flash Messages\nby Nick Velichkin<\/a>\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Choose a color palette<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now that you are armed with inspiration and a rough sketch of a design system, it\u2019s time to choose a color palette.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For a basic color palettes, I like to put my colors side by side, just like an artists would for their paint palette.<\/p>\n<div id='gallery-10' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Palette.png'><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"732\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Palette.png\" class=\"attachment-full size-full\" alt=\"palette\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Palette.png 1200w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Palette-600x366.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Palette-768x468.png 768w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This is the time to take all your color inspiration and create color palettes out of them. The more the better. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Don\u2019t be afraid to experiment with colors on your own as well.<\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When narrowing down your color palette options, think back to the first two sections where you identified the purpose and audience of your design. Ask yourself the following questions:<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>What colors are <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.smashingmagazine.com\/2014\/10\/color-contrast-tips-and-tools-for-accessibility\/\" target=\"_blank\" rel=\"noopener noreferrer\">accessible<\/a>?<\/li>\n<li>What colors have visual impact and draw your eye?<\/li>\n<li>Do you need a light or dark color scheme? What time of the day will people use your product?<\/li>\n<li>What mood do you want your design to convey? Does any one color palette you have do this better than the others?<\/li>\n<\/ul>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Colors will have different roles in your design system.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">As I mentioned in the last section, colors will have different roles in your design system. This also means that each color carries a different weight in your system. For example, your background colors will be used more often than accent colors.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Because of this, it\u2019s sometimes a good exercise to create a throwaway design composed of shapes of different sizes, with each size roughly equaling the frequency of occurrence and average surface area of the color on a given page.<\/strong><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Applying color palettes<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">To give you an idea of how to apply colors to design systems, let\u2019s take a look at <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.airbnb.co.uk\/\" target=\"_blank\" rel=\"noopener noreferrer\">Airbnb<\/a>. Airbnb\u2019s primary color is Rausch, named after the street the company originated from. Kazan serves as a secondary color and the two grays are used as backgrounds colors.<\/p>\n<div id='gallery-11' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnbs-colors.png'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"715\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnbs-colors.png\" class=\"attachment-full size-full\" alt=\"airbnbs-colors\" aria-describedby=\"gallery-11-5207\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnbs-colors.png 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnbs-colors-600x268.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnbs-colors-768x343.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnbs-colors-1500x670.png 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-11-5207'>\n\t\t\t\t<a href=\"http:\/\/airbnb.design\/\">Airbnb\u2019s brand colors<\/a>\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For most pages, Airbnb uses foggy grey as a background. You can see that they use the rausch as their primary color to accent important actions like requesting to book a listing.<\/p>\n<div id='gallery-12' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-listing.png'><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"637\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-listing.png\" class=\"attachment-full size-full\" alt=\"airbnb-listing\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-listing.png 936w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-listing-600x408.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-listing-768x523.png 768w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Kazan, the turquoise color, is used to catch and engage your eye. Notice how it compliments the primary color.<\/p>\n<div id='gallery-13' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-About-Page.png'><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"637\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-About-Page.png\" class=\"attachment-full size-full\" alt=\"airbnb-about-page\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-About-Page.png 936w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-About-Page-600x408.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-About-Page-768x523.png 768w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For error messages, Airbnb uses a light red, arguably a shade of rausch. The red, along with the exclamation mark, immediately draws your eye and notifies you of the state of the system.<\/p>\n<div id='gallery-14' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-Login.png'><img loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"637\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-Login.png\" class=\"attachment-full size-full\" alt=\"airbnb-login\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-Login.png 936w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-Login-600x408.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Airbnb-Login-768x523.png 768w\" sizes=\"auto, (max-width: 936px) 100vw, 936px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Start off without any color in your design. Focus on layout and placement of elements. After you\u2019re satisfied with what you have, then you can start applying your color palette to your design.<\/p>\n<div id='gallery-15' class='gallery galleryid-5196 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Store-Sale.png'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"750\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Store-Sale.png\" class=\"attachment-full size-full\" alt=\"store-sale\" aria-describedby=\"gallery-15-5211\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Store-Sale.png 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Store-Sale-600x450.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Store-Sale-768x576.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-15-5211'>\n\t\t\t\tStart off without color and slowly add from there &#8211; <a href=\"https:\/\/dribbble.com\/shots\/2760945-Store-Sale\">Store\uff0fSale by Gale P<\/a>.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Think of visual hierarchy in your design. Consider what design components you want to highlight and assign the appropriate color. Also, consider using different shades of your colors for things like hover and click states.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Wrap up<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Color is all about experimentation and iteration. If you want to become better at working with color, the only answer is to do more work. Think of color as an additive. If you have the layout and functionality of your design down, then you can experiment with as many color palettes as you want.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Learning how to design with colors is infinitely valuable to a designer. As you get better at picking color palettes, you develop the ability to visualize colors combinations on a design before even touching a design program.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.freecodecamp.com\/designing-in-color-abd358660a7b#.q4pi8ejbw\" target=\"_blank\" rel=\"noopener noreferrer\">Jonathan's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Color is a powerful force in the hands of a designer. It draws your eye, evokes emotion, and communicates meaning. To give you an idea of how important color is, in a widely cited study titled The Impact of Color on Marketing, researchers discovered that for some products, 90% of snap decisions people make about products could be based on&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/designing-in-color\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":22,"featured_media":5219,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[498],"tags":[],"class_list":["post-5196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/designing-in-color\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Designing in Color | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Color is a powerful force in the hands of a designer. It draws your eye, evokes emotion, and communicates meaning. To give you an idea of how important color is, in a widely cited study titled The Impact of Color on Marketing, researchers discovered that for some products, 90% of snap decisions people make about products could be based on... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/designing-in-color\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-09T18:12:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-03T10:55:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Bunting-1500x921.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"921\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Bunting.jpeg\",\"width\":5932,\"height\":3642},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/\",\"name\":\"Designing in Color | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#primaryimage\"},\"datePublished\":\"2017-01-09T18:12:15+00:00\",\"dateModified\":\"2020-09-03T10:55:48+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-in-color\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\"},\"headline\":\"Designing in Color\",\"datePublished\":\"2017-01-09T18:12:15+00:00\",\"dateModified\":\"2020-09-03T10:55:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#primaryimage\"},\"articleSection\":\"Visual Design\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/designing-in-color\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/55209350993df07834b6bc6359aa3514\",\"name\":\"Jonathan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4d601181a5f57aac710c98e229d6a88d13ef8a8916903d5fb633c7283bbcc14b?s=96&d=mm&r=g\",\"caption\":\"Jonathan\"},\"description\":\"Bringing design thinking to engineering, closing the gap between the qualitative and quantitive. Follow me on Twitter or follow my writing on Medium.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=5196"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5196\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/5219"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=5196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=5196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=5196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}