{"id":126817,"date":"2025-03-02T10:01:16","date_gmt":"2025-03-02T08:01:16","guid":{"rendered":"https:\/\/elementor.com\/blog\/comment-changer-la-couleur-du-texte-en-css-html\/"},"modified":"2025-11-15T23:26:08","modified_gmt":"2025-11-15T21:26:08","slug":"comment-changer-la-couleur-du-texte-en-css-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/","title":{"rendered":"Comment changer la couleur du texte en CSS &amp; HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"126817\" class=\"elementor elementor-126817 elementor-94582\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-639d699c e-flex e-con-boxed e-con e-parent\" data-id=\"639d699c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef2fdfa elementor-widget elementor-widget-text-editor\" data-id=\"ef2fdfa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Voici \u00e0 quoi cela ressemble dans un code CSS de base :<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-262f1a6 elementor-widget elementor-widget-code-highlight\" data-id=\"262f1a6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {  \/* Targets all paragraph elements *\/\r\n  color: red; \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71a4d49f elementor-widget elementor-widget-text-editor\" data-id=\"71a4d49f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Dans cet exemple, tout le texte des paragraphes dans votre HTML serait chang\u00e9 en rouge. Bien entendu, le rouge n&rsquo;est que le commencement ! Il existe une multitude de fa\u00e7ons d&rsquo;exprimer les valeurs de couleur en <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"19348\">CSS<\/a>, vous offrant une vaste palette avec laquelle exp\u00e9rimenter.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Valeurs de couleur : Votre arc-en-ciel textuel <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Noms de couleurs <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le CSS offre une collection de noms de couleurs de base pour les couleurs les plus courantes. Pensez \u00e0 \u00ab red, \u00bb \u00ab blue, \u00bb \u00ab yellow, \u00bb \u00ab green, \u00bb et ainsi de suite. Ceux-ci sont simples \u00e0 m\u00e9moriser, ce qui en fait un excellent point de d\u00e9part pour les d\u00e9butants. Voici un exemple :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5e4b17d elementor-widget elementor-widget-code-highlight\" data-id=\"5e4b17d\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 { \r\n  color: orange; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e5c9e5 elementor-widget elementor-widget-text-editor\" data-id=\"6e5c9e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Le principal avantage des noms de couleurs est leur simplicit\u00e9. Cependant, vous \u00eates limit\u00e9 \u00e0 un ensemble relativement restreint de couleurs, qui peut ne pas toujours correspondre pr\u00e9cis\u00e9ment \u00e0 votre vision de conception.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Codes de couleur hexad\u00e9cimaux <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Les codes de couleur hexad\u00e9cimaux, commen\u00e7ant par un \u00ab # \u00bb, offrent une palette de couleurs consid\u00e9rablement \u00e9largie. Ils se composent de six caract\u00e8res repr\u00e9sentant les composantes Rouge, Vert et Bleu (RVB) d&rsquo;une couleur. Par exemple, #FF0000 est du rouge pur, tandis que #008000 est un vert profond.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab9a954 elementor-widget elementor-widget-code-highlight\" data-id=\"ab9a954\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np { \r\n  color: #F26522; \/* A warm orange tone *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d94393 elementor-widget elementor-widget-text-editor\" data-id=\"7d94393\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les codes hexad\u00e9cimaux vous accordent pr\u00e9cision et millions de possibilit\u00e9s de couleurs. De nombreux outils de conception et <a href=\"https:\/\/elementor.com\/blog\/fr\/les-7-meilleurs-createurs-de-sites-web-sans-code-en-year\/\" data-wpil-monitor-id=\"10312\">sites web proposent des s\u00e9lecteurs de couleurs qui produisent des codes hexad\u00e9cimaux<\/a>, facilitant ainsi la recherche de la nuance exacte que vous souhaitez. Le seul l\u00e9ger inconv\u00e9nient est qu&rsquo;ils peuvent \u00eatre moins intuitifs \u00e0 lire au premier coup d&rsquo;\u0153il par rapport aux noms de couleurs.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Couleurs RVB et RVBA<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">RVB offre encore une autre fa\u00e7on de d\u00e9finir les couleurs bas\u00e9e sur leurs composantes Rouge, Vert et Bleu. Dans la fonction rgb(), vous sp\u00e9cifiez l&rsquo;intensit\u00e9 de chaque composante sur une \u00e9chelle de 0 \u00e0 255. Par exemple, rgb(255, 0, 0) produit le m\u00eame rouge pur que #FF0000.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9234c6b elementor-widget elementor-widget-code-highlight\" data-id=\"9234c6b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 {\r\n  color: rgb(128, 0, 128); \/* A rich purple *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-17e2f36 elementor-widget elementor-widget-text-editor\" data-id=\"17e2f36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">La v\u00e9ritable puissance du RVB vient avec l&rsquo;ajout d&rsquo;un canal alpha, vous donnant le RVBA. Ce \u00ab A \u00bb signifie \u00ab alpha \u00bb et contr\u00f4le la transparence. Les valeurs RVBA sont exprim\u00e9es sous la forme rgba(R, V, B, A), o\u00f9 la valeur alpha varie de 0 (enti\u00e8rement transparent) \u00e0 1 (enti\u00e8rement opaque). Voici comment cr\u00e9er une superposition de texte semi-transparente :<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6bdc5c elementor-widget elementor-widget-code-highlight\" data-id=\"c6bdc5c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.overlay-text {\r\n   color: rgba(0, 0, 0, 0.6); \/* Black text with 60% opacity *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90baaa4 elementor-widget elementor-widget-text-editor\" data-id=\"90baaa4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">RVBA est id\u00e9al pour superposer du texte sur des <a href=\"https:\/\/elementor.com\/blog\/fr\/propriete-css-background-image-comment-inclure-une-image-darriere-plan-css\/\" data-wpil-monitor-id=\"10313\">images ou des arri\u00e8re-plans<\/a>, vous donnant un contr\u00f4le fin sur la visibilit\u00e9 des \u00e9l\u00e9ments sous-jacents.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Couleurs TSL et TSLA<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">TSL (Teinte, Saturation, Luminosit\u00e9) est un mod\u00e8le de couleur qui s&rsquo;aligne plus \u00e9troitement sur la fa\u00e7on dont les humains per\u00e7oivent la couleur. Il s&rsquo;exprime sous la forme hsl(T, S, L) :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Teinte<\/b><span style=\"font-weight: 400;\"> est le type de couleur sur un cercle chromatique de 360 degr\u00e9s (0 est rouge, 120 est vert, 240 est bleu, etc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Saturation :<\/b><span style=\"font-weight: 400;\"> L&rsquo;intensit\u00e9 de la couleur (0% est gris, 100% est la couleur pleine)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Luminosit\u00e9 :<\/b><span style=\"font-weight: 400;\"> La luminosit\u00e9 ou l&rsquo;obscurit\u00e9 de la couleur (0% est noir, 100% est blanc)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">TSLA ajoute simplement un canal alpha pour la transparence, tout comme RVBA.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81e8390 elementor-widget elementor-widget-code-highlight\" data-id=\"81e8390\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np { \r\n  color: hsl(30, 100%, 50%); \/* A vibrant orange *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2def1d6 elementor-widget elementor-widget-text-editor\" data-id=\"2def1d6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">TSL peut parfois \u00eatre plus intuitif \u00e0 saisir pour les d\u00e9butants. Il vous permet de penser en termes de types de couleurs et de vivacit\u00e9 plut\u00f4t que de m\u00e9langer des composantes rouges, vertes et bleues individuelles.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">M\u00e9thodes pour changer la couleur du texte<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Il existe trois m\u00e9thodes principales pour changer <a href=\"https:\/\/elementor.com\/blog\/fr\/comment-centrer-le-texte-en-css-alignement-de-texte-en-css-et-html\/\" data-wpil-monitor-id=\"10314\">la couleur du texte en utilisant CSS<\/a>. Chaque technique offre diff\u00e9rents niveaux de contr\u00f4le et de sp\u00e9cificit\u00e9, vous permettant de cibler pr\u00e9cis\u00e9ment les \u00e9l\u00e9ments que vous souhaitez styliser.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Styles en ligne <\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/fr\/comment-ajouter-du-css-a-du-html-css-en-ligne-interne-et-externe\/\" data-wpil-monitor-id=\"10315\">Les styles en ligne sont appliqu\u00e9s directement dans la balise d&rsquo;ouverture d&rsquo;un \u00e9l\u00e9ment HTML<\/a> en utilisant l&rsquo;attribut style. Changeons la couleur d&rsquo;un paragraphe sp\u00e9cifique :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d224de elementor-widget elementor-widget-code-highlight\" data-id=\"6d224de\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<p style=\"color: blue;\">This paragraph will have blue text.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-77333ba elementor-widget elementor-widget-text-editor\" data-id=\"77333ba\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les styles en ligne sont pratiques pour des changements rapides et ponctuels d&rsquo;\u00e9l\u00e9ments individuels. Cependant, ils pr\u00e9sentent quelques inconv\u00e9nients :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Encombrement :<\/b><span style=\"font-weight: 400;\"> Ils rendent votre HTML plus difficile \u00e0 lire et \u00e0 maintenir.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sp\u00e9cificit\u00e9 :<\/b><span style=\"font-weight: 400;\"> Les styles en ligne pr\u00e9vaudront sur d&rsquo;autres r\u00e8gles CSS plus g\u00e9n\u00e9rales, conduisant parfois \u00e0 des probl\u00e8mes de style inattendus.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Par cons\u00e9quent, il est g\u00e9n\u00e9ralement pr\u00e9f\u00e9rable d&rsquo;utiliser les styles en ligne avec parcimonie et uniquement lorsque cela est absolument n\u00e9cessaire.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Feuilles de style internes  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les feuilles de style internes utilisent les balises &lt;style&gt; plac\u00e9es dans la section &lt;head&gt; de votre document HTML. Cela vous permet de d\u00e9finir des styles pour des \u00e9l\u00e9ments HTML sp\u00e9cifiques :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-484c07c elementor-widget elementor-widget-code-highlight\" data-id=\"484c07c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n  <style>\r\n    h1 { \r\n      color: #009933; \/* A dark green *\/\r\n    }\r\n\r\n    p {\r\n      color: #333333; \/* A dark gray *\/\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9262856 elementor-widget elementor-widget-text-editor\" data-id=\"9262856\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les feuilles de style internes sont excellentes pour styliser une page web enti\u00e8re. Elles offrent les avantages suivants :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Centralisation :<\/b><span style=\"font-weight: 400;\"> Maintient vos r\u00e8gles de style en un seul endroit au sein du HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sp\u00e9cificit\u00e9 :<\/b><span style=\"font-weight: 400;\"> Les styles internes pr\u00e9valent sur la plupart des styles par d\u00e9faut du navigateur mais sont moins sp\u00e9cifiques que les styles en ligne.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Feuilles de style externes  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les feuilles de style externes sont l&rsquo;approche recommand\u00e9e pour g\u00e9rer le CSS de votre site web. Vous cr\u00e9ez un fichier .css s\u00e9par\u00e9 et <a href=\"https:\/\/elementor.com\/blog\/fr\/liens-html-hyperliens-syntaxe-code-attributs-exemples\/\" data-wpil-monitor-id=\"10316\">le liez \u00e0 votre document HTML<\/a> en utilisant la balise &lt;link&gt; dans la section &lt;head&gt; :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16b3bed elementor-widget elementor-widget-code-highlight\" data-id=\"16b3bed\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-markup line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-markup\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n  <link rel=\"stylesheet\" href=\"styles.css\"> \r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-deb161a elementor-widget elementor-widget-text-editor\" data-id=\"deb161a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>styles.css :<\/b><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe5a131 elementor-widget elementor-widget-code-highlight\" data-id=\"fe5a131\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  color: #222222; \/* Sets default text color for the page *\/\r\n}\r\n\r\nh1 {\r\n  color: #CD5C5C; \/* Indian red for headings *\/\r\n}  \r\n\r\na { \r\n  color: #0000EE; \/* Standard blue for links *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52364e2 elementor-widget elementor-widget-text-editor\" data-id=\"52364e2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les feuilles de style externes offrent plusieurs avantages cl\u00e9s :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Maintenabilit\u00e9 :<\/b><span style=\"font-weight: 400;\"> S\u00e9parer le CSS du <a href=\"https:\/\/elementor.com\/blog\/fr\/comment-ajouter-de-lespace-en-html-codes-conseils-guide-ultime\/\" data-wpil-monitor-id=\"10317\">HTML maintient votre code<\/a> organis\u00e9 et plus facile \u00e0 mettre \u00e0 jour.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>R\u00e9utilisabilit\u00e9 :<\/b><span style=\"font-weight: 400;\"> Une seule feuille de style peut \u00eatre appliqu\u00e9e \u00e0 plusieurs pages HTML, assurant une apparence coh\u00e9rente sur l&rsquo;ensemble de votre site web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pr\u00e9processeurs :<\/b><span style=\"font-weight: 400;\"> Vous pouvez utiliser des pr\u00e9processeurs CSS avanc\u00e9s comme Sass ou Less pour rationaliser votre <a href=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2023\/09\/SSL.png\" data-wpil-monitor-id=\"10318\">d\u00e9veloppement<\/a> de feuilles de style (nous aborderons ce sujet dans un futur article !).<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Sp\u00e9cificit\u00e9 et h\u00e9ritage CSS  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Comprendre la sp\u00e9cificit\u00e9 et l&rsquo;h\u00e9ritage CSS est important pour \u00e9viter des changements de couleur de texte inattendus. La sp\u00e9cificit\u00e9 fait r\u00e9f\u00e9rence \u00e0 la mani\u00e8re dont CSS d\u00e9termine quelle r\u00e8gle pr\u00e9vaut lorsque plusieurs styles contradictoires existent pour un \u00e9l\u00e9ment. G\u00e9n\u00e9ralement, les s\u00e9lecteurs plus sp\u00e9cifiques (comme les ID) pr\u00e9vaudront sur les moins sp\u00e9cifiques (comme les balises HTML).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L&rsquo;h\u00e9ritage signifie que certaines <a href=\"https:\/\/elementor.com\/blog\/fr\/comment-souligner-du-texte-en-css-propriete-text-decoration-en-css\/\" data-wpil-monitor-id=\"10319\">propri\u00e9t\u00e9s CSS<\/a>, comme la couleur, sont transmises des \u00e9l\u00e9ments parents \u00e0 leurs \u00e9l\u00e9ments enfants. Cela signifie que si vous d\u00e9finissez une couleur de texte sur la balise &lt;body&gt;, tout le texte de la page h\u00e9ritera de cette couleur, \u00e0 moins qu&rsquo;elle ne soit remplac\u00e9e par des styles plus sp\u00e9cifiques.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Cibler des \u00e9l\u00e9ments sp\u00e9cifiques  <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Le CSS vous donne un contr\u00f4le pr\u00e9cis sur les \u00e9l\u00e9ments de texte \u00e0 styliser. Examinons les m\u00e9thodes de ciblage les plus courantes :<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Balises HTML<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La m\u00e9thode la plus simple consiste \u00e0 cibler les balises HTML g\u00e9n\u00e9riques. Cela appliquera votre changement de couleur \u00e0 tous les \u00e9l\u00e9ments de ce type dans votre page :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a11bf53 elementor-widget elementor-widget-code-highlight\" data-id=\"a11bf53\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {  \r\n  color: #9932CC; \/* Dark orchid for paragraphs *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b201c80 e-flex e-con-boxed e-con e-parent\" data-id=\"b201c80\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3e8bae9 elementor-widget elementor-widget-text-editor\" data-id=\"3e8bae9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Classes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les classes offrent une fa\u00e7on plus flexible d&rsquo;appliquer des styles de couleur de texte. Vous d\u00e9finissez une classe dans votre CSS, puis ajoutez l&rsquo;attribut de classe aux \u00e9l\u00e9ments HTML que vous souhaitez cibler :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ff1af3 elementor-widget elementor-widget-code-highlight\" data-id=\"7ff1af3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.highlight { \r\n  color: #FFD700; \/* A vibrant gold *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2e99b2b elementor-widget elementor-widget-code-highlight\" data-id=\"2e99b2b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p class=\"highlight\">This text will be highlighted in gold.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27dbeb3 elementor-widget elementor-widget-text-editor\" data-id=\"27dbeb3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les classes sont excellentes car :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>R\u00e9utilisabilit\u00e9 :<\/b><span style=\"font-weight: 400;\"> Vous pouvez appliquer la m\u00eame classe \u00e0 plusieurs \u00e9l\u00e9ments, assurant un style coh\u00e9rent.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Organisation :<\/b><span style=\"font-weight: 400;\"> <a href=\"https:\/\/elementor.com\/blog\/fr\/classes-css-selecteurs-styles-astuces-trucs-plus\/\" data-wpil-monitor-id=\"10320\">Les classes aident \u00e0 structurer votre CSS<\/a> et le rendent plus facile \u00e0 comprendre.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">ID  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les ID sont des identifiants uniques pour des \u00e9l\u00e9ments HTML sp\u00e9cifiques et utilisent l&rsquo;attribut id. Utilisez les ID avec parcimonie, car ils ont une tr\u00e8s haute sp\u00e9cificit\u00e9 qui peut remplacer d&rsquo;autres styles.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61483bd elementor-widget elementor-widget-code-highlight\" data-id=\"61483bd\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n#important-message { \r\n  color: red; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c50f2bf elementor-widget elementor-widget-code-highlight\" data-id=\"c50f2bf\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<p id=\"important-message\">This message will have red text.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e95a21 elementor-widget elementor-widget-text-editor\" data-id=\"6e95a21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les ID sont principalement utiles pour styliser des \u00e9l\u00e9ments uniques et distincts et trouvent souvent leur utilit\u00e9 dans les interactions JavaScript.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Changer la couleur du texte lors des interactions utilisateur<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Effets de survol  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La pseudo-classe :hover ajoute une touche sp\u00e9ciale \u00e0 votre site web, vous permettant de changer la couleur du texte lorsqu&rsquo;un utilisateur survole un \u00e9l\u00e9ment avec sa souris. C&rsquo;est une technique courante pour mettre en \u00e9vidence les <a href=\"https:\/\/elementor.com\/blog\/fr\/presentation-delementor-3-23-resultats-en-direct-boutons-flottants-lien-dans-la-bio-plus-encore\/\" data-wpil-monitor-id=\"10334\">liens ou les boutons<\/a> :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2072c38 elementor-widget elementor-widget-code-highlight\" data-id=\"2072c38\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:hover { \r\n  color: #EE82EE; \/* A playful violet for link hover *\/\r\n}\r\n\r\n.button:hover {\r\n    color: white; \/* White text on button hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b65521 elementor-widget elementor-widget-text-editor\" data-id=\"1b65521\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Les effets de survol fournissent un retour visuel, indiquant \u00e0 l&rsquo;utilisateur qu&rsquo;un \u00e9l\u00e9ment est interactif. Ils <a href=\"https:\/\/elementor.com\/blog\/fr\/ameliorer-les-performances-du-site-web-chez-spread-agency-avec-loptimiseur-dimages-delementor\/\" data-wpil-monitor-id=\"10335\">am\u00e9liorent la navigation et peuvent rendre votre site web<\/a> plus engageant.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Autres \u00e9tats  <\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le CSS offre des pseudo-classes suppl\u00e9mentaires pour styliser le texte en fonction de diff\u00e9rents \u00e9tats d&rsquo;interaction :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:active : Lorsqu&rsquo;un \u00e9l\u00e9ment est en train d&rsquo;\u00eatre cliqu\u00e9 ou tap\u00e9.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:visited : Pour <a href=\"https:\/\/elementor.com\/blog\/fr\/images-html-code-taille-liens-style-conseils-seo\/\" data-wpil-monitor-id=\"10321\">styliser les liens<\/a> que l&rsquo;utilisateur a d\u00e9j\u00e0 visit\u00e9s.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">:focus : Lorsqu&rsquo;un \u00e9l\u00e9ment (comme un champ de formulaire) a le focus du clavier.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Rendons les liens visit\u00e9s d&rsquo;une couleur moins satur\u00e9e :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fe69509 elementor-widget elementor-widget-code-highlight\" data-id=\"fe69509\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\na:visited {\r\n color:  #800080; \/* A muted purple for visited links *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b340d6a elementor-widget elementor-widget-text-editor\" data-id=\"b340d6a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Ces pseudo-classes vous donnent encore plus de contr\u00f4le sur la fa\u00e7on dont votre texte r\u00e9pond aux actions de l&rsquo;utilisateur, <a href=\"https:\/\/elementor.com\/blog\/how-osm-uses-additional-breakpoints-for-ux\/\" data-wpil-monitor-id=\"10322\">am\u00e9liorant davantage l&rsquo;exp\u00e9rience utilisateur<\/a>.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Accessibilit\u00e9 et contraste des couleurs  <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">L&rsquo;importance d&rsquo;un contraste suffisant<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Choisir des couleurs de texte et <a href=\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-darriere-plan-en-html\/\" data-wpil-monitor-id=\"10323\">d&rsquo;arri\u00e8re-plan<\/a> avec un contraste suffisant est essentiel pour rendre votre site web lisible pour tous, y compris les utilisateurs ayant des d\u00e9ficiences visuelles. Les Directives pour l&rsquo;accessibilit\u00e9 des contenus Web (WCAG) d\u00e9finissent des ratios de contraste minimaux afin de garantir la lisibilit\u00e9 de votre contenu.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Un contraste de couleurs insuffisant peut rendre le texte difficile, voire impossible \u00e0 lire, entra\u00eenant de la frustration et de l&rsquo;exclusion pour certains utilisateurs. En accordant la priorit\u00e9 au contraste, vous cr\u00e9ez une exp\u00e9rience en ligne plus accueillante et inclusive.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Simulateurs de daltonisme<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le daltonisme affecte une part significative de la population. Les simulateurs de daltonisme sont des outils pr\u00e9cieux qui vous aident \u00e0 visualiser comment votre site web appara\u00eet aux personnes pr\u00e9sentant diff\u00e9rents types de d\u00e9ficiences de la vision des couleurs. Plusieurs extensions de navigateur et outils en ligne existent \u00e0 cet effet, et <a href=\"https:\/\/elementor.com\/blog\/fr\/explorez-elementor-pro-conditions-daffichage-permissions-de-role-dans-le-gestionnaire-delements-et-plus-encore\/\" data-wpil-monitor-id=\"10336\">Elementor dispose \u00e9galement<\/a> d&rsquo;un simulateur de daltonisme int\u00e9gr\u00e9.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L&#8217;empathie joue un r\u00f4le cl\u00e9 dans <a href=\"https:\/\/elementor.com\/blog\/fr\/31-meilleures-polices-web-sures-pour-un-design-accessible\/\" data-wpil-monitor-id=\"10337\">la conception accessible<\/a>. Se mettre \u00e0 la place des utilisateurs ayant des capacit\u00e9s diff\u00e9rentes favorise une compr\u00e9hension plus approfondie de leurs besoins.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Ressources et outils<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Examinons quelques ressources utiles pour garantir l&rsquo;accessibilit\u00e9 de vos choix de couleurs :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>V\u00e9rificateurs de contraste :<\/b><span style=\"font-weight: 400;\"> Plusieurs outils en ligne (comme le v\u00e9rificateur de contraste de couleurs WebAIM : <\/span><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\"><span style=\"font-weight: 400;\">https:\/\/webaim.org\/resources\/contrastchecker\/<\/span><\/a><span style=\"font-weight: 400;\">) vous permettent de saisir vos couleurs de texte et d&rsquo;arri\u00e8re-plan et indiqueront si elles r\u00e9pondent aux exigences de contraste WCAG.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>G\u00e9n\u00e9rateurs de palettes de couleurs accessibles :<\/b><span style=\"font-weight: 400;\"> Des sites web comme Who Can Use : <a href=\"https:\/\/venngage.com\/tools\/accessible-color-palette-generator\">https:\/\/venngage.com\/tools\/accessible-color-palette-generator<\/a> vous aident \u00e0 cr\u00e9er des palettes de couleurs qui priorisent l&rsquo;accessibilit\u00e9 d\u00e8s le d\u00e9part.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Meilleures pratiques pour le choix des couleurs de texte<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">La lisibilit\u00e9 est essentielle<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Vos choix de couleurs de texte ne devraient jamais sacrifier la lisibilit\u00e9. Bien qu&rsquo;un <a href=\"https:\/\/elementor.com\/blog\/fr\/les-schemas-de-couleurs-complementaires-dans-la-conception-web-un-guide-complet\/\" data-wpil-monitor-id=\"10324\">sch\u00e9ma de couleurs<\/a> vif puisse \u00eatre attrayant, il n&rsquo;est utile que si vos utilisateurs peuvent lire le contenu. Voici ce qu&rsquo;il faut garder \u00e0 l&rsquo;esprit :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>L&rsquo;arri\u00e8re-plan est important :<\/b><span style=\"font-weight: 400;\"> La couleur du texte doit se d\u00e9marquer clairement de la couleur de l&rsquo;arri\u00e8re-plan. Utilisez toujours un v\u00e9rificateur de contraste pour le confirmer.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contraste \u00e9lev\u00e9 :<\/b><span style=\"font-weight: 400;\"> Visez des combinaisons \u00e0 fort contraste, en particulier pour le texte essentiel comme le corps du texte et les \u00e9tiquettes de navigation.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Image de marque et psychologie des couleurs<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les couleurs ont le pouvoir d&rsquo;\u00e9voquer des \u00e9motions et <a href=\"https:\/\/elementor.com\/blog\/introducing-new-ecommerce-design-capabilities\/\" data-wpil-monitor-id=\"10325\">d&rsquo;influencer fortement la perception de votre marque<\/a>. Consid\u00e9rons comment aligner vos couleurs de texte avec l&rsquo;objectif de votre site web :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Palette de marque :<\/b><span style=\"font-weight: 400;\"> Incorporez vos couleurs de marque existantes dans le style de votre texte pour promouvoir la reconnaissance de la marque et un aspect coh\u00e9rent.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>\u00c9motion :<\/b><span style=\"font-weight: 400;\"> Comprenez la psychologie des couleurs. Les couleurs chaudes (rouges, oranges, jaunes) transmettent l&rsquo;\u00e9nergie et l&rsquo;excitation, tandis que les couleurs plus froides (bleus, verts, violets) ont tendance \u00e0 \u00eatre plus apaisantes.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Hi\u00e9rarchie et emphase<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Utilisez la couleur pour cr\u00e9er une hi\u00e9rarchie visuelle claire sur vos pages. Cela aide \u00e0 guider l&rsquo;\u0153il de l&rsquo;utilisateur et signale l&rsquo;importance des diff\u00e9rents \u00e9l\u00e9ments textuels :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Titres :<\/b><span style=\"font-weight: 400;\"> Les titres fonctionnent souvent bien avec des couleurs plus audacieuses ou plus sombres pour se d\u00e9marquer du corps du texte.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Appels \u00e0 l&rsquo;action :<\/b><span style=\"font-weight: 400;\"> Faites ressortir les boutons et autres liens importants avec des couleurs contrastantes qui attirent l&rsquo;attention.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Subtilit\u00e9 :<\/b><span style=\"font-weight: 400;\"> Utilisez des <a href=\"https:\/\/elementor.com\/blog\/fr\/davantage-delementor-3-6-importation-exportation-amelioree-et-reorganisation-des-polices-et-couleurs-globales\/\" data-wpil-monitor-id=\"10326\">couleurs moins satur\u00e9es ou des tailles de police plus petites pour les \u00e9l\u00e9ments<\/a> textuels moins importants<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">N&rsquo;en faites pas trop<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Un peu de couleur suffit ! Voici pourquoi la simplicit\u00e9 est souvent pr\u00e9f\u00e9rable :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accablant :<\/b><span style=\"font-weight: 400;\"> Trop de couleurs peuvent rendre votre site web charg\u00e9 et difficile \u00e0 lire.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Coh\u00e9rence :<\/b><span style=\"font-weight: 400;\"> Une palette de couleurs limit\u00e9e et bien choisie cr\u00e9e un aspect plus harmonieux et raffin\u00e9.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">Elementor : Styliser le texte de mani\u00e8re intuitive<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Pr\u00e9sentation de l&rsquo;\u00e9diteur visuel Elementor<\/span><\/h3>\n<p><iframe title=\"Elementor - The Leading Platform for Web Creators\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/le72grP_Q6k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">La force principale d&rsquo;Elementor r\u00e9side dans son \u00e9diteur visuel drag-and-drop. Cet \u00e9diteur vous donne un contr\u00f4le en temps r\u00e9el sur <a href=\"https:\/\/elementor.com\/blog\/fr\/20-principes-de-design-de-site-web-que-tout-professionnel-du-web-devrait-connaitre\/\" data-wpil-monitor-id=\"10327\">la conception de votre site web<\/a>, y compris la couleur du texte, sans \u00e9crire une seule ligne de CSS (sauf si vous le souhaitez). Cette approche permet \u00e0 ceux qui n&rsquo;ont pas d&rsquo;exp\u00e9rience en codage de cr\u00e9er de beaux sites web riches en couleurs.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Contr\u00f4les de couleur de texte dans les widgets Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Presque tous les <a href=\"https:\/\/elementor.com\/blog\/fr\/presentation-delementor-3-10-nouveaux-elements-imbriques-lavenir-du-design-avec-les-widgets-elementor\/\" data-wpil-monitor-id=\"10328\">widgets Elementor<\/a> contenant du texte (titres, paragraphes, boutons, etc.) disposent de contr\u00f4les intuitifs de s\u00e9lection de couleur dans leurs options de style. Illustrons cela :<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u00e9lectionnez un widget :<\/b><span style=\"font-weight: 400;\"> Choisissez n&rsquo;importe quel widget bas\u00e9 sur du texte sur votre page.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Onglet de style :<\/b><span style=\"font-weight: 400;\"> Naviguez jusqu&rsquo;\u00e0 l&rsquo;onglet \u00ab Style \u00bb du widget dans le panneau d&rsquo;\u00e9dition Elementor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>S\u00e9lecteur de couleurs :<\/b><span style=\"font-weight: 400;\"> Localisez l&rsquo;option \u00ab Couleur du texte \u00bb et cliquez dessus pour r\u00e9v\u00e9ler un s\u00e9lecteur de couleurs convivial.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Choisissez librement :<\/b><span style=\"font-weight: 400;\"> Vous pouvez s\u00e9lectionner \u00e0 partir d&rsquo;une palette de couleurs, saisir des codes hexad\u00e9cimaux, ou utiliser l&rsquo;outil pipette pour <a href=\"https:\/\/elementor.com\/blog\/fr\/types-de-domaines-avantages-exemples-et-comment-trouver-votre-correspondance-parfaite\/\" data-wpil-monitor-id=\"10338\">faire correspondre parfaitement les couleurs existantes sur votre site web<\/a>.<\/span><\/li>\n<\/ol>\n<p><iframe title=\"Introducing Elementor AI Copilot\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/rWB2moi4XMw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Ce flux de travail rationalis\u00e9 acc\u00e9l\u00e8re consid\u00e9rablement votre exp\u00e9rimentation et mise en \u0153uvre des couleurs de texte.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Param\u00e8tres de style global<\/span><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/fr\/transformez-vos-designs-le-style-global-de-copilot-le-remplissage-generatif-lextension-dimage-et-les-ameliorations-de-wordpress\/\" data-wpil-monitor-id=\"10339\">Elementor offre des param\u00e8tres de style global<\/a> qui vous permettent de d\u00e9finir des couleurs par d\u00e9faut pour les titres, le corps du texte, les liens, et plus encore. Cela pr\u00e9sente plusieurs avantages :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Coh\u00e9rence :<\/b><span style=\"font-weight: 400;\"> Maintenez un aspect coh\u00e9rent sur l&rsquo;ensemble de votre site web avec facilit\u00e9.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gain de temps :<\/b><span style=\"font-weight: 400;\"> Modifiez les couleurs \u00e0 l&rsquo;\u00e9chelle du site en quelques clics au lieu d&rsquo;\u00e9diter des widgets individuels.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Capacit\u00e9s CSS personnalis\u00e9es<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Bien que les outils visuels d&rsquo;Elementor soient incroyablement puissants, vous pourriez vouloir les affiner avec du CSS personnalis\u00e9. <a href=\"https:\/\/elementor.com\/blog\/fr\/presentation-delementor-3-11-nouveau-widget-loop-carousel-pour-personnaliser-laffichage-de-vos-articles-ou-produits\/\" data-wpil-monitor-id=\"10340\">Elementor vous permet d&rsquo;ajouter du code<\/a> CSS personnalis\u00e9 directement aux widgets, aux pages, ou \u00e0 l&rsquo;\u00e9chelle du site, vous offrant ce niveau suppl\u00e9mentaire de contr\u00f4le lorsque n\u00e9cessaire.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Bonus : Techniques et outils avanc\u00e9s <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">D\u00e9grad\u00e9s de couleurs<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Les d\u00e9grad\u00e9s CSS vous permettent de cr\u00e9er des transitions douces entre plusieurs couleurs au sein de votre texte. Cela peut produire des effets accrocheurs et m\u00e9morables :<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f8f05d4 elementor-widget elementor-widget-code-highlight\" data-id=\"f8f05d4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh1 {\r\n  background: linear-gradient(to right, #FF0000, #FFA500, #FFFF00); \r\n  -webkit-background-clip: text;\r\n  -webkit-text-fill-color: transparent; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-43f3c71 elementor-widget elementor-widget-text-editor\" data-id=\"43f3c71\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Pour garantir l&rsquo;affichage des d\u00e9grad\u00e9s de couleurs dans votre texte, comme dans l&rsquo;exemple ci-dessus, vous aurez souvent besoin de pr\u00e9fixes sp\u00e9cifiques -webkit- pour la compatibilit\u00e9 entre diff\u00e9rents navigateurs.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Les d\u00e9grad\u00e9s offrent une opportunit\u00e9 unique d&rsquo;ajouter de la profondeur et de l&rsquo;int\u00e9r\u00eat visuel aux titres ou aux \u00e9l\u00e9ments d&rsquo;appel \u00e0 l&rsquo;action.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Ombres de texte et contours de texte<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ajoutons de la dimension \u00e0 votre texte :<\/span><\/p>\n<p><b>Ombres de texte (<\/b><span style=\"font-weight: 400;\">text-shadow<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Cr\u00e9ez des effets d&rsquo;ombre subtils derri\u00e8re votre texte, am\u00e9liorant la lisibilit\u00e9 sur certains arri\u00e8re-plans ou ajoutant une touche de style.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b65ee4 elementor-widget elementor-widget-code-highlight\" data-id=\"4b65ee4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\np {\r\n  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-023fb5b elementor-widget elementor-widget-text-editor\" data-id=\"023fb5b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Contours de texte (<\/b><span style=\"font-weight: 400;\">-webkit-text-stroke<\/span><b>)<\/b><span style=\"font-weight: 400;\"> Ajoutez des contours \u00e0 votre texte pour une emphase accrue ou une esth\u00e9tique plus audacieuse.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1294d6a elementor-widget elementor-widget-code-highlight\" data-id=\"1294d6a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nh2 {\r\n  -webkit-text-stroke: 1px black; \r\n  color: white; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee23aa4 elementor-widget elementor-widget-text-editor\" data-id=\"ee23aa4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Utilisez les ombres et les contours de texte avec discernement. La subtilit\u00e9 est souvent pr\u00e9f\u00e9rable, mais des effets audacieux peuvent briller dans des cas d&rsquo;utilisation sp\u00e9cifiques comme les grands titres d\u00e9coratifs.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Fonctions de couleur (si l&rsquo;espace le permet)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">CSS fournit des fonctions comme lighten(), darken(), saturate(), et d&rsquo;autres pour manipuler les couleurs \u00e0 la vol\u00e9e. Celles-ci sont particuli\u00e8rement pratiques dans les pr\u00e9processeurs comme Sass pour calculer dynamiquement des variations de couleur bas\u00e9es sur votre th\u00e8me de couleur.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6ecdf6 elementor-widget elementor-widget-code-highlight\" data-id=\"b6ecdf6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n\/* Example using the lighten() function *\/\r\nbutton:hover {\r\n    background-color: lighten(#006400, 10%); \/* Lightens the green by 10% on hover *\/\r\n }\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca62649 elementor-widget elementor-widget-text-editor\" data-id=\"ca62649\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2>140 noms de couleurs et valeurs hexad\u00e9cimales pris en charge par tous les navigateurs :<\/h2>\n\n<table border=\"1\" style=\"width:100%\">\n    <tr>\n        <th>Nom<\/th>\n        <th>Valeur CSS<\/th>\n        <th>D\u00e9mo en direct<\/th>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">AliceBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0F8FF')\">#F0F8FF<\/a><\/td>\n        <td style=\"background-color:#F0F8FF;\" id=\"demo1\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">AntiqueWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAEBD7')\">#FAEBD7<\/a><\/td>\n        <td style=\"background-color:#FAEBD7;\" id=\"demo2\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Aqua<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo3\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">Aquamarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFFD4')\">#7FFFD4<\/a><\/td>\n        <td style=\"background-color:#7FFFD4;\" id=\"demo4\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">Azure<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFFF')\">#F0FFFF<\/a><\/td>\n        <td style=\"background-color:#F0FFFF;\" id=\"demo5\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">Beige<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5DC')\">#F5F5DC<\/a><\/td>\n        <td style=\"background-color:#F5F5DC;\" id=\"demo6\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">Bisque<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4C4')\">#FFE4C4<\/a><\/td>\n        <td style=\"background-color:#FFE4C4;\" id=\"demo7\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">Black<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000000')\">#000000<\/a><\/td>\n        <td style=\"background-color:#000000;\" id=\"demo8\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">BlanchedAlmond<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEBCD')\">#FFEBCD<\/a><\/td>\n        <td style=\"background-color:#FFEBCD;\" id=\"demo9\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">Blue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000FF')\">#0000FF<\/a><\/td>\n        <td style=\"background-color:#0000FF;\" id=\"demo10\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">BlueViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8A2BE2')\">#8A2BE2<\/a><\/td>\n        <td style=\"background-color:#8A2BE2;\" id=\"demo11\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">Brown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A52A2A')\">#A52A2A<\/a><\/td>\n        <td style=\"background-color:#A52A2A;\" id=\"demo12\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">BurlyWood<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DEB887')\">#DEB887<\/a><\/td>\n        <td style=\"background-color:#DEB887;\" id=\"demo13\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">CadetBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#5F9EA0')\">#5F9EA0<\/a><\/td>\n        <td style=\"background-color:#5F9EA0;\" id=\"demo14\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">Chartreuse<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7FFF00')\">#7FFF00<\/a><\/td>\n        <td style=\"background-color:#7FFF00;\" id=\"demo15\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">Chocolate<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2691E')\">#D2691E<\/a><\/td>\n        <td style=\"background-color:#D2691E;\" id=\"demo16\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">Coral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF7F50')\">#FF7F50<\/a><\/td>\n        <td style=\"background-color:#FF7F50;\" id=\"demo17\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">CornflowerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6495ED')\">#6495ED<\/a><\/td>\n        <td style=\"background-color:#6495ED;\" id=\"demo18\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">Cornsilk<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF8DC')\">#FFF8DC<\/a><\/td>\n        <td style=\"background-color:#FFF8DC;\" id=\"demo19\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">Crimson<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DC143C')\">#DC143C<\/a><\/td>\n        <td style=\"background-color:#DC143C;\" id=\"demo20\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">Cyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FFFF')\">#00FFFF<\/a><\/td>\n        <td style=\"background-color:#00FFFF;\" id=\"demo21\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">DarkBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00008B')\">#00008B<\/a><\/td>\n        <td style=\"background-color:#00008B;\" id=\"demo22\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">DarkCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008B8B')\">#008B8B<\/a><\/td>\n        <td style=\"background-color:#008B8B;\" id=\"demo23\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">DarkGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B8860B')\">#B8860B<\/a><\/td>\n        <td style=\"background-color:#B8860B;\" id=\"demo24\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo25\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">DarkGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A9A9A9')\">#A9A9A9<\/a><\/td>\n        <td style=\"background-color:#A9A9A9;\" id=\"demo26\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">DarkGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#006400')\">#006400<\/a><\/td>\n        <td style=\"background-color:#006400;\" id=\"demo27\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">DarkKhaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BDB76B')\">#BDB76B<\/a><\/td>\n        <td style=\"background-color:#BDB76B;\" id=\"demo28\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">DarkMagenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B008B')\">#8B008B<\/a><\/td>\n        <td style=\"background-color:#8B008B;\" id=\"demo29\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">DarkOliveGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#556B2F')\">#556B2F<\/a><\/td>\n        <td style=\"background-color:#556B2F;\" id=\"demo30\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">DarkOrange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF8C00')\">#FF8C00<\/a><\/td>\n        <td style=\"background-color:#FF8C00;\" id=\"demo31\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">DarkOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9932CC')\">#9932CC<\/a><\/td>\n        <td style=\"background-color:#9932CC;\" id=\"demo32\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">DarkRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B0000')\">#8B0000<\/a><\/td>\n        <td style=\"background-color:#8B0000;\" id=\"demo33\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">DarkSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E9967A')\">#E9967A<\/a><\/td>\n        <td style=\"background-color:#E9967A;\" id=\"demo34\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">DarkSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8FBC8F')\">#8FBC8F<\/a><\/td>\n        <td style=\"background-color:#8FBC8F;\" id=\"demo35\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">DarkSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#483D8B')\">#483D8B<\/a><\/td>\n        <td style=\"background-color:#483D8B;\" id=\"demo36\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo37\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">DarkSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2F4F4F')\">#2F4F4F<\/a><\/td>\n        <td style=\"background-color:#2F4F4F;\" id=\"demo38\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">DarkTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00CED1')\">#00CED1<\/a><\/td>\n        <td style=\"background-color:#00CED1;\" id=\"demo39\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">DarkViolet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9400D3')\">#9400D3<\/a><\/td>\n        <td style=\"background-color:#9400D3;\" id=\"demo40\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">DeepPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF1493')\">#FF1493<\/a><\/td>\n        <td style=\"background-color:#FF1493;\" id=\"demo41\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">DeepSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00BFFF')\">#00BFFF<\/a><\/td>\n        <td style=\"background-color:#00BFFF;\" id=\"demo42\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo43\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">DimGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#696969')\">#696969<\/a><\/td>\n        <td style=\"background-color:#696969;\" id=\"demo44\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">DodgerBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#1E90FF')\">#1E90FF<\/a><\/td>\n        <td style=\"background-color:#1E90FF;\" id=\"demo45\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">FireBrick<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B22222')\">#B22222<\/a><\/td>\n        <td style=\"background-color:#B22222;\" id=\"demo46\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">FloralWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAF0')\">#FFFAF0<\/a><\/td>\n        <td style=\"background-color:#FFFAF0;\" id=\"demo47\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">ForestGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#228B22')\">#228B22<\/a><\/td>\n        <td style=\"background-color:#228B22;\" id=\"demo48\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Fuchsia<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo49\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">Gainsboro<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DCDCDC')\">#DCDCDC<\/a><\/td>\n        <td style=\"background-color:#DCDCDC;\" id=\"demo50\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">GhostWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F8F8FF')\">#F8F8FF<\/a><\/td>\n        <td style=\"background-color:#F8F8FF;\" id=\"demo51\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">Gold<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFD700')\">#FFD700<\/a><\/td>\n        <td style=\"background-color:#FFD700;\" id=\"demo52\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">GoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DAA520')\">#DAA520<\/a><\/td>\n        <td style=\"background-color:#DAA520;\" id=\"demo53\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Gray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo54\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">Grey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808080')\">#808080<\/a><\/td>\n        <td style=\"background-color:#808080;\" id=\"demo55\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">Green<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008000')\">#008000<\/a><\/td>\n        <td style=\"background-color:#008000;\" id=\"demo56\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">GreenYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADFF2F')\">#ADFF2F<\/a><\/td>\n        <td style=\"background-color:#ADFF2F;\" id=\"demo57\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">HoneyDew<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0FFF0')\">#F0FFF0<\/a><\/td>\n        <td style=\"background-color:#F0FFF0;\" id=\"demo58\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">HotPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF69B4')\">#FF69B4<\/a><\/td>\n        <td style=\"background-color:#FF69B4;\" id=\"demo59\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">IndianRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD5C5C')\">#CD5C5C<\/a><\/td>\n        <td style=\"background-color:#CD5C5C;\" id=\"demo60\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">Indigo<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4B0082')\">#4B0082<\/a><\/td>\n        <td style=\"background-color:#4B0082;\" id=\"demo61\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">Ivory<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFF0')\">#FFFFF0<\/a><\/td>\n        <td style=\"background-color:#FFFFF0;\" id=\"demo62\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">Khaki<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F0E68C')\">#F0E68C<\/a><\/td>\n        <td style=\"background-color:#F0E68C;\" id=\"demo63\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">Lavender<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E6E6FA')\">#E6E6FA<\/a><\/td>\n        <td style=\"background-color:#E6E6FA;\" id=\"demo64\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">LavenderBlush<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF0F5')\">#FFF0F5<\/a><\/td>\n        <td style=\"background-color:#FFF0F5;\" id=\"demo65\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">LawnGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7CFC00')\">#7CFC00<\/a><\/td>\n        <td style=\"background-color:#7CFC00;\" id=\"demo66\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">LemonChiffon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFACD')\">#FFFACD<\/a><\/td>\n        <td style=\"background-color:#FFFACD;\" id=\"demo67\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">LightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#ADD8E6')\">#ADD8E6<\/a><\/td>\n        <td style=\"background-color:#ADD8E6;\" id=\"demo68\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">LightCoral<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F08080')\">#F08080<\/a><\/td>\n        <td style=\"background-color:#F08080;\" id=\"demo69\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">LightCyan<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#E0FFFF')\">#E0FFFF<\/a><\/td>\n        <td style=\"background-color:#E0FFFF;\" id=\"demo70\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">LightGoldenRodYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAFAD2')\">#FAFAD2<\/a><\/td>\n        <td style=\"background-color:#FAFAD2;\" id=\"demo71\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo72\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">LightGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D3D3D3')\">#D3D3D3<\/a><\/td>\n        <td style=\"background-color:#D3D3D3;\" id=\"demo73\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">LightGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#90EE90')\">#90EE90<\/a><\/td>\n        <td style=\"background-color:#90EE90;\" id=\"demo74\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">LightPink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFB6C1')\">#FFB6C1<\/a><\/td>\n        <td style=\"background-color:#FFB6C1;\" id=\"demo75\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">LightSalmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA07A')\">#FFA07A<\/a><\/td>\n        <td style=\"background-color:#FFA07A;\" id=\"demo76\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">LightSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#20B2AA')\">#20B2AA<\/a><\/td>\n        <td style=\"background-color:#20B2AA;\" id=\"demo77\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">LightSkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEFA')\">#87CEFA<\/a><\/td>\n        <td style=\"background-color:#87CEFA;\" id=\"demo78\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo79\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">LightSlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#778899')\">#778899<\/a><\/td>\n        <td style=\"background-color:#778899;\" id=\"demo80\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">LightSteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0C4DE')\">#B0C4DE<\/a><\/td>\n        <td style=\"background-color:#B0C4DE;\" id=\"demo81\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">LightYellow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFE0')\">#FFFFE0<\/a><\/td>\n        <td style=\"background-color:#FFFFE0;\" id=\"demo82\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">Lime<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF00')\">#00FF00<\/a><\/td>\n        <td style=\"background-color:#00FF00;\" id=\"demo83\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">LimeGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#32CD32')\">#32CD32<\/a><\/td>\n        <td style=\"background-color:#32CD32;\" id=\"demo84\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">Linen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FAF0E6')\">#FAF0E6<\/a><\/td>\n        <td style=\"background-color:#FAF0E6;\" id=\"demo85\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">Magenta<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF00FF')\">#FF00FF<\/a><\/td>\n        <td style=\"background-color:#FF00FF;\" id=\"demo86\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">Maroon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800000')\">#800000<\/a><\/td>\n        <td style=\"background-color:#800000;\" id=\"demo87\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">MediumAquaMarine<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#66CDAA')\">#66CDAA<\/a><\/td>\n        <td style=\"background-color:#66CDAA;\" id=\"demo88\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">MediumBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#0000CD')\">#0000CD<\/a><\/td>\n        <td style=\"background-color:#0000CD;\" id=\"demo89\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">MediumOrchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BA55D3')\">#BA55D3<\/a><\/td>\n        <td style=\"background-color:#BA55D3;\" id=\"demo90\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">MediumPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9370DB')\">#9370DB<\/a><\/td>\n        <td style=\"background-color:#9370DB;\" id=\"demo91\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">MediumSeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#3CB371')\">#3CB371<\/a><\/td>\n        <td style=\"background-color:#3CB371;\" id=\"demo92\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">MediumSlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#7B68EE')\">#7B68EE<\/a><\/td>\n        <td style=\"background-color:#7B68EE;\" id=\"demo93\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">MediumSpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FA9A')\">#00FA9A<\/a><\/td>\n        <td style=\"background-color:#00FA9A;\" id=\"demo94\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">MediumTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#48D1CC')\">#48D1CC<\/a><\/td>\n        <td style=\"background-color:#48D1CC;\" id=\"demo95\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">MediumVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C71585')\">#C71585<\/a><\/td>\n        <td style=\"background-color:#C71585;\" id=\"demo96\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">MidnightBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#191970')\">#191970<\/a><\/td>\n        <td style=\"background-color:#191970;\" id=\"demo97\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">MintCream<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5FFFA')\">#F5FFFA<\/a><\/td>\n        <td style=\"background-color:#F5FFFA;\" id=\"demo98\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">MistyRose<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4E1')\">#FFE4E1<\/a><\/td>\n        <td style=\"background-color:#FFE4E1;\" id=\"demo99\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">Moccasin<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFE4B5')\">#FFE4B5<\/a><\/td>\n        <td style=\"background-color:#FFE4B5;\" id=\"demo100\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">NavajoWhite<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDEAD')\">#FFDEAD<\/a><\/td>\n        <td style=\"background-color:#FFDEAD;\" id=\"demo101\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">Navy<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#000080')\">#000080<\/a><\/td>\n        <td style=\"background-color:#000080;\" id=\"demo102\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">OldLace<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FDF5E6')\">#FDF5E6<\/a><\/td>\n        <td style=\"background-color:#FDF5E6;\" id=\"demo103\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">Olive<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#808000')\">#808000<\/a><\/td>\n        <td style=\"background-color:#808000;\" id=\"demo104\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">OliveDrab<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6B8E23')\">#6B8E23<\/a><\/td>\n        <td style=\"background-color:#6B8E23;\" id=\"demo105\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">Orange<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFA500')\">#FFA500<\/a><\/td>\n        <td style=\"background-color:#FFA500;\" id=\"demo106\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">OrangeRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF4500')\">#FF4500<\/a><\/td>\n        <td style=\"background-color:#FF4500;\" id=\"demo107\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">Orchid<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DA70D6')\">#DA70D6<\/a><\/td>\n        <td style=\"background-color:#DA70D6;\" id=\"demo108\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">PaleGoldenRod<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EEE8AA')\">#EEE8AA<\/a><\/td>\n        <td style=\"background-color:#EEE8AA;\" id=\"demo109\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">PaleGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#98FB98')\">#98FB98<\/a><\/td>\n        <td style=\"background-color:#98FB98;\" id=\"demo110\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">PaleTurquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#AFEEEE')\">#AFEEEE<\/a><\/td>\n        <td style=\"background-color:#AFEEEE;\" id=\"demo111\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">PaleVioletRed<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DB7093')\">#DB7093<\/a><\/td>\n        <td style=\"background-color:#DB7093;\" id=\"demo112\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">PapayaWhip<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFEFD5')\">#FFEFD5<\/a><\/td>\n        <td style=\"background-color:#FFEFD5;\" id=\"demo113\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">PeachPuff<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFDAB9')\">#FFDAB9<\/a><\/td>\n        <td style=\"background-color:#FFDAB9;\" id=\"demo114\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">Peru<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#CD853F')\">#CD853F<\/a><\/td>\n        <td style=\"background-color:#CD853F;\" id=\"demo115\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">Pink<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFC0CB')\">#FFC0CB<\/a><\/td>\n        <td style=\"background-color:#FFC0CB;\" id=\"demo116\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">Plum<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#DDA0DD')\">#DDA0DD<\/a><\/td>\n        <td style=\"background-color:#DDA0DD;\" id=\"demo117\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">PowderBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#B0E0E6')\">#B0E0E6<\/a><\/td>\n        <td style=\"background-color:#B0E0E6;\" id=\"demo118\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">Purple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#800080')\">#800080<\/a><\/td>\n        <td style=\"background-color:#800080;\" id=\"demo119\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">RebeccaPurple<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#663399')\">#663399<\/a><\/td>\n        <td style=\"background-color:#663399;\" id=\"demo120\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">Red<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF0000')\">#FF0000<\/a><\/td>\n        <td style=\"background-color:#FF0000;\" id=\"demo121\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">RosyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#BC8F8F')\">#BC8F8F<\/a><\/td>\n        <td style=\"background-color:#BC8F8F;\" id=\"demo122\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">RoyalBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4169E1')\">#4169E1<\/a><\/td>\n        <td style=\"background-color:#4169E1;\" id=\"demo123\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">SaddleBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#8B4513')\">#8B4513<\/a><\/td>\n        <td style=\"background-color:#8B4513;\" id=\"demo124\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">Salmon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FA8072')\">#FA8072<\/a><\/td>\n        <td style=\"background-color:#FA8072;\" id=\"demo125\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">SandyBrown<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F4A460')\">#F4A460<\/a><\/td>\n        <td style=\"background-color:#F4A460;\" id=\"demo126\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">SeaGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#2E8B57')\">#2E8B57<\/a><\/td>\n        <td style=\"background-color:#2E8B57;\" id=\"demo127\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">SeaShell<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFF5EE')\">#FFF5EE<\/a><\/td>\n        <td style=\"background-color:#FFF5EE;\" id=\"demo128\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">Sienna<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#A0522D')\">#A0522D<\/a><\/td>\n        <td style=\"background-color:#A0522D;\" id=\"demo129\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">Silver<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#C0C0C0')\">#C0C0C0<\/a><\/td>\n        <td style=\"background-color:#C0C0C0;\" id=\"demo130\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">SkyBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#87CEEB')\">#87CEEB<\/a><\/td>\n        <td style=\"background-color:#87CEEB;\" id=\"demo131\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">SlateBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#6A5ACD')\">#6A5ACD<\/a><\/td>\n        <td style=\"background-color:#6A5ACD;\" id=\"demo132\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGray<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo133\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">SlateGrey<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#708090')\">#708090<\/a><\/td>\n        <td style=\"background-color:#708090;\" id=\"demo134\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">Snow<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFAFA')\">#FFFAFA<\/a><\/td>\n        <td style=\"background-color:#FFFAFA;\" id=\"demo135\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">SpringGreen<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#00FF7F')\">#00FF7F<\/a><\/td>\n        <td style=\"background-color:#00FF7F;\" id=\"demo136\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">SteelBlue<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#4682B4')\">#4682B4<\/a><\/td>\n        <td style=\"background-color:#4682B4;\" id=\"demo137\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">Beige<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D2B48C')\">#D2B48C<\/a><\/td>\n        <td style=\"background-color:#D2B48C;\" id=\"demo138\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">Bleu sarcelle<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#008080')\">#008080<\/a><\/td>\n        <td style=\"background-color:#008080;\" id=\"demo139\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">Chardon<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#D8BFD8')\">#D8BFD8<\/a><\/td>\n        <td style=\"background-color:#D8BFD8;\" id=\"demo140\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">Tomate<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FF6347')\">#FF6347<\/a><\/td>\n        <td style=\"background-color:#FF6347;\" id=\"demo141\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">Turquoise<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#40E0D0')\">#40E0D0<\/a><\/td>\n        <td style=\"background-color:#40E0D0;\" id=\"demo142\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">Violet<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#EE82EE')\">#EE82EE<\/a><\/td>\n        <td style=\"background-color:#EE82EE;\" id=\"demo143\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">Bl\u00e9<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5DEB3')\">#F5DEB3<\/a><\/td>\n        <td style=\"background-color:#F5DEB3;\" id=\"demo144\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">Blanc<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFFFF')\">#FFFFFF<\/a><\/td>\n        <td style=\"background-color:#FFFFFF;\" id=\"demo145\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">WhiteSmoke<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#F5F5F5')\">#F5F5F5<\/a><\/td>\n        <td style=\"background-color:#F5F5F5;\" id=\"demo146\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">Jaune<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#FFFF00')\">#FFFF00<\/a><\/td>\n        <td style=\"background-color:#FFFF00;\" id=\"demo147\"><\/td>\n    <\/tr>\n    <tr>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">Vert-jaune<\/a><\/td>\n        <td><a href=\"#\" onclick=\"changeColor('#9ACD32')\">#9ACD32<\/a><\/td>\n        <td style=\"background-color:#9ACD32;\" id=\"demo148\"><\/td>\n    <\/tr>\n<\/table>\n\n<script>\nfunction changeColor(color) {\n    var demoCells = document.querySelectorAll('td[id^=\"demo\"]');\n    demoCells.forEach(function(cell) {\n        cell.style.backgroundColor = color;\n    });\n}\n<\/script>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bdfac3d elementor-widget elementor-widget-text-editor\" data-id=\"bdfac3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h2><span style=\"font-weight: 400;\">Conclusion <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Tout au long de ce guide, nous avons explor\u00e9 l&rsquo;univers de la <a href=\"https:\/\/elementor.com\/blog\/fr\/couleurs-css-et-html-proprietes-codes-mots-cles-et-noms\/\" data-wpil-monitor-id=\"10329\">couleur du texte en CSS<\/a>. Vous avez appris les fondamentaux de la propri\u00e9t\u00e9 de couleur, les diff\u00e9rentes mani\u00e8res d&rsquo;exprimer les <a href=\"https:\/\/elementor.com\/blog\/fr\/combien-vaut-mon-site-web-methodes-de-valorisation-et-comment-augmenter-la-valeur-de-votre-site-web\/\" data-wpil-monitor-id=\"10341\">valeurs de couleur et les m\u00e9thodes pour cibler des \u00e9l\u00e9ments sp\u00e9cifiques au sein de votre site web<\/a>. Nous avons abord\u00e9 l&rsquo;accessibilit\u00e9, les meilleures pratiques, et m\u00eame quelques <a href=\"https:\/\/elementor.com\/blog\/fr\/comment-utiliser-chatgpt-des-invites-de-base-aux-techniques-avancees\/\" data-wpil-monitor-id=\"10342\">techniques avanc\u00e9es<\/a>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N&rsquo;oubliez pas que la couleur est un outil puissant dans votre arsenal de <a href=\"https:\/\/elementor.com\/blog\/fr\/7-meilleurs-constructeurs-de-sites-web-de-portfolio-de-year\/\" data-wpil-monitor-id=\"10330\">conception web<\/a>. Utilisez-la strat\u00e9giquement pour :<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Am\u00e9liorer la lisibilit\u00e9<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Guider le regard de l&rsquo;utilisateur<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00c9voquer des \u00e9motions et s&rsquo;aligner avec votre marque<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><a href=\"https:\/\/elementor.com\/blog\/fr\/12-exemples-remarquables-de-portfolios-de-conception-de-sites-web\/\" data-wpil-monitor-id=\"10331\">Cr\u00e9er un site web visuellement captivant et m\u00e9morable<\/a><\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Si vous cherchez \u00e0 rationaliser le processus d&rsquo;ajout et de stylisation de la couleur du texte, envisagez un puissant <a href=\"https:\/\/elementor.com\/blog\/fr\/7-meilleurs-constructeurs-de-sites-web-gratuits-year\/\" data-wpil-monitor-id=\"10332\">constructeur de sites web<\/a> comme Elementor. Son interface visuelle intuitive et son int\u00e9gration avec un <a href=\"https:\/\/elementor.com\/blog\/fr\/5-meilleures-hebergements-web-pour-petites-entreprises-en-year\/\" data-wpil-monitor-id=\"10333\">h\u00e9bergement<\/a> optimis\u00e9 peuvent vous permettre de cr\u00e9er des sites web magnifiques et riches en couleurs sans n\u00e9cessiter de connaissances approfondies en codage.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Au c\u0153ur de la manipulation de la couleur du texte CSS se trouve la propri\u00e9t\u00e9 color. Cette propri\u00e9t\u00e9 apparemment simple est votre cl\u00e9 pour d\u00e9bloquer tout le spectre de couleurs pour le texte de votre site web. Elle fonctionne en assignant directement une valeur de couleur d\u00e9sir\u00e9e \u00e0 un \u00e9l\u00e9ment de texte sp\u00e9cifique. <\/p>\n","protected":false},"author":2024234,"featured_media":103942,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[514],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-126817","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment changer la couleur du texte en CSS &amp; HTML<\/title>\n<meta name=\"description\" content=\"Au c\u0153ur de la manipulation de la couleur du texte CSS se trouve la propri\u00e9t\u00e9 color. Cette propri\u00e9t\u00e9 apparemment simple est votre cl\u00e9 pour d\u00e9bloquer tout le spectre de couleurs pour le texte de votre site web. Elle fonctionne en assignant directement une valeur de couleur d\u00e9sir\u00e9e \u00e0 un \u00e9l\u00e9ment de texte sp\u00e9cifique.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment changer la couleur du texte en CSS &amp; HTML\" \/>\n<meta property=\"og:description\" content=\"Au c\u0153ur de la manipulation de la couleur du texte CSS se trouve la propri\u00e9t\u00e9 color. Cette propri\u00e9t\u00e9 apparemment simple est votre cl\u00e9 pour d\u00e9bloquer tout le spectre de couleurs pour le texte de votre site web. Elle fonctionne en assignant directement une valeur de couleur d\u00e9sir\u00e9e \u00e0 un \u00e9l\u00e9ment de texte sp\u00e9cifique.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-02T08:01:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-15T21:26:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Comment changer la couleur du texte en CSS &amp; HTML\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2025-11-15T21:26:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/\"},\"wordCount\":3377,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Ressources\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/\",\"name\":\"Comment changer la couleur du texte en CSS &amp; HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-02T08:01:16+00:00\",\"dateModified\":\"2025-11-15T21:26:08+00:00\",\"description\":\"Au c\u0153ur de la manipulation de la couleur du texte CSS se trouve la propri\u00e9t\u00e9 color. Cette propri\u00e9t\u00e9 apparemment simple est votre cl\u00e9 pour d\u00e9bloquer tout le spectre de couleurs pour le texte de votre site web. Elle fonctionne en assignant directement une valeur de couleur d\u00e9sir\u00e9e \u00e0 un \u00e9l\u00e9ment de texte sp\u00e9cifique.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ressources\",\"item\":\"https:\/\/elementor.com\/blog\/fr\/category\/ressources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment changer la couleur du texte en CSS &amp; HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/fr\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Comment changer la couleur du texte en CSS &amp; HTML","description":"Au c\u0153ur de la manipulation de la couleur du texte CSS se trouve la propri\u00e9t\u00e9 color. Cette propri\u00e9t\u00e9 apparemment simple est votre cl\u00e9 pour d\u00e9bloquer tout le spectre de couleurs pour le texte de votre site web. Elle fonctionne en assignant directement une valeur de couleur d\u00e9sir\u00e9e \u00e0 un \u00e9l\u00e9ment de texte sp\u00e9cifique.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment changer la couleur du texte en CSS &amp; HTML","og_description":"Au c\u0153ur de la manipulation de la couleur du texte CSS se trouve la propri\u00e9t\u00e9 color. Cette propri\u00e9t\u00e9 apparemment simple est votre cl\u00e9 pour d\u00e9bloquer tout le spectre de couleurs pour le texte de votre site web. Elle fonctionne en assignant directement une valeur de couleur d\u00e9sir\u00e9e \u00e0 un \u00e9l\u00e9ment de texte sp\u00e9cifique.","og_url":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-02T08:01:16+00:00","article_modified_time":"2025-11-15T21:26:08+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"\u00c9crit par":"Itamar Haim","Dur\u00e9e de lecture estim\u00e9e":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Comment changer la couleur du texte en CSS &amp; HTML","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2025-11-15T21:26:08+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/"},"wordCount":3377,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Ressources"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/","url":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/","name":"Comment changer la couleur du texte en CSS &amp; HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-02T08:01:16+00:00","dateModified":"2025-11-15T21:26:08+00:00","description":"Au c\u0153ur de la manipulation de la couleur du texte CSS se trouve la propri\u00e9t\u00e9 color. Cette propri\u00e9t\u00e9 apparemment simple est votre cl\u00e9 pour d\u00e9bloquer tout le spectre de couleurs pour le texte de votre site web. Elle fonctionne en assignant directement une valeur de couleur d\u00e9sir\u00e9e \u00e0 un \u00e9l\u00e9ment de texte sp\u00e9cifique.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/fr\/comment-changer-la-couleur-du-texte-en-css-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/fr\/"},{"@type":"ListItem","position":2,"name":"Ressources","item":"https:\/\/elementor.com\/blog\/fr\/category\/ressources\/"},{"@type":"ListItem","position":3,"name":"Comment changer la couleur du texte en CSS &amp; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/fr\/#website","url":"https:\/\/elementor.com\/blog\/fr\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/fr\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/elementor.com\/blog\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/fr\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/126817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=126817"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/126817\/revisions"}],"predecessor-version":[{"id":143258,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/126817\/revisions\/143258"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media\/103942"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=126817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=126817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=126817"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_persona?post=126817"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/fr\/wp-json\/wp\/v2\/marketing_intent?post=126817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}