{"id":620,"date":"2023-05-09T12:00:31","date_gmt":"2023-05-09T10:00:31","guid":{"rendered":"https:\/\/tulipemedia.com\/?p=620"},"modified":"2023-05-09T14:01:26","modified_gmt":"2023-05-09T12:01:26","slug":"associate-colors-website-print-poster","status":"publish","type":"post","link":"https:\/\/tulipemedia.com\/en\/associer-couleurs-site-web-print-affiche\/","title":{"rendered":"Website and print: 5 tips for choosing and combining the right colors"},"content":{"rendered":"<p style=\"text-align: justify;\">Whether for a <strong>designate<\/strong>\/<strong>beginner webmaster<\/strong> or for a <strong>business<\/strong> who writes his specifications, the choice of <strong>colors of a website, a flyer, a business card, a poster or a brochure<\/strong> is a decisive and central exercise, both in terms of <strong>ergonomics<\/strong> and user experience than that of the <strong>marketing<\/strong>. So we will see <strong>how to choose good colors<\/strong> depending on the theme addressed by your website or your print and the intended target. You will see that nothing should be left to chance at this level, otherwise your communication would lose credibility.<\/p>\n<p><!--more--><\/p>\n<h2>Choose a limited number of colors<\/h2>\n<p style=\"text-align: justify;\">This tip is an open secret for fashion or interior design lovers. Except for exceptional and original clothing styles falling under the\u00a0<em>peacocking<\/em>, <strong>the colors should not be too numerous if we do not want to project a messy and immature image<\/strong>. For a <strong>website<\/strong>, we will prefer to decline the graphics on <strong>two, three or four tones<\/strong>, rather than 6 or 8 colors which will surely give your site an amateur image.<\/p>\n<p style=\"text-align: justify;\"><strong>Sobriety<\/strong> And <strong>minimalism<\/strong> for serious institutional sites are therefore not too much!<\/p>\n<p>&nbsp;<\/p>\n<h2>Prioritize clarity<\/h2>\n<p style=\"text-align: justify;\">Aesthetics and originality are good. There <strong>clarity<\/strong>, it&#039;s not bad sometimes too! With the exception of special\/baroque\/zany communications operations, a <strong>website<\/strong> or one <strong>classic print<\/strong> must above all satisfy the user experience: no aggressive wallpaper having a color similar to the font, no too many colors in the text, etc.<\/p>\n<p style=\"text-align: justify;\">Show proof <strong>of empathy<\/strong>, put yourself in the place of the Internet user for example, and ask yourself what they expect from a medium. For example, for a practical and informational website, it is the text, image and video that must be the center of attention. So make sure to offer the information in the purest way possible, by choosing pale or pastel colors for the background or on the sides, and dark for the text.<\/p>\n<p>&nbsp;<\/p>\n<h2>Use the color wheel to help yourself<\/h2>\n<p style=\"text-align: justify;\">If you are new to web design, or want to communicate credible specifications to your graphic designer, here is a tool that will be very useful for you to choose the colors of your site: the <strong>color wheel<\/strong>.<\/p>\n<p style=\"text-align: justify;\">Clearly, you have two major possibilities for combining colors via the <strong>color wheel<\/strong>, based on the physical properties of the human eye.<\/p>\n<ul>\n<li style=\"text-align: justify;\">The first is to <strong>choose several shades of the same color<\/strong>. Indeed, neighboring colors on the color diagram create a sensation of balance for the eye.<\/li>\n<li style=\"text-align: justify;\">The second is to <strong>choose opposite colors on the color wheel<\/strong>. So, if you choose two colors for your site, you are taking two diametrically opposed colors. If you take three, you choose three colors based on an equilateral triangle drawn in the center of the color wheel. For four colors, you base yourself on a square. Example: pink and green, dark blue and yellow, orange and light blue, etc\u2026<\/li>\n<\/ul>\n<div><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-158 aligncenter\" src=\"https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/cercle-chromatique.png\" alt=\"\" width=\"650\" height=\"167\" title=\"\" srcset=\"https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/cercle-chromatique.png 650w, https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/cercle-chromatique-300x77.png 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/div>\n<p>&nbsp;<\/p>\n<h2>The colors depend on the emotion to be aroused<\/h2>\n<ul>\n<li style=\"text-align: justify;\">If you want to establish an atmosphere of unity, harmony and <strong>candy<\/strong>, it will be preferable to choose <strong>neighboring colors<\/strong>. We will opt for reassuring and cold colors such as blue or green for example.<\/li>\n<li style=\"text-align: justify;\">If your marketing imposes a more <strong>energetic<\/strong>, then favor the <strong>complementary colors<\/strong> on the color wheel, except for the pairing of text color and background color.<\/li>\n<li style=\"text-align: justify;\">If you are in a <strong>aggressive communications operation<\/strong>, and you are looking to <strong>draw attention<\/strong> of the visitor, then favor the <strong>warm colors<\/strong> (red, orange, yellow) which will have the effect of arousing emotion, dynamism, warmth, useful for themes such as entertainment, travel or competitions.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Choose colors based on their meaning<\/h2>\n<p style=\"text-align: justify;\">This excellent table taken from the site <em>Commentcamarche.net<\/em> you list them <strong>color meanings<\/strong>\u00a0accompanied by their positive and negative symbolism, while affiliating them to particular areas of activity. Very useful for making the choice of your colors congruent with the sector in which you are positioned!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-159\" src=\"https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/signification-couleurs.png\" alt=\"\" width=\"615\" height=\"756\" title=\"\" srcset=\"https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/signification-couleurs.png 615w, https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/signification-couleurs-244x300.png 244w\" sizes=\"auto, (max-width: 615px) 100vw, 615px\" \/><\/p>\n<p>As you can see :<\/p>\n<ul>\n<li>blue evokes serenity and seriousness, and is suitable for the fields of IT, medicine, etc.<\/li>\n<li>Purple evokes passion, and is adapted to culture, politics but also sometimes to gastronomy or luxury.<\/li>\n<li>Red can also evoke passion and love, but also strength, dynamism, and works with luxury, sport or the media.<\/li>\n<li>Orange evokes pleasure, wealth and vitality, and can be used for entertainment, sports, travel, etc.<\/li>\n<li>Yellow evokes light, sunshine, life, cheerfulness and works well with tourism in particular.<\/li>\n<li>Green evokes nature and works well with discovery, nature, travel and education.<\/li>\n<li>Brown can evoke the terroir, but also calm and philosophy, and can work with e-commerce sites oriented towards natural products, but also sites linked to ecology and the environment.<\/li>\n<li>White evokes purity and art, and works with fashion, luxury, sometimes current affairs because white is neutral.<\/li>\n<li>Gray also evokes neutrality, respect, art sometimes, and can be used for associations.<\/li>\n<li>Finally, black evokes sobriety, luxury, night, art and also seriousness. It can be used for cinema and the arts in general, photography for example, but also for niche information sites, training sites, and finally, adult sites.<\/li>\n<\/ul>\n<p>Bonus: here is an infographic in English on the meaning of colors in brand logos:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-160\" src=\"https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/infographie-couleurs-marques.png\" alt=\"\" width=\"648\" height=\"2307\" title=\"\" srcset=\"https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/infographie-couleurs-marques.png 648w, https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/infographie-couleurs-marques-84x300.png 84w, https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/infographie-couleurs-marques-288x1024.png 288w, https:\/\/tulipemedia.com\/wp-content\/uploads\/sites\/3\/2012\/03\/infographie-couleurs-marques-575x2048.png 575w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p><em><strong>Sources:<\/strong><\/em><br \/>\n<a href=\"http:\/\/www.commentcamarche.net\/contents\/web\/webdesign.php3\" target=\"_blank\" rel=\"noopener\">http:\/\/www.commentcamarche.net\/contents\/web\/webdesign.php3<br \/>\n<\/a><a href=\"http:\/\/ergonomie-web.studiovitamine.com\/couleur-web,362,fr.html\" target=\"_blank\" rel=\"noopener\">http:\/\/ergonomie-web.studiovitamine.com\/couleur-web,362,fr.html<br \/>\nhttp:\/\/fr.locita.com\/technologie-2\/web\/infographie-la-signification-des-couleurs-des-logos-de-marques\/<br \/>\n<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Que ce soit pour un designer\/webmaster d\u00e9butant ou pour une entreprise qui r\u00e9dige son cahier des charges, le choix des couleurs d&rsquo;un site web, d&rsquo;un flyer, d&rsquo;une carte de visite, d&rsquo;une affiche ou d&rsquo;une plaquette est un exercice d\u00e9cisif et central, tant sur le plan de l&rsquo;ergonomie et de l&rsquo;exp\u00e9rience utilisateur que sur celui du [&hellip;]<\/p>\n","protected":false},"author":17,"featured_media":625,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[],"class_list":["post-620","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphisme"],"_links":{"self":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/620","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/comments?post=620"}],"version-history":[{"count":3,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/620\/revisions"}],"predecessor-version":[{"id":4068,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/posts\/620\/revisions\/4068"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/media\/625"}],"wp:attachment":[{"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/media?parent=620"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/categories?post=620"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tulipemedia.com\/en\/wp-json\/wp\/v2\/tags?post=620"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}