{"id":266,"date":"2020-03-24T23:06:41","date_gmt":"2020-03-24T22:06:41","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=266"},"modified":"2025-11-16T22:36:12","modified_gmt":"2025-11-16T21:36:12","slug":"couleurs-design-graphique","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/","title":{"rendered":"Utiliser les couleurs en design graphique"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Ce cours est <strong>une liste de r\u00e9f\u00e9rences en ligne sur la couleur<\/strong>, compl\u00e9t\u00e9e par des exercices simples et quelques commentaires. Vous y trouverez des liens vers des outils incontournables, en particulier pour le choix des couleurs en webdesign.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 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' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#La_couleur_au_quotidien\" >La couleur au quotidien<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Le_lexique_de_la_couleur\" >Le lexique de la couleur<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Teinte_saturation_et_luminosite\" >Teinte, saturation et luminosit\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Un_concept_voisin_de_la_saturation_le_chroma_ou_la_chromaticite\" >Un concept voisin de la saturation&nbsp;: le chroma ou la chromaticit\u00e9<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#La_perception_de_la_couleur_et_les_normes_daccessibilite\" >La perception de la couleur et les normes d\u2019accessibilit\u00e9<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Discrimination_chromatique\" >Discrimination chromatique<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Simulation_des_troubles_de_la_vision_des_couleurs\" >Simulation des troubles de la vision des couleurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Perception_contextuelle_des_couleurs\" >Perception contextuelle 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-9\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#La_notation_informatique_de_la_couleur\" >La notation informatique de la couleur<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Les_modes_colorimetriques_et_les_syntheses_de_couleurs\" >Les modes colorim\u00e9triques et les synth\u00e8ses de couleurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#RGB_RGBa_et_notation_hexadecimale\" >RGB, RGBa et notation hexad\u00e9cimale<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#La_notation_HSL_et_ses_limites\" >La notation HSL et ses limites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Les_selecteurs-convertisseurs_de_couleurs\" >Les s\u00e9lecteurs-convertisseurs de couleurs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#La_notation_HSLuv_et_les_notations_dites_perceptives\" >La notation HSLuv et les notations dites perceptives<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Utilisation_de_la_couleur_en_communication_visuelle\" >Utilisation de la couleur en communication visuelle<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Utilisation_en_webdesign\" >Utilisation en webdesign<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Utilisation_en_design_imprime\" >Utilisation en design imprim\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Utilisation_en_design_projete\" >Utilisation en design projet\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Utilisation_en_design_plurimedia\" >Utilisation en design plurim\u00e9dia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Utilisation_en_peinture_et_illustration\" >Utilisation en peinture et illustration<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/graphizm.fr\/greta\/com-crea\/couleurs-design-graphique\/#Les_sites_generalistes_de_reference_sur_la_couleur\" >Les sites g\u00e9n\u00e9ralistes de r\u00e9f\u00e9rence sur la couleur<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_couleur_au_quotidien\"><\/span>La couleur au quotidien<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Un designer graphique est sans cesse confront\u00e9 \u00e0 la couleur. Son impact sur l&rsquo;utilisation des produits qu&rsquo;il r\u00e9alise est \u00c9NORME&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"COULEUR - Comprendre son importance\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/j9mxS74qxJk?list=PLR6EzMJBmCSL-KPS3ZZOjYA9MlkQjhtVq\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Dans cette vid\u00e9o, Pierre Appell, enseignant, peintre et musicien, pr\u00e9sente sans parole le r\u00f4le de la couleur et son importance dans le monde du design graphique et du marketing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Le_lexique_de_la_couleur\"><\/span>Le lexique de la couleur<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u279c&nbsp;<strong>Activit\u00e9 en pr\u00e9ambule<\/strong><br>Listez <strong>les termes que vous utilisez pour d\u00e9crire la couleur<\/strong> et ses variations. Ajoutez \u00e0 ces termes ceux que vous allez d\u00e9couvrir en consultant les sites mentionn\u00e9s ci-dessous.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/astucesdartiste.com\/valeur-tons-teintes-vocabulaire-couleur\/\" target=\"_blank\">https:\/\/astucesdartiste.com\/valeur-tons-teintes-vocabulaire-couleur\/<\/a> <br>\u2014  Tons, teintes, valeurs\u2026 : le vocabulaire de la couleur <strong>en peinture<\/strong><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.unesciencesouslarobe.com\/theorie-couleur-vocabulaire\/\" target=\"_blank\">https:\/\/www.unesciencesouslarobe.com\/theorie-couleur-vocabulaire\/<\/a>&nbsp;<br>\u2014 Le lexique de la couleur en <strong>stylisme<\/strong><\/li>\n\n\n\n<li><a href=\"https:\/\/www.jlphomedesign.com\/dossiers-infos\/lexique-de-la-couleur\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.jlphomedesign.com\/dossiers-infos\/lexique-de-la-couleur\/<\/a>&nbsp;<br>\u2014 Lexique de la couleur <strong>en architecture<\/strong><\/li>\n<\/ul>\n\n\n\n<p><strong>Attention&nbsp;:<\/strong> dans le dernier article mentionn\u00e9 ci-dessus, les d\u00e9finitions de la saturation et de la luminosit\u00e9 ne font pas consensus&nbsp;!<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Il est n\u00e9cessaire de clarifier le sens des termes que nous utilisons. Qu&rsquo;est ce qu&rsquo;une couleur assourdie, une couleur ternie, une couleur amortie, une couleur rompue, une couleur rabattue, une teinte d\u00e9satur\u00e9e, une couleur dominante, une couleur tonique, un cama\u00efeu de couleurs, etc. ?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Teinte_saturation_et_luminosite\"><\/span>Teinte, saturation et luminosit\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La couleur se d\u00e9finit le plus simplement par 3 param\u00e8tres faciles \u00e0 diff\u00e9rencier et \u00e0 percevoir&nbsp;: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>la <strong>teinte<\/strong> ou <strong>tonalit\u00e9<\/strong> (bleu turquoise, rouge orang\u00e9, jaune citron, vert bouteille, etc.)<\/li>\n\n\n\n<li>la <strong>valeur<\/strong> ou <strong>luminosit\u00e9<\/strong> (couleur tr\u00e8s sombre, couleur fonc\u00e9e, couleur claire, couleur pastel, blanc color\u00e9, etc)<\/li>\n\n\n\n<li>la <strong>saturation<\/strong> ou <strong>intensit\u00e9<\/strong> (couleur vive, couleur pure, couleur ternie ou amortie, couleur assourdie, gris color\u00e9, etc.)<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"COULEUR - Comprendre sa physiologie\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/E4J-lSY6Q24?list=PLR6EzMJBmCSL-KPS3ZZOjYA9MlkQjhtVq\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Dans cette vid\u00e9o Pierre Appell pr\u00e9sente les <strong>variations de teinte, de valeur et de saturation dans la peinture digitale<\/strong>.<\/p>\n\n\n\n<p><em>Dans notre pratique du design graphique <strong>nous \u00e9largirons le concept de palette<\/strong> tel qu&rsquo;il l&rsquo;envisage ici, nous rapprochant davantage de l&rsquo;ensemble des couleurs pr\u00e9sentes sur la palette d&rsquo;un peintre, au sens propre du terme \u201cpalette\u201d (le support sur lequel le peintre dispose toutes les couleurs qu&rsquo;il utilise pour peindre un sujet).<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Un sch\u00e9ma de synth\u00e8se sur les variations de la couleur<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"777\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur-1024x777.jpg\" alt=\"\" class=\"wp-image-6209\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur-1024x777.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur-600x455.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur-768x583.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur-1536x1165.jpg 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur-1200x910.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/variations-couleur.jpg 1645w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Un_concept_voisin_de_la_saturation_le_chroma_ou_la_chromaticite\"><\/span>Un concept voisin de la saturation&nbsp;: le chroma ou la chromaticit\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/munsell.com\/color-blog\/difference-chroma-saturation\/\">https:\/\/munsell.com\/color-blog\/difference-chroma-saturation\/<\/a><br>\u2014 Article en anglais assez d\u00e9taill\u00e9 sur la diff\u00e9rence entre chromaticit\u00e9 et saturation<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/graphizm.fr\/com-crea\/images-couleurs\/saturation-vs-chroma.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><br>Sur l\u2019illustration ci-dessus, extraite du&nbsp;<a rel=\"noreferrer noopener\" href=\"http:\/\/www.andrewwerth.com\/color\/\" target=\"_blank\">s\u00e9lecteur d\u2019andrewwerth.com<\/a>&nbsp;, <strong>dans quelle direction s\u2019\u00e9chelonne la luminosit\u00e9&nbsp;?<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>L\u2019\u00e9chelle de variation de la chromaticit\u00e9 varie entre une couleur donn\u00e9e (plus ou moins lumineuse et satur\u00e9e) et son \u00e9quivalent sur une \u00e9chelle de gris. Autrement dit, <strong>toutes les couleurs pr\u00e9sentes sur le m\u00eame niveau (\u00e9chelon horizontal) d&rsquo;une \u00e9chelle de chromaticit\u00e9 ont toutes la m\u00eame valeur<\/strong> (le m\u00eame degr\u00e9 de luminosit\u00e9).<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\">Le syst\u00e8me de Munsell (syst\u00e8me HVC, Hue \u2013 Value \u2013 Chroma)<\/h4>\n\n\n\n<p>Les planches visibles dans le s\u00e9lecteur de couleurs <a rel=\"noreferrer noopener\" href=\"http:\/\/www.andrewwerth.com\/color\/\" target=\"_blank\">d\u2019andrewwerth.com<\/a>&nbsp; sont construites sur la base du syst\u00e8me de Munsell.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"http:\/\/www.graxx.ca\/Munsell1.aspx\" target=\"_blank\">http:\/\/www.graxx.ca\/Munsell1.aspx<\/a>&nbsp;<br>\u2014 Pr\u00e9sentation du syst\u00e8me de Munsell en fran\u00e7ais.<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/munsell.com\/color-blog\/conical-spiral-color-harmony\/\" target=\"_blank\">https:\/\/munsell.com\/color-blog\/conical-spiral-color-harmony\/<\/a>&nbsp;<br>\u2014 Pr\u00e9sentation du syst\u00e8me de Munsell en anglais<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/munsell-system-1024x1024.png\" alt=\"\" class=\"wp-image-5723\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/munsell-system-1024x1024.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/munsell-system-600x600.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/munsell-system-150x150.png 150w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/munsell-system-768x768.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/munsell-system.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u279c&nbsp;Vous rencontrerez souvent le sch\u00e9ma ci-dessus sous une forme dans laquelle <strong>l&rsquo;auteur assimile chromaticit\u00e9 et saturation<\/strong> (exemple ci-dessous). Cette assimilation importe peu pour notre compr\u00e9hension de l&rsquo;articulation entre teinte, valeur et luminosit\u00e9.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"450\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/Munsell-couleurs-3-dimensions.jpg\" alt=\"\" class=\"wp-image-6087\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/Munsell-couleurs-3-dimensions.jpg 450w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/Munsell-couleurs-3-dimensions-150x150.jpg 150w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">L&rsquo;image ci-dessus est issue d\u2019un article publi\u00e9 <a rel=\"noreferrer noopener\" href=\"https:\/\/www.unesciencesouslarobe.com\/tout-savoir-sur-analyse-couleur-colorimetrie\/\" data-type=\"link\" data-id=\"https:\/\/www.unesciencesouslarobe.com\/tout-savoir-sur-analyse-couleur-colorimetrie\/\" target=\"_blank\">unesciencesouslarobe.com<\/a><\/p>\n\n\n\n<p>Les sch\u00e9mas pr\u00e9c\u00e9dent illustrent tr\u00e8s bien le dispositif \u00e0 partir duquel se construit <strong>un arbre de Munsell<\/strong>. Cet arbre nous permet de visualiser concr\u00e8tement les faits suivants&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Toutes les couleurs pures n&rsquo;ont pas la m\u00eame valeur ou luminosit\u00e9.<\/li>\n\n\n\n<li>Plusieurs couleurs, de m\u00eame teinte ou non, peuvent avoir la m\u00eame valeur.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"745\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/munsell-color-tree.jpg\" alt=\"\" class=\"wp-image-6094\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/munsell-color-tree.jpg 800w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/munsell-color-tree-600x559.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2020\/03\/munsell-color-tree-768x715.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-center\">L&rsquo;image ci-dessus est issue d&rsquo;un article du site <a href=\"https:\/\/programmingdesignsystems.com\/color\/a-short-history-of-color-theory\/\" data-type=\"link\" data-id=\"https:\/\/programmingdesignsystems.com\/color\/a-short-history-of-color-theory\/\">programmingdesignsystem.com<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_perception_de_la_couleur_et_les_normes_daccessibilite\"><\/span>La perception de la couleur et les normes d\u2019accessibilit\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Discrimination_chromatique\"><\/span>Discrimination chromatique<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><br>Faites avant tout le<strong>&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.xrite.com\/hue-test\" target=\"_blank\">test de discrimination chromatique<\/a><\/strong>&nbsp;propos\u00e9 par le site de X-Rite. Si vous constatez une difficult\u00e9 \u00e0 distinguer certaines nuances, refaites le test une seconde fois. <strong>Si les difficult\u00e9s persistent n&rsquo;h\u00e9sitez pas \u00e0 consulter un sp\u00e9cialiste<\/strong> pour identifier plus pr\u00e9cis\u00e9ment votre trouble de la vision.<\/p>\n\n\n\n<p>Il est indispensable de situer votre perception des couleurs par rapport \u00e0 la majorit\u00e9 des utilisateurs des produits color\u00e9s que vous allez concevoir en tant que designer graphique. <strong>Plusieurs graphistes et illustrateurs sont daltoniens<\/strong> (exemple de <a rel=\"noreferrer noopener\" href=\"http:\/\/www.morlon-creation.com\/index.html\" data-type=\"link\" data-id=\"http:\/\/www.morlon-creation.com\/index.html\" target=\"_blank\">Lo\u00efc<\/a> qui en tire m\u00eame <a href=\"http:\/\/daltonien.free.fr\/daltonien\/article.php3?id_article=134\" data-type=\"link\" data-id=\"http:\/\/daltonien.free.fr\/daltonien\/article.php3?id_article=134\">quelques avantages<\/a> !).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"648\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/test-discrimination-chromatique-1024x648.png\" alt=\"\" class=\"wp-image-5718\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/test-discrimination-chromatique-1024x648.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/test-discrimination-chromatique-600x379.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/test-discrimination-chromatique-768x486.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/test-discrimination-chromatique.png 1050w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u279c&nbsp;<strong>Plus de d\u00e9tails en ligne<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/studiobenziv.wordpress.com\/2015\/10\/25\/tester-sa-vision-des-couleurs\/\" target=\"_blank\">https:\/\/studiobenziv.wordpress.com\/2015\/10\/25\/tester-sa-vision-des-couleurs\/<\/a>&nbsp;<br>\u2014 <strong>Test de discrimination chromatique<\/strong> pr\u00e9sent\u00e9 avec quelques explications en fran\u00e7ais \ud83d\ude09<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.xrite.com\/fr-fr\/categories\/visual-assessment-tools\/fm-100-hue-test\" target=\"_blank\">https:\/\/www.xrite.com\/fr-fr\/categories\/visual-assessment-tools\/fm-100-hue-test<\/a>&nbsp;<br>\u2014 Explications d\u00e9taill\u00e9es (en anglais) sur le <strong>test de Farnsworth Munsell sous sa forme professionnelle<\/strong> (regardez la vid\u00e9o&nbsp;!).<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"http:\/\/daltonien.free.fr\/daltonien\/rubrique.php3?id_rubrique=4\" target=\"_blank\">http:\/\/daltonien.free.fr\/daltonien\/rubrique.php3?id_rubrique=4<\/a><br>\u2014 <strong>T\u00e9moignages de daltoniens<\/strong> sur leurs difficult\u00e9s au quotidien<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Simulation_des_troubles_de_la_vision_des_couleurs\"><\/span>Simulation des troubles de la vision des couleurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Voici des sites sur lesquels une personne ayant une vision normale des couleurs peut <strong>se rendre compte de<\/strong> <strong>la mani\u00e8re dont les personnes ayant des difficult\u00e9s \u00e0 percevoir toutes les couleurs voient les choses<\/strong>.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"http:\/\/hclwizard.org:3000\/cvdemulator\/\" target=\"_blank\" rel=\"noreferrer noopener\">http:\/\/hclwizard.org:3000\/cvdemulator\/<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/coolors.co\/c0bcb5-af5d63-ed474a\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/coolors.co\/c0bcb5-af5d63-ed474a<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Perception_contextuelle_des_couleurs\"><\/span>Perception contextuelle des couleurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>M\u00eame si nous distinguons tr\u00e8s bien les couleurs, <strong>plusieurs facteurs perturbent notre perception des couleurs<\/strong> dans l&rsquo;environnement o\u00f9 se trouvent les objets color\u00e9s observ\u00e9s. En prendre conscience vous conduira \u00e0 plus de rigueur dans les tests pr\u00e9c\u00e9dant la r\u00e9alisation de vos projets de communication.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Contrastes de couleurs<\/h4>\n\n\n\n<p><strong>Les couleurs voisines s&rsquo;influencent mutuellement<\/strong>. C&rsquo;est ce qui est expliqu\u00e9 dans la vid\u00e9o ci-dessous.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Les Couleurs 3&nbsp;: les Contrastes\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/FJX7SVq9cq8?list=PLZW60CL4fAIjRyDg2etFLFwK2LPn2_9_q\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">M\u00e9tam\u00e9risme<\/h4>\n\n\n\n<p>Deux couleurs per\u00e7ues identiques dans un contexte lumineux donn\u00e9 sont per\u00e7ues diff\u00e9rentes sous un autre \u00e9clairage. Cet effet se nomme <strong>le m\u00e9tam\u00e9risme<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"http:\/\/www.glosariografico.com\/metamerismo\" target=\"_blank\">http:\/\/www.glosariografico.com\/metamerismo<\/a><br>\u2014 Le m\u00e9tam\u00e9risme r\u00e9sum\u00e9 de mani\u00e8re graphique \u00e9l\u00e9mentaire<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Illusions d&rsquo;optique<\/h4>\n\n\n\n<p><strong>Notre cerveau nous joue des tours<\/strong>. Plusieurs illusions d&rsquo;optique nous permettent de nous en rendre compte. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/tpe-les-illusions-d-optique.webnode.fr\/different-types-dillusions\/illusions-de-couleurs\/\" target=\"_blank\">https:\/\/tpe-les-illusions-d-optique.webnode.fr\/different-types-dillusions\/illusions-de-couleurs\/<\/a><br>\u2014 Illusions d\u2019optique bas\u00e9es sur la perception contextuelle des couleurs.<\/li>\n\n\n\n<li><a href=\"https:\/\/tpe-illusions-optique.weebly.com\/c-leacutechiquier-dadelson.html\">https:\/\/tpe-illusions-optique.weebly.com\/c-leacutechiquier-dadelson.html<\/a><br>\u2014 Une page Web consacr\u00e9e \u00e0 l&rsquo;\u00e9chiquer d&rsquo;Adelson (image ci-dessous)<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"585\" height=\"481\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/echiquier-adelson.png\" alt=\"\" class=\"wp-image-6349\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-accent-background-color has-background\"><em>N&rsquo;h\u00e9sitez pas \u00e0 t\u00e9l\u00e9charger les images propos\u00e9es par les sites ci-dessus pour <strong>mesurer les couleurs indiqu\u00e9es comme identiques<\/strong> et vues comme diff\u00e9rentes&nbsp;!<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_notation_informatique_de_la_couleur\"><\/span>La notation informatique de la couleur<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_modes_colorimetriques_et_les_syntheses_de_couleurs\"><\/span>Les modes colorim\u00e9triques et les synth\u00e8ses de couleurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Le mode <strong>RVB<\/strong> s&rsquo;appuie sur la <strong>synth\u00e8se additive<\/strong> (on ajoute des rayonnements les uns aux autres pour obtenir du blanc, soit le maximum de lumi\u00e8re). Le mode <strong>CMJN<\/strong> s&rsquo;appuie sur la <strong>synth\u00e8se soustractive<\/strong> (on retire de la lumi\u00e8re en opacifiant le support pour obtenir du noir, soit le minimum de lumi\u00e8re).<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/rvb-cmjn-1024x538.jpg\" alt=\"\" class=\"wp-image-5719\" style=\"aspect-ratio:1.903345724907063;width:610px;height:auto\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/rvb-cmjn-1024x538.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/rvb-cmjn-600x315.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/rvb-cmjn-768x403.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/rvb-cmjn.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image provenant du site&nbsp;<a href=\"https:\/\/mitaki-design.com\/quelle-est-la-difference-entre-cmjn-et-rvb\/\" target=\"_blank\" rel=\"noreferrer noopener\">mitaki-design.com<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>L&rsquo;affichage num\u00e9rique des <strong>couleurs \u00e0 l&rsquo;\u00e9cran<\/strong> s&rsquo;appuie sur une synth\u00e8se additive par <strong>juxtaposition de pixels<\/strong> dont les 3 composants (luminophores) \u00e9mettent chacun un rayonnement plus ou moins intense de rouge, de vert et de bleu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"307\" height=\"158\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/pixel-ecran.png\" alt=\"\" class=\"wp-image-6250\"\/><figcaption class=\"wp-element-caption\">Image du site <a href=\"http:\/\/math.univ-lyon1.fr\/~deleglis\/LumiereCouleurPhoto.html\" data-type=\"link\" data-id=\"http:\/\/math.univ-lyon1.fr\/~deleglis\/LumiereCouleurPhoto.html\" target=\"_blank\" rel=\"noreferrer noopener\">math.univ-lyon1.fr<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>L&rsquo;impression en <strong>quadrichromie<\/strong> s&rsquo;appuie sur un m\u00e9lange de synth\u00e8se soustractive (pigments mix\u00e9s sur le papier) et de synth\u00e8se additive (rayonnements r\u00e9fl\u00e9chis m\u00e9lang\u00e9s au niveau perceptif) obtenu par <strong>superposition et juxtaposition de points de trames<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"713\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/orientation-trames-cmjn-1024x713.png\" alt=\"\" class=\"wp-image-6263\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/orientation-trames-cmjn-1024x713.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/orientation-trames-cmjn-600x418.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/orientation-trames-cmjn-768x535.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/orientation-trames-cmjn-1200x835.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/orientation-trames-cmjn.png 1231w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/physique.ostralo.net\/syntheses_couleurs\/\">https:\/\/physique.ostralo.net\/syntheses_couleurs\/<\/a><br>\u2014 animation simple pour <strong>diff\u00e9rencier synth\u00e8ses additive et soustractives<\/strong><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"http:\/\/www.optique-ingenieur.org\/fr\/cours\/OPI_fr_M07_C02\/co\/Contenu_05.html\" target=\"_blank\">http:\/\/www.optique-ingenieur.org\/fr\/cours\/OPI_fr_M07_C02\/co\/Contenu_05.html<\/a><br>\u2014 <strong>Pr\u00e9sentation de 3 m\u00e9langes ou synth\u00e8ses<\/strong> (additive, soustractive et autotypique)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/visualdsgn.fr\/rvb-cmjn-quelles-differences\/\" target=\"_blank\">https:\/\/visualdsgn.fr\/rvb-cmjn-quelles-differences\/<\/a><br>\u2014 RVB et CMJN&nbsp;: <strong>quelles diff\u00e9rences&nbsp;?<\/strong><\/li>\n\n\n\n<li><a href=\"http:\/\/jeromederieux.fr\/cmjn\/rvb-et-cmjn\/\">http:\/\/jeromederieux.fr\/cmjn\/rvb-et-cmjn\/<\/a>&nbsp;<br>\u2014 <strong>Reproduire les couleurs<\/strong> \u2013 Modes RVB et CMJN<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Les diff\u00e9rentes techniques de reproduction de la couleur ne couvrent pas toutes le m\u00eame champ de couleurs. Les techniques d&rsquo;impression utilisant des encres pigment\u00e9es couvrent les champs de couleurs les plus restreints.<\/p>\n<\/blockquote>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"439\" height=\"342\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/gamut.jpg\" alt=\"\" class=\"wp-image-6256\"\/><figcaption class=\"wp-element-caption\">Image du site<a href=\"https:\/\/www.icb-imprimerie.com\/le-gamut-cartographie-de-la-couleur\/\" data-type=\"link\" data-id=\"https:\/\/www.icb-imprimerie.com\/le-gamut-cartographie-de-la-couleur\/\" target=\"_blank\" rel=\"noreferrer noopener\"> icb-imprimerie.com<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"has-subtle-background-background-color has-background\"><em>Les conversions d&rsquo;un mode colorim\u00e9trique dans un autre doivent donc se faire avec <strong>beaucoup de prudence et de pr\u00e9cautions<\/strong>. Il en est de m\u00eame pour la validation \u00e0 l&rsquo;\u00e9cran de documents destin\u00e9s \u00e0 l&rsquo;impression (la restriction du champ des couleurs imprimable doit \u00eatre simul\u00e9e \u00e0 l&rsquo;\u00e9cran par le choix du mode colorim\u00e9trique appropri\u00e9).<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"RGB_RGBa_et_notation_hexadecimale\"><\/span>RGB, RGBa et notation hexad\u00e9cimale<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>La notation hexad\u00e9cimale est une notation \u201csimplifi\u00e9e\u201d de la notation RGB. La notation RGBa prend en compte la transparence (canal alpha). <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/colors\/colors_rgb.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/colors\/colors_rgb.asp<\/a><br>\u2014 Les <strong>curseurs RGB<\/strong> (de 0 \u00e0 255)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/colors\/colors_hexadecimal.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/colors\/colors_hexadecimal.asp<\/a><br>\u2014 Les <strong>curseurs RGB en hexad\u00e9cimal<\/strong> (de 00 \u00e0 FF)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/borderleft.com\/toolbox\/rrggbbaa\/\" target=\"_blank\">https:\/\/borderleft.com\/toolbox\/rrggbbaa\/<\/a><br>\u2014 L\u2019\u00e9quivalence entre l&rsquo;<strong>\u00e9chelle RVB<\/strong> et l&rsquo;<strong>\u00e9chelle h\u00e9xad\u00e9cimale<\/strong><\/li>\n\n\n\n<li><a href=\"https:\/\/borderleft.com\/toolbox\/gray\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/borderleft.com\/toolbox\/gray\/<\/a><br>\u2014 Une <strong>\u00e9chelle de niveaux de gris<\/strong> en RVB et en hexad\u00e9cimal<br><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Le syst\u00e8me de notation RVB (ou RGB) et le syst\u00e8me de notation hexad\u00e9cimal r\u00e9pondent au m\u00eame besoin&nbsp;: <strong>indiquer au syst\u00e8me informatique une valeur entre 0 et 255<\/strong> pour chaque canal de couleur primaire, en synth\u00e8se additive.<\/p>\n<\/blockquote>\n\n\n\n<p>\u279c&nbsp;<strong>Exercices<\/strong><br>Pour ceux qui souhaitent <strong>s\u2019entrainer \u00e0 manipuler les couleurs en mode RVB<\/strong> (ou RGB), il existe&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/anthonym1223\/pen\/wLVZQP\" target=\"_blank\">un jeu int\u00e9ressant sur CodePen<\/a>. Il s\u2019agit de deviner, parmi plusieurs couleurs, celle qui correspond aux param\u00e8tres affich\u00e9s. Un autre jeu fonctionne sur <strong>le m\u00eame principe avec les couleurs cod\u00e9es en hexad\u00e9cimal<\/strong> : <a href=\"https:\/\/codepen.io\/wheatup\/pen\/dygGQOO\" target=\"_blank\" rel=\"noreferrer noopener\">Guess a Color<\/a>.<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\"><strong>Les webdesigners utilisent principalement le syst\u00e8me HEXAD\u00c9CIMAL<\/strong> (notation sp\u00e9cifique du codage RVB) pour param\u00e9trer leurs feuilles de style. <strong>Les graphistes travaillant avec les imprimeurs privil\u00e9gient la notation CMJN<\/strong>, associ\u00e9e au mode colorim\u00e9trique des documents qu&rsquo;ils destinent \u00e0 l&rsquo;impression. Toutefois, plusieurs de leurs travaux \u00e9tant publi\u00e9s en ligne, <strong>ils utilisent aussi le codage RGB<\/strong>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Se souvenir du code hexad\u00e9cimal de quelques couleurs (gag&nbsp;!)<\/h4>\n\n\n\n<p>Le site <a rel=\"noreferrer noopener\" href=\"http:\/\/bada55.io\" target=\"_blank\">http:\/\/bada55.io<\/a> propose <strong>une liste de couleurs hexad\u00e9cimales dont le nom d\u00e9rive de leur codification informatique<\/strong>. Pour cela, l&rsquo;auteur du site utilise le code suivant pour transposer les chiffres en lettres&nbsp;:<\/p>\n\n\n\n<p class=\"has-text-align-center\">1 = <strong>I<\/strong> ou <strong>L<\/strong> \u2022 2 = <strong>R<\/strong> \u2022 3 = <strong>E<\/strong> \u2022 4 = <strong>A<\/strong> \u2022 5 = <strong>S<\/strong> \u2022 6 = <strong>G<\/strong> \u2022 7 = <strong>T<\/strong> \u2022 8 =\u201c<strong>ATE<\/strong>\u201d \u2022 9 = <strong>P<\/strong><br><em>&#8230; \u00e0 vrai dire, chacun peut adapter le code ou le d\u00e9tourner&nbsp;!<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"671\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-1024x671.png\" alt=\"\" class=\"wp-image-6147\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-1024x671.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-600x393.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-768x503.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-1536x1007.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-2048x1342.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-1200x786.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/bada55-1980x1297.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Attention&nbsp;: cette notation n&rsquo;a rien d&rsquo;officiel, <strong>c&rsquo;est un gag collaboratif<\/strong>, mis en ligne il y a plusieurs ann\u00e9es (et toujours en http non s\u00e9curis\u00e9&#8230;). Le plus amusant est que <strong>dans certains cas, le nom cod\u00e9 de la couleur et la couleur elle-m\u00eame collent plut\u00f4t bien<\/strong> (#e2071c &#8211; erotic, #907A70 &#8211; potato, #9a5720 &#8211; gastro, #acac1a &#8211; acacia, #ba6e15 &#8211; bagels)&nbsp;! Vous en rep\u00e8rerez plusieurs autres \ud83d\ude09<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">Ce codage humoristique ne doit pas \u00eatre confondu avec les <strong><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" target=\"_blank\">noms anglais normalis\u00e9s<\/a><\/strong> attribu\u00e9s \u00e0 quelques couleurs Web et pouvant \u00eatre utilis\u00e9s dans le param\u00e9trage CSS des couleurs d&rsquo;un site&nbsp;!<\/p>\n\n\n\n<p>Avouez tout de m\u00eame que, d\u00e9sormais, vous pourrez facilement <strong>coder en hexad\u00e9cimal le vert acacia<\/strong> : #acac1a&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.w3schools.com\/colors\/colors_hexadecimal.asp\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"658\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/vert-acacia-1024x658.png\" alt=\"\" class=\"wp-image-6286\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/vert-acacia-1024x658.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/vert-acacia-600x386.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/vert-acacia-768x494.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/vert-acacia-1536x987.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/vert-acacia-1200x771.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/vert-acacia.png 1736w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_notation_HSL_et_ses_limites\"><\/span>La notation HSL et ses limites<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pour faciliter le codage des couleurs RVB, les d\u00e9veloppeurs ont mis au point un syst\u00e8me faisant appel aux 3 param\u00e8tres de la couleur&nbsp;: la <strong>teinte<\/strong> (Hue), la <strong>saturation<\/strong> (Saturation) et la <strong>luminosit\u00e9 <\/strong>(Luminosity).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.w3schools.com\/colors\/colors_hsl.asp\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"673\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-240-100-60-1024x673.png\" alt=\"\" class=\"wp-image-6355\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-240-100-60-1024x673.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-240-100-60-600x394.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-240-100-60-768x505.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-240-100-60-1536x1009.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-240-100-60-1200x788.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-240-100-60.png 1708w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Normalis\u00e9 et reconnu par tous les navigateurs, ce <strong>syst\u00e8me de notation intuitif<\/strong> a \u00e9t\u00e9 tr\u00e8s appr\u00e9ci\u00e9 en son temps.<\/p>\n\n\n\n<p>Lorsque les normes d&rsquo;accessibilit\u00e9 ont vu le jour et qu&rsquo;il a fallu \u00e9tager les couleurs en tenant compte de leur ratio de contraste, HSL a vite montr\u00e9 ses limites&nbsp;! <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"388\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1-1024x388.jpg\" alt=\"\" class=\"wp-image-5720\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1-1024x388.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1-600x227.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1-768x291.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1-1536x582.jpg 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1-1200x455.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1-1980x750.jpg 1980w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-fail-2048x776-1.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Image extraite de l\u2019article \u201cUtiliser HSL pour vos couleurs\u201d, sur <a href=\"https:\/\/la-cascade.io\/articles\/utiliser-hsl-pour-vos-couleurs\" target=\"_blank\" rel=\"noreferrer noopener\">lacascade.io<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>\u279c&nbsp;<strong>Exercice<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>En utilisant le <a href=\"https:\/\/www.w3schools.com\/colors\/colors_hsl.asp\" data-type=\"link\" data-id=\"https:\/\/www.w3schools.com\/colors\/colors_hsl.asp\">calculateur HSL de w3schools.com<\/a>, comparez la luminosit\u00e9 per\u00e7ue d&rsquo;<strong>un bleu et d&rsquo;un jaune param\u00e9tr\u00e9s en HSL avec la m\u00eame valeur de luminosit\u00e9 et de saturation<\/strong>. Que constatez-vous&nbsp;? Comment expliquez-vous le succ\u00e8s rencontr\u00e9 par cette notation informatique des couleurs&nbsp;?<\/li>\n<\/ul>\n\n\n\n<p>Bien qu\u2019incoh\u00e9rent sur les plans perceptif et normatif, <strong>HSL a toujours des d\u00e9fenseurs<\/strong> convaincus&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.24joursdeweb.fr\/2018\/hsl-le-systeme-de-couleur-parfait-pour-le-web-design\/\" target=\"_blank\">https:\/\/www.24joursdeweb.fr\/2018\/hsl-le-systeme-de-couleur-parfait-pour-le-web-design\/<\/a><\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/iamvdo.me\/blog\/les-avantages-de-hsl-par-rapport-a-rgb\" target=\"_blank\">https:\/\/iamvdo.me\/blog\/les-avantages-de-hsl-par-rapport-a-rgb<\/a>&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_selecteurs-convertisseurs_de_couleurs\"><\/span>Les s\u00e9lecteurs-convertisseurs de couleurs<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>L&rsquo;existence de plusieurs syst\u00e8mes de notation informatique des couleurs pour les \u00e9crans n\u00e9cessite l&rsquo;usage de convertisseurs. En voici une liste (les formats de conversion disponibles sont indiqu\u00e9s sous chaque adresse).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"http:\/\/www.andrewwerth.com\/color\/\" target=\"_blank\">http:\/\/www.andrewwerth.com\/color\/<\/a>&nbsp;<br>\u2014 s\u00e9lecteur Munsell-rgb-hex<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/dmitrybaranovskiy.github.io\/raphael\/picker.html\" target=\"_blank\">https:\/\/dmitrybaranovskiy.github.io\/raphael\/picker.html<\/a>&nbsp;<br>\u2014 rgb, hsb, hsl, hexa,<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"http:\/\/pourpre.com\/colordb\/\" target=\"_blank\">http:\/\/pourpre.com\/colordb\/<\/a>&nbsp;<br>\u2014 hexa, rvb, cmj, tsl, tsv, cmjn, xyz, xyy, lab, lch<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/colors\/colors_converter.asp\" target=\"_blank\">https:\/\/www.w3schools.com\/colors\/colors_converter.asp<\/a>&nbsp;<br>\u2014 name, hexa, rgb, hsl, hwb, cmyk<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/hslpicker.com\/#83bd7f\" target=\"_blank\">https:\/\/hslpicker.com\/#83bd7f<\/a>&nbsp;<br>\u2014 hexa, rgba, hsla<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/convertacolor.com\/#\/hex\/AA9E85\" target=\"_blank\">https:\/\/convertacolor.com\/#\/hex\/AA9E85<\/a>&nbsp;<br>\u2014 hexa, rgb, hsl, cmyk<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/davidjohnstone.net\/lch-lab-colour-gradient-picker\" target=\"_blank\">https:\/\/davidjohnstone.net\/lch-lab-colour-gradient-picker<\/a>&nbsp;<br>\u2014 lab, lch, rgb, hsv, hsl, hexa<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/coolors.co\/c0bcb5-af5d63-ed474a\" target=\"_blank\">https:\/\/coolors.co\/c0bcb5-af5d63-ed474a<\/a>&nbsp;<br>\u2014 hexa, hsb, hsl, rgb, cmyk, lab<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/borderleft.com\/toolbox\/rgba\/\" target=\"_blank\">https:\/\/borderleft.com\/toolbox\/rgba\/<\/a>&nbsp;<br>\u2014 rgba, rgb<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/htmlcolorcodes.com\/fr\/\" target=\"_blank\">https:\/\/htmlcolorcodes.com\/fr\/<\/a><br>\u2014 hexa, rgb, hsl<\/li>\n<\/ul>\n\n\n\n<p>\u279c&nbsp;<strong>Exercices<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Essayez de <strong>param\u00e9trer un vert olive ou un bleu turquoise<\/strong> avec un s\u00e9lecteur CMJN, RVB ou h\u00e9xad\u00e9cimal et un s\u00e9lecteur HSL, HSV ou LCH (utilisez par exemple les s\u00e9lecteurs propos\u00e9s par&nbsp;<em><a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/colors\/colors_converter.asp\" target=\"_blank\">w3schools<\/a><\/em>. Avec quel outil et quel syst\u00e8me de couleur parvenez-vous le plus facilement \u00e0 param\u00e9trer la couleur que vous avez en t\u00eate&nbsp;?<\/li>\n\n\n\n<li><strong>V\u00e9rifiez la fiabilit\u00e9 des valeurs propos\u00e9es<\/strong> par les convertisseurs en croisant les conversions. Utilisez par exemple le s\u00e9lecteur&nbsp;<em><a rel=\"noreferrer noopener\" href=\"http:\/\/www.andrewwerth.com\/color\/\" target=\"_blank\">Munsell-rgb-hex<\/a><\/em>&nbsp;et v\u00e9rifiez la luminosit\u00e9 des couleurs d\u2019une m\u00eame \u00e9chelle de chromaticit\u00e9 dans le&nbsp;<em><a rel=\"noreferrer noopener\" href=\"https:\/\/www.hsluv.org\/\" target=\"_blank\">s\u00e9lecteur hexa-hsluv<\/a>.<\/em><\/li>\n\n\n\n<li>Notez, pour une m\u00eame couleur, les <strong>diff\u00e9rentes positions des curseurs dans les syst\u00e8mes de param\u00e9trage pr\u00e9sent\u00e9s<\/strong> dans l\u2019interface de l\u2019outil&nbsp;<em><a rel=\"noreferrer noopener\" href=\"https:\/\/davidjohnstone.net\/lch-lab-colour-gradient-picker\" target=\"_blank\">Lch and Lab colour and gradient picker<\/a><\/em>. Pour une m\u00eame couleur, notez par exemple les diff\u00e9rentes valeurs de Hue dans les diff\u00e9rents modes. Examinez \u00e9galement les valeurs de luminosit\u00e9 et de saturation.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-scaled.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-1024x608.jpg\" alt=\"\" class=\"wp-image-6380\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-1024x608.jpg 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-600x357.jpg 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-768x456.jpg 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-1536x913.jpg 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-2048x1217.jpg 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-1200x713.jpg 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/lch-and-lab-color-1980x1177.jpg 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">Le choix d&rsquo;un syst\u00e8me de notation des couleurs pour l&rsquo;\u00e9cran est souvent <strong>une question de pratique, individuelle ou sectorielle<\/strong>. Ce choix varie aussi en fonction des outils utilis\u00e9s et des r\u00e9sultats attendus. Vous avez peut-\u00eatre remarqu\u00e9 que les nuanciers g\u00e9n\u00e9r\u00e9s par <em><a rel=\"noreferrer noopener\" href=\"https:\/\/davidjohnstone.net\/lch-lab-colour-gradient-picker\" target=\"_blank\">Lch and Lab colour and gradient picker<\/a><\/em> ne sont pas constitu\u00e9s des m\u00eames couleurs suivant le mode de codage des couleurs&nbsp;!<\/p>\n\n\n\n<p> Nous allons voir maintenant un syst\u00e8me tr\u00e8s performant pour lequel il faudra utiliser le codage hexad\u00e9cimal des couleurs pour en exploiter les fonctionnalit\u00e9s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_notation_HSLuv_et_les_notations_dites_perceptives\"><\/span>La notation HSLuv et les notations dites perceptives<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-1024x584.png\" alt=\"\" class=\"wp-image-6372\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-1024x584.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-600x342.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-768x438.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-1536x876.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-2048x1168.png 2048w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-1200x684.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsluv-1980x1129.png 1980w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.hsluv.org\/\" target=\"_blank\">https:\/\/www.hsluv.org\/<\/a> est l&rsquo;adresse du site d&rsquo;<strong>un nouveau syst\u00e8me de notation de la couleur<\/strong>. Il n&rsquo;est pas encore normalis\u00e9 et il n\u00e9cessite l&rsquo;int\u00e9gration d&rsquo;un script JS pour que sa notation soit prise en compte par les navigateurs. Toutefois, <strong>ce syst\u00e8me est beaucoup plus coh\u00e9rent que le syst\u00e8me HSL<\/strong>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\">\u201c<em>HSLuv is a&nbsp;<strong>human-friendly<\/strong>&nbsp;alternative to&nbsp;HSL<\/em>\u201d. En fran\u00e7ais&nbsp;: \u201cHSLuv est une alternative humaine \u00e0 HSL\u201d ! Autrement dit, <strong>HSLuv prend en compte la perception humaine de la couleur<\/strong>, de telle sorte que 2 couleurs cod\u00e9es avec le m\u00eame pourcentage de luminosit\u00e9 sont vraiment per\u00e7ue comme ayant la m\u00eame luminosit\u00e9&nbsp;!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Comparatifs des syst\u00e8mes HSLuv et HSL<\/h4>\n\n\n\n<p>Dans le tableau ci-dessous, toutes les couleurs et tous les gris sont cod\u00e9s avec <strong>une luminosit\u00e9 fix\u00e9 \u00e0 60%<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"931\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb-1024x931.png\" alt=\"\" class=\"wp-image-5721\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb-1024x931.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb-600x545.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb-768x698.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb-1536x1396.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb-1200x1090.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb-1980x1799.png 1980w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/hsl-vs-rgb.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\u279c&nbsp;<strong>Plus de d\u00e9tails en ligne<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.boronine.com\/2012\/03\/26\/Color-Spaces-for-Human-Beings\/\" target=\"_blank\">https:\/\/www.boronine.com\/2012\/03\/26\/Color-Spaces-for-Human-Beings\/<\/a><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Un syst\u00e8me adapt\u00e9 \u00e0 notre perception \u2014 comme HSLuv \u2014 nous donne des <strong>informations fiables sur la teinte, la saturation et la luminosit\u00e9<\/strong> d\u2019une couleur<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilisation_de_la_couleur_en_communication_visuelle\"><\/span>Utilisation de la couleur en communication visuelle<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilisation_en_webdesign\"><\/span>Utilisation en webdesign<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Outils utiles<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible\/\" target=\"_blank\">https:\/\/stephaniewalter.design\/fr\/blog\/accessibilite-et-couleurs-outils-et-ressources-pour-concevoir-des-produits-accessible\/<\/a>&nbsp;<br>\u2014 Site de ressources sur l\u2019accessibilit\u00e9 et les couleurs<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Conseils pratiques<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/stories\/2018\/12\/19\/choosing-colors-for-web-design-a-practical-ui-color-application-guide\" target=\"_blank\">https:\/\/dribbble.com\/stories\/2018\/12\/19\/choosing-colors-for-web-design-a-practical-ui-color-application-guide<\/a>&nbsp;<br>\u2014 R\u00e9partir les couleurs selon la r\u00e8gle 60-30-10 et utiliser les gris<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"471\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10-1024x471.png\" alt=\"\" class=\"wp-image-5726\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10-1024x471.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10-600x276.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10-768x353.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10-1536x706.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10-1200x551.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10-1980x910.png 1980w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/quantitatif-60-30-10.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Palettes de couleurs pour le Web pr\u00e9sent\u00e9es en situation<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.happyhues.co\/palettes\/2\" target=\"_blank\">https:\/\/www.happyhues.co\/palettes\/2<\/a>&nbsp;<br>\u2014 Une palette pour le texte et une autre pour l\u2019image<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"550\" src=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context-1024x550.png\" alt=\"\" class=\"wp-image-5727\" srcset=\"https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context-1024x550.png 1024w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context-600x322.png 600w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context-768x412.png 768w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context-1536x824.png 1536w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context-1200x644.png 1200w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context-1980x1063.png 1980w, https:\/\/graphizm.fr\/greta\/wp-content\/uploads\/2023\/10\/curated-colors-in-context.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilisation_en_design_imprime\"><\/span>Utilisation en design imprim\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.grapheine.com\/divers\/colorimetrie-rvb-cmjn-digital-print-strategies\" target=\"_blank\">https:\/\/www.grapheine.com\/divers\/colorimetrie-rvb-cmjn-digital-print-strategies<\/a>&nbsp;<br>\u2014 Branding et colorim\u00e9trie&nbsp;: La strat\u00e9gie du \u201cRVB First\u201d<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.pcgprint.com\/fr\/blog-rvb-cmjn-pantone\/\" target=\"_blank\">https:\/\/www.pcgprint.com\/fr\/blog-rvb-cmjn-pantone\/<\/a>&nbsp;<br>\u2014 Diff\u00e9rences entre RVB, CMJK et Pantone<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilisation_en_design_projete\"><\/span>Utilisation en design projet\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/graphizm.fr\/couleurs\/couleurs-design-graphique\/#0\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/graphizm.fr\/couleurs\/couleurs-design-graphique\/#0<\/a><br>\u2014 Exemple de <strong>diaporama Web<\/strong> utilisant un nuancier de 3 couleurs fonctionnelles respectant la norme d&rsquo;accessibilit\u00e9 AA<\/li>\n<\/ul>\n\n\n\n<p>Pour choisir une couleur moyenne pr\u00e9sentant un contraste optimal sur le blanc et sur le noir, r\u00e9f\u00e9rez vous au document <strong><a href=\"https:\/\/graphizm.fr\/fcs\/couleurs-moyennes\/\" target=\"_blank\" rel=\"noreferrer noopener\">Nuanciers accessibles en 3 couleurs<\/a><\/strong>. Vous pouvez utiliser un nuancier fonctionnel par rubrique voire un nuancier par diapositive&#8230; L&rsquo;essentiel est <strong>que vos textes et vos images puissent se voir<\/strong> !<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Proposition perfectible<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.slidescarnival.com\/12-custom-color-palettes-for-powerpoint-slides-that-work\/17950\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.slidescarnival.com\/12-custom-color-palettes-for-powerpoint-slides-that-work\/17950<\/a>&nbsp;(les images exemples ne s&rsquo;affichent pas mais vous pouvez les voir sur le PDF t\u00e9l\u00e9chargeable ci-dessous).<\/li>\n\n\n\n<li><a href=\"https:\/\/www.slidescarnival.com\/wp-content\/uploads\/2021\/02\/How-to-pick-the-best-colors-for-your-presentation-SlidesCarnival.pdf\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.slidescarnival.com\/wp-content\/uploads\/2021\/02\/How-to-pick-the-best-colors-for-your-presentation-SlidesCarnival.pdf<\/a><br>\u2014 12 palettes fonctionnelles pour la pr\u00e9sentation visuelle propos\u00e9es par slidescarnival.com<\/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>V\u00e9rifiez le contraste de luminosit\u00e9<\/strong> entre les couleurs propos\u00e9es par&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.slidescarnival.com\/12-custom-color-palettes-for-powerpoint-slides-that-work\/17950\" target=\"_blank\">slidescarnival.com<\/a>. Qu\u2019en concluez-vous&nbsp;?<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Prendre en compte la r\u00e9partition quantitative des couleurs ne suffit pas&nbsp;! <strong>La pr\u00e9sentation visuelle n\u00e9cessite de prendre en compte la norme AAA Large<\/strong> (ou AA a minima&#8230;) pour garantir une bonne visibilit\u00e9 des textes dans les conditions de projection sur \u00e9crans blancs opaques.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilisation_en_design_plurimedia\"><\/span>Utilisation en design plurim\u00e9dia<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/99designs.fr\/logo-design\/business-of-color\" target=\"_blank\">https:\/\/99designs.fr\/logo-design\/business-of-color<\/a>&nbsp;<br>\u2014 Utilisation des couleurs dans les logos<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.pourpasunrond.fr\/associe-les-couleurs\/\" target=\"_blank\">https:\/\/www.pourpasunrond.fr\/associe-les-couleurs\/<\/a>&nbsp;<br>\u2014 Associe les couleurs pour trouver la combinaison qui conviendra \u00e0 tes cr\u00e9ations<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilisation_en_peinture_et_illustration\"><\/span>Utilisation en peinture et illustration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=BqXq_f8Oscw\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=BqXq_f8Oscw<\/a>&nbsp;<br>\u2014 Vid\u00e9o&nbsp;: Couleurs: harmonies color\u00e9es<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/patrick-06.fr\/la-peinture\/accords-de-couleurs\/\" target=\"_blank\">https:\/\/patrick-06.fr\/la-peinture\/accords-de-couleurs\/<\/a>&nbsp;<br>\u2014 L\u2019harmonie des couleurs en peinture<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.clipstudio.net\/comment-dessiner\/archives\/161403\" target=\"_blank\">https:\/\/www.clipstudio.net\/comment-dessiner\/archives\/161403<\/a><br>\u2014 Th\u00e9orie sur la couleur pour les illustrations num\u00e9riques<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/dciner.fr\/category\/dessin-colore\/\" target=\"_blank\">https:\/\/dciner.fr\/category\/dessin-colore\/<\/a><br>\u2014&nbsp;Dessiner en couleur<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_sites_generalistes_de_reference_sur_la_couleur\"><\/span>Les sites g\u00e9n\u00e9ralistes de r\u00e9f\u00e9rence sur la couleur<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.wikiwand.com\/fr\/Portail:Couleurs\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.wikiwand.com\/fr\/Portail:Couleurs<\/a>&nbsp;<br>\u2014 Le portail des couleurs sur Wikipedia (via Wikiwand)<\/li>\n\n\n\n<li><a rel=\"noreferrer noopener\" href=\"http:\/\/handprint.com\/HP\/WCL\/color7.html#evolution\" target=\"_blank\">http:\/\/handprint.com\/HP\/WCL\/color7.html#evolution<\/a>&nbsp;<br>\u2014 site en anglais d\u00e9taillant l\u2019\u00e9volution des syst\u00e8mes de repr\u00e9sentation et de notation de la couleur (niveau avanc\u00e9)<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Ce cours est une liste de r\u00e9f\u00e9rences en ligne sur la couleur, compl\u00e9t\u00e9e par des exercices simples et quelques commentaires. Vous y trouverez des liens vers des outils incontournables, en particulier pour le choix des couleurs en webdesign. La couleur au quotidien Un designer graphique est sans cesse confront\u00e9 \u00e0 la couleur. Son impact sur [&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-266","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>Ce cours est une liste de r\u00e9f\u00e9rences en ligne sur la couleur, compl\u00e9t\u00e9e par des exercices simples et quelques commentaires. Vous y trouverez des liens vers des outils incontournables, en particulier pour le choix des couleurs en webdesign. Sommaire Toggle La couleur au quotidienLe lexique de la couleurTeinte, saturation et luminosit\u00e9Un concept voisin de la saturation&nbsp;: le chroma ou la chromaticit\u00e9La perception de la couleur et les normes d\u2019accessibilit\u00e9Discrimination chromatiqueSimulation des troubles de la vision des couleursPerception contextuelle des couleursLa notation informatique de la couleurLes modes colorim\u00e9triques et les synth\u00e8ses de couleursRGB, RGBa et notation hexad\u00e9cimaleLa notation HSL et ses\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\/266","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=266"}],"version-history":[{"count":336,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":7581,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/266\/revisions\/7581"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}