{"id":6298,"date":"2023-10-16T18:11:39","date_gmt":"2023-10-16T16:11:39","guid":{"rendered":"https:\/\/graphizm.fr\/greta\/?p=6298"},"modified":"2025-11-16T22:24:51","modified_gmt":"2025-11-16T21:24:51","slug":"theorie-des-couleurs","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/com-crea\/theorie-des-couleurs\/","title":{"rendered":"La th\u00e9orie des couleurs"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/theorie-des-couleurs\/#Preambule\" >Pr\u00e9ambule<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/theorie-des-couleurs\/#La_theorie_des_couleurs_et_de_leur_harmonie\" >La th\u00e9orie des couleurs et de leur harmonie<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/theorie-des-couleurs\/#Les_outils_bases_sur_la_theorie_des_couleurs\" >Les outils bas\u00e9s sur la th\u00e9orie des couleurs<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/theorie-des-couleurs\/#Un_remede_a_la_theorie_des_couleurs\" >Un rem\u00e8de \u00e0 la th\u00e9orie des couleurs<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Preambule\"><\/span>Pr\u00e9ambule<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Vous trouverez sur le Web et dans de nombreux livres (voire dans tous les livres traitant de design graphique&#8230;) des explications plus ou moins d\u00e9taill\u00e9es sur la th\u00e9orie des couleurs. Le concept est facile \u00e0 comprendre mais <strong>son application pratique en webdesign n\u00e9cessite un \u00e9norme travail de correction<\/strong> !<\/p>\n\n\n\n<p>La th\u00e9orie des couleurs ne permet pas de r\u00e9gler les probl\u00e8mes de contraste et donc de lisibilit\u00e9 des textes. Elle ne r\u00e9sout pas non plus les probl\u00e8mes de coh\u00e9rence symbolique des couleurs d&rsquo;un nuancier. Alors \u00e0 quoi sert-elle&nbsp;? Je vous le dis d&#8217;embl\u00e9e&nbsp;: <strong>elle ne sert \u00e0 rien<\/strong>&#8230; mais comme tout le monde en parle, et que vous \u00eates sens\u00e9s la conna\u00eetre, je vais vous en parler bri\u00e8vement. Et je vais aussi vous prouver son inutilit\u00e9 (&#8230; <strong>du moins en webdesign<\/strong>)&nbsp;!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_theorie_des_couleurs_et_de_leur_harmonie\"><\/span>La th\u00e9orie des couleurs et de leur harmonie<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>J&rsquo;ai s\u00e9lectionn\u00e9 deux sites pour vous permettre d&rsquo;en apprendre un peu plus sur la th\u00e9orie des couleurs. Prenez le temps d&rsquo;examiner de quoi il est question et ce qu&rsquo;il nous est propos\u00e9 de faire pour cr\u00e9er des nuanciers harmonieux.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/visualdsgn.fr\/comprendre-cercle-chromatique-itten\/\" target=\"_blank\">https:\/\/visualdsgn.fr\/comprendre-cercle-chromatique-itten\/<\/a>&nbsp;&lt;\u2013 Comprendre le cercle chromatique d\u2019Itten<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.canva.com\/fr_fr\/decouvrir\/cercle-chromatique\/\" target=\"_blank\">https:\/\/www.canva.com\/fr_fr\/decouvrir\/cercle-chromatique\/<\/a>&nbsp;&lt;\u2013 Comment utiliser le cercle chromatique<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"509\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/harmonies-theoriques.png\" alt=\"\" class=\"wp-image-5724\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/harmonies-theoriques.png 650w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/harmonies-theoriques-600x470.png 600w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><figcaption class=\"wp-element-caption\">Image extraite du site&nbsp;<a href=\"https:\/\/fr.wix.com\/blog\/2016\/08\/01\/la-theorie-des-couleurs-appliquee-a-votre-site-internet\" target=\"_blank\" rel=\"noreferrer noopener\">wix.com<\/a><\/figcaption><\/figure>\n\n\n\n<p>La planche ci-dessus montre quels sont les types d&rsquo;accords color\u00e9s r\u00e9alisable en utilisant un cercle chromatique.<\/p>\n\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00e9l\u00e9chargez puis convertissez en niveaux de gris l&rsquo;image pr\u00e9sent\u00e9e plus haut.<\/strong> \u00c9valuez \u00e0 l&rsquo;\u0153il nu le nombre de couleurs ayant approximativement la m\u00eame valeur (m\u00eame luminosit\u00e9) dans les accords propos\u00e9s (couleurs plac\u00e9e dans les cercles, aux sommets des figures g\u00e9om\u00e9triques). <strong>Que constatez-vous&nbsp;?<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Je vous rappelle qu&rsquo;<strong>un des imp\u00e9ratifs auquel doit r\u00e9pondre un webdesigner est la lisibilit\u00e9 des textes pr\u00e9sent\u00e9s \u00e0 l&rsquo;\u00e9cran<\/strong>. Si des couleurs du nuancier qu&rsquo;il choisit ont la m\u00eame valeur (luminosit\u00e9) \u2014 voire une luminosit\u00e9 voisine \u2014 il ne peut les utiliser pour pr\u00e9senter du texte. Il peut les utiliser pour les images du site&#8230; mais il y a toutes les chances qu&rsquo;il ait besoin de les assombrir ou de les \u00e9claircir pour qu&rsquo;on distingue quelque chose dans ces images&nbsp;!<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Un designer n&rsquo;a pas besoin d&rsquo;accord color\u00e9 (&#8230; une palette de couleurs harmonieuses), il a besoin de <strong>couleurs qui fonctionnent les unes avec les autres pour garantir la visibilit\u00e9 des contenus<\/strong> mis en page.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_outils_bases_sur_la_theorie_des_couleurs\"><\/span>Les outils bas\u00e9s sur la th\u00e9orie des couleurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.canva.com\/colors\/color-wheel\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.canva.com\/colors\/color-wheel\/<\/a>\u00a0<br>\u2014 Roue des couleurs de Canva<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/color.adobe.com\/fr\/create\/color-wheel\" target=\"_blank\">https:\/\/color.adobe.com\/fr\/create\/color-wheel<\/a>&nbsp;<br>\u2014 Roue chromatique Adobe Color<\/li>\n<\/ul>\n\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utilisez la roue chromatique Adobe Color pour cr\u00e9er un nuancier<\/strong> (ou th\u00e8me color\u00e9, selon la terminologie d&rsquo;Adobe). Passez votre \u00e9cran en niveaux de gris ou <strong>faites une capture d&rsquo;\u00e9cran que vous convertirez ensuite en niveaux de gris<\/strong>. Constatez-vous la m\u00eame chose que lors de l&rsquo;exercice pr\u00e9c\u00e9dent&nbsp;?<\/li>\n\n\n\n<li>Vous ferez les <strong>m\u00eames constats en utilisant la roue des couleurs de Canva<\/strong>. Vous les ferez d&rsquo;autant plus rapidement que son fonctionnement est plus rudimentaire que celle d&rsquo;Adobe. On dirait que <strong>tout est fait pour que les valeurs des couleurs soient les plus proches possibles<\/strong> ! Allez vers le centre de la roue&nbsp;: plus vous approchez du centre plus les couleurs se rapprochent de la valeur du gris neutre. \u00c9claircissez ou assombrissez les couleurs en utilisant le cercle externe&nbsp;: plus vous forcez dans un sens ou dans l&rsquo;autre, plus les couleurs obtenues ont une valeur proche&nbsp;!<\/li>\n<\/ul>\n\n\n\n<p>Mes remarques concernant la roue des couleurs de Canva concernent son utilisation non personnalis\u00e9e. En effet, chaque couleur peut \u00eatre \u00e9dit\u00e9e et personnalis\u00e9e. Dans le cas d&rsquo;une personnalisation des couleurs d&rsquo;une palette, quels sont les objectifs vis\u00e9s par cette personnalisation&nbsp;? Ces objectifs ont-ils un rapport avec la th\u00e9orie des couleurs telle qu&rsquo;elle est pr\u00e9sent\u00e9e le plus souvent&nbsp;? Y aurait-il des crit\u00e8res d&rsquo;harmonie que peu d&rsquo;experts mentionnent et qui ne sont pas impl\u00e9ment\u00e9s dans les outils de cr\u00e9ations de nuanciers&nbsp;?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"has-text-align-left has-background-background-color has-background\">Les palettes de couleurs issues des outils bas\u00e9s sur la th\u00e9orie des couleurs <strong>ne sont pas utilisables \u00e0 l&rsquo;\u00e9tat brut en webdesign<\/strong> (voire m\u00eame en print-design)&nbsp;!<\/p>\n<\/blockquote>\n\n\n\n<p class=\"has-accent-background-color has-background\">Pourquoi encourager l&rsquo;utilisation d&rsquo;outils pr\u00e9sent\u00e9s comme une aide pour cr\u00e9er des <strong>nuanciers qui, dans la majorit\u00e9 des cas vont entra\u00eener des probl\u00e8mes<\/strong> de visibilit\u00e9 et de lisibilit\u00e9 s&rsquo;ils ne sont pas totalement modifi\u00e9s ou presque&nbsp;?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Un_remede_a_la_theorie_des_couleurs\"><\/span>Un rem\u00e8de \u00e0 la th\u00e9orie des couleurs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Remettons les priorit\u00e9s dans le bon ordre. Un designer graphique ou un webdesigner doit penser la couleur en termes de <strong>fonctionnalit\u00e9<\/strong> (visibilit\u00e9 et lisibilit\u00e9), en termes de <strong>symbolique<\/strong> (culturelle et sectorielle) et enfin en terme d&rsquo;<strong>impact \u00e9motionnel<\/strong>.<\/p>\n\n\n\n<p>\u279c&nbsp;<strong>Le choix de couleurs fonctionnelles d\u00e9pend du ratio de contraste entre  chaque paire de couleurs du nuancier choisi.<\/strong> Les outils \u00e0 utiliser sont ceux qui permettent de mesure ce ratio de contraste ou ceux qui proposent des couleurs respectant telle ou telle norme d&rsquo;accessibilit\u00e9.<\/p>\n\n\n\n<p>\u279c&nbsp;<strong>Le choix de couleurs coh\u00e9rentes sur le plan symbolique d\u00e9pend de l&rsquo;\u00e9tude des codes chromatiques en usage<\/strong> <strong>dans le contexte culturel du public cible<\/strong>. Plus pr\u00e9cis\u00e9ment encore, ce choix d\u00e9pend de l&rsquo;\u00e9tude des codes chromatiques en usage dans le secteur d&rsquo;activit\u00e9 du public cible.<\/p>\n\n\n\n<p>\u279c&nbsp;<strong>Le choix de couleurs ayant un impact \u00e9motionnel appropri\u00e9 d\u00e9pend de l&rsquo;objectif de communication vis\u00e9.<\/strong> S&rsquo;agit-il de choquer, d&rsquo;apaiser, de stimuler, de faciliter la m\u00e9morisation, la concentration, l&rsquo;action&nbsp;?<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Aucun outil ne peut effectuer ces choix chromatiques de mani\u00e8re m\u00e9canique. Il se peut cependant qu&rsquo;une intelligence artificielle convenablement questionn\u00e9e apporte des r\u00e9ponses pertinentes. Il faudra toutefois \u00e9valuer le degr\u00e9 de pertinence des propositions de l&rsquo;IA. Il faudra donc disposer de crit\u00e8re d&rsquo;\u00e9valuations&#8230; autrement dit avoir fait les observations et les analyses requises au pr\u00e9alable&nbsp;!<\/p>\n<\/blockquote>\n\n\n\n<p class=\"has-accent-background-color has-background\">Pour ce qui est de l&rsquo;harmonie des nuanciers utilis\u00e9s, vous constaterez tr\u00e8s vite que <strong>les nuanciers fonctionnels sont toujours harmonieux<\/strong>, en particulier quand il prennent en compte la r\u00e9partition quantitative des couleurs&nbsp;!<\/p>","protected":false},"excerpt":{"rendered":"<p>Pr\u00e9ambule Vous trouverez sur le Web et dans de nombreux livres (voire dans tous les livres traitant de design graphique&#8230;) des explications plus ou moins d\u00e9taill\u00e9es sur la th\u00e9orie des couleurs. Le concept est facile \u00e0 comprendre mais son application pratique en webdesign n\u00e9cessite un \u00e9norme travail de correction&nbsp;! La th\u00e9orie des couleurs ne [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,4],"tags":[],"class_list":["post-6298","post","type-post","status-publish","format-standard","hentry","category-cc1-cours","category-com-crea"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Sommaire Toggle Pr\u00e9ambuleLa th\u00e9orie des couleurs et de leur harmonieLes outils bas\u00e9s sur la th\u00e9orie des couleursUn rem\u00e8de \u00e0 la th\u00e9orie des couleurs Pr\u00e9ambule Vous trouverez sur le Web et dans de nombreux livres (voire dans tous les livres traitant de design graphique&#8230;) des explications plus ou moins d\u00e9taill\u00e9es sur la th\u00e9orie des couleurs. Le concept est facile \u00e0 comprendre mais son application pratique en webdesign n\u00e9cessite un \u00e9norme travail de correction&nbsp;! La th\u00e9orie des couleurs ne permet pas de r\u00e9gler les probl\u00e8mes de contraste et donc de lisibilit\u00e9 des textes. Elle ne r\u00e9sout pas non plus les probl\u00e8mes\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/cc1-cours\/\" rel=\"category tag\">CC1-cours<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/com-crea\/\" rel=\"category tag\">Com-Cr\u00e9a<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/6298","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=6298"}],"version-history":[{"count":18,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/6298\/revisions"}],"predecessor-version":[{"id":7578,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/6298\/revisions\/7578"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=6298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=6298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=6298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}