{"id":358,"date":"2026-10-03T06:01:49","date_gmt":"2026-10-03T03:01:49","guid":{"rendered":"https:\/\/wpcalc.com\/fr\/?p=358"},"modified":"2026-10-03T06:01:49","modified_gmt":"2026-10-03T03:01:49","slug":"convertisseur-couleurs","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/fr\/outils-web\/convertisseur-couleurs\/","title":{"rendered":"Convertisseur de couleurs"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">Convertisseur de couleurs HEX \u21c4 RGB \u21c4 HSL<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"358\" data-favorite-title=\"Convertisseur de couleurs\" data-favorite-url=\"https:\/\/wpcalc.com\/fr\/outils-web\/convertisseur-couleurs\/\" data-favorite-excerpt=\"Saisissez un nom ou un code de couleur CSS pour afficher ses valeurs RGB, HEX, HSL, HWB, CMYK et NCol, ainsi qu\u2019un aper\u00e7u de la couleur.\" aria-label=\"Ajouter aux favoris\" data-favorite-icon=\"icon icon-conversion\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/fr\/outils-web\/convertisseur-couleurs\/\" method=\"POST\" class=\"calculator\" id=\"calculator-358\" data-post=\"358\"><fieldset class=\"fieldset-input\"><legend class=\"sr-only\">Champs de saisie<\/legend><div class=\"field is-single\" id=\"input-1\"><label for=\"field-1\">Couleur<\/label><input type=\"text\" name=\"couleur\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"p. ex. red, #f00, rgb(255,0,0)\" step=\"any\" value=\"skyblue\"\/><small id=\"calc-info-1\">Saisissez un nom de couleur ou n\u2019importe quel code couleur CSS.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Recalculer\" id=\"calculate-button\" data-post=\"358\">Calculer<\/button><button type=\"reset\">R\u00e9initialiser<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Calculer automatiquement<\/label><small>Si activ\u00e9, le r\u00e9sultat se met \u00e0 jour automatiquement d\u00e8s que vous modifiez une valeur.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> Vos r\u00e9sultats<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Nom<\/span><\/span><span class=\"field-value\" id=\"result-1\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>RGB<\/span><\/span><span class=\"field-value\" id=\"result-2\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>HEX<\/span><\/span><span class=\"field-value\" id=\"result-3\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>HSL<\/span><\/span><span class=\"field-value\" id=\"result-4\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>HWB<\/span><\/span><span class=\"field-value\" id=\"result-5\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>CMYK<\/span><\/span><span class=\"field-value\" id=\"result-6\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-7\"><span class=\"field-title\"><span>NCol<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-8\"><span class=\"field-title\"><span>Couleur<\/span><\/span><span class=\"field-value\" id=\"result-8\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Copier le r\u00e9sultat\" aria-label=\"Copier le r\u00e9sultat\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Copier le lien vers ce calcul<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Laisser un commentaire<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"358\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">Que pensez-vous de ce r\u00e9sultat\u00a0?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">J\u2019aime <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">1<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">Utile <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Confus <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">D\u00e9\u00e7u <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Inexact <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>Formule du convertisseur de couleurs<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">Formule<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[R=16h_1+h_2,\\qquad G=16h_3+h_4,\\qquad B=16h_5+h_6\\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>O\u00f9 :<\/strong><\/p>\n<ul>\n<li>\\(h_1,\\ldots,h_6\\) \u2014 les six chiffres d\u2019une couleur HEX, lus comme des valeurs de 0 \u00e0 15&nbsp;; les lettres A \u00e0 F repr\u00e9sentent les valeurs de 10 \u00e0 15.<\/li>\n<li>\\(R\\), \\(G\\) et \\(B\\) \u2014 les valeurs des composantes rouge, verte et bleue, chacune comprise entre 0 et 255.<\/li>\n<\/ul>\n<p>Cette formule convertit une couleur HEX \u00e0 six chiffres en RGB. Le convertisseur accepte \u00e9galement d\u2019autres formats de couleur pris en charge et permet de passer de l\u2019un \u00e0 l\u2019autre.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>Convertisseur de couleurs \u2013 exemple de calcul<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>Exemple :<\/strong> la valeur saisie par d\u00e9faut est <code>skyblue<\/code>. Cette couleur nomm\u00e9e correspond \u00e0 <code>#87CEEB<\/code>&nbsp;: on peut donc convertir ses paires de chiffres HEX en RGB.<\/p>\n<p>\\[R=8(16)+7=135,\\qquad G=12(16)+14=206,\\qquad B=14(16)+11=235\\]<\/p>\n<p><strong>R\u00e9sultat :<\/strong> <code>skyblue<\/code> a pour valeur HEX <code>#87CEEB<\/code> et pour valeur RGB <code>rgb(135, 206, 235)<\/code>. Ses valeurs HSL sont d\u2019environ 197\u00b0 pour la teinte, 71&nbsp;% pour la saturation et 73&nbsp;% pour la luminosit\u00e9.<\/p>\n<p>\n\r\n<\/section>\n<h2>Comment utiliser le convertisseur de couleurs<\/h2>\n<ol>\n<li>Saisissez une couleur dans le champ <strong>Couleur<\/strong>. Vous pouvez partir de la valeur par d\u00e9faut <code>skyblue<\/code>, saisir un nom de couleur CSS comme <code>red<\/code> ou entrer un code comme <code>#f00<\/code> ou <code>rgb(255, 0, 0)<\/code>.<\/li>\n<li>Consultez le r\u00e9sultat <strong>Couleur<\/strong> pour voir un aper\u00e7u de la couleur correspondant \u00e0 votre saisie.<\/li>\n<li>Copiez le format dont vous avez besoin parmi <strong>Nom<\/strong>, <strong>RGB<\/strong>, <strong>HEX<\/strong>, <strong>HSL<\/strong>, <strong>HWB<\/strong>, <strong>CMYK<\/strong> et <strong>NCol<\/strong>.<\/li>\n<\/ol>\n<p>Si le champ <strong>Nom<\/strong> indique \u00ab&nbsp;aucun nom&nbsp;\u00bb, la couleur ne correspond \u00e0 aucun nom de la liste du convertisseur. Les r\u00e9sultats num\u00e9riques peuvent n\u00e9anmoins repr\u00e9senter une couleur valide.<\/p>\n<h2>Que signifient les formats de couleur ?<\/h2>\n<p>Une couleur num\u00e9rique peut \u00eatre d\u00e9crite de plusieurs fa\u00e7ons sans changer son apparence. Le format <strong>HEX<\/strong> repr\u00e9sente le rouge, le vert et le bleu par des paires de chiffres hexad\u00e9cimaux&nbsp;: <code>#87CEEB<\/code> signifie 87 pour le rouge, CE pour le vert et EB pour le bleu, en base 16. Le format <strong>RGB<\/strong> exprime ces m\u00eames composantes sous forme de nombres d\u00e9cimaux de 0 \u00e0 255. Si vous souhaitez effectuer s\u00e9par\u00e9ment les calculs en base 16, utilisez le <a href=\"https:\/\/wpcalc.com\/fr\/outils-web\/convertisseur-hexadecimal\/\">convertisseur hexad\u00e9cimal<\/a>&nbsp;; il convertit des nombres, et non des valeurs de couleur CSS compl\u00e8tes.<\/p>\n<p>Le format <strong>HSL<\/strong> d\u00e9crit la teinte, la saturation et la luminosit\u00e9. La teinte correspond \u00e0 une position sur le cercle chromatique, g\u00e9n\u00e9ralement exprim\u00e9e en degr\u00e9s&nbsp;; la saturation d\u00e9crit l\u2019intensit\u00e9 de la couleur, tandis que la luminosit\u00e9 va du noir au blanc. Le format <strong>HWB<\/strong> utilise plut\u00f4t la teinte, la blancheur et la noirceur. Ces formats peuvent \u00eatre plus faciles \u00e0 lire lorsque vous comparez des nuances ou ajustez une couleur \u00e0 l\u2019\u0153il. RGB et HEX sont souvent plus pratiques lorsqu\u2019une sp\u00e9cification exige des valeurs exactes pour chaque composante.<\/p>\n<p>Le format <strong>CMYK<\/strong> fournit des valeurs de cyan, de magenta, de jaune et de noir d\u00e9riv\u00e9es de la couleur affich\u00e9e \u00e0 l\u2019\u00e9cran. <strong>NCol<\/strong> est une notation fond\u00e9e sur la teinte propos\u00e9e par le convertisseur&nbsp;; elle est moins couramment utilis\u00e9e en CSS que HEX, RGB ou HSL. Le format de sortie change la fa\u00e7on d\u2019\u00e9crire une couleur, pas la couleur choisie. De petites diff\u00e9rences dans les pourcentages affich\u00e9s peuvent \u00eatre dues aux arrondis.<\/p>\n<h2>Limites et conseils pratiques<\/h2>\n<p>Le convertisseur n\u00e9cessite une valeur que son analyseur de couleurs reconna\u00eet. Les noms de couleurs CSS standard et les codes de couleur CSS courants sont de bons points de d\u00e9part. Un code HEX \u00e0 trois chiffres est une forme abr\u00e9g\u00e9e : par exemple, <code>#f00<\/code> \u00e9quivaut \u00e0 <code>#ff0000<\/code>. Les lettres d\u2019un code HEX ne sont pas sensibles \u00e0 la casse : <code>#87ceeb<\/code> et <code>#87CEEB<\/code> repr\u00e9sentent donc la m\u00eame couleur.<\/p>\n<p>Certaines valeurs comportent une composante alpha, qui contr\u00f4le la transparence. Pour les valeurs reconnues comportant une composante alpha, les r\u00e9sultats RGB, HSL, HWB et NCol utilisent des formes qui incluent cette composante. V\u00e9rifiez chaque r\u00e9sultat avant de le copier dans une autre application&nbsp;: tous les formats indiqu\u00e9s ne d\u00e9crivent pas la transparence de la m\u00eame mani\u00e8re. Si une couleur est partiellement transparente, son aper\u00e7u peut \u00e9galement para\u00eetre diff\u00e9rent sur un autre fond.<\/p>\n<p>La conversion CMYK propos\u00e9e ici est un calcul math\u00e9matique \u00e0 partir d\u2019une couleur num\u00e9rique, et non une conversion fond\u00e9e sur un profil d\u2019impression. Le rendu imprim\u00e9 d\u00e9pend de l\u2019imprimante, des encres, du papier et des param\u00e8tres de gestion des couleurs&nbsp;: utilisez donc un processus d\u2019impression adapt\u00e9 lorsqu\u2019une couleur de production exacte est importante. De m\u00eame, l\u2019apparence d\u2019une couleur \u00e0 l\u2019\u00e9cran d\u00e9pend de l\u2019affichage et de ses r\u00e9glages&nbsp;; des valeurs num\u00e9riques identiques ne garantissent pas \u00e0 elles seules un rendu identique sur tous les appareils.<\/p>\n<p>Si vous placez une couleur HEX dans un param\u00e8tre de requ\u00eate d\u2019URL, n\u2019oubliez pas que <code>#<\/code> a une signification particuli\u00e8re dans les URL. Utilisez l\u2019<a href=\"https:\/\/wpcalc.com\/fr\/outils-web\/encodeur-url\/\">encodeur d\u2019URL<\/a> pour encoder la valeur si n\u00e9cessaire.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Saisissez un nom ou un code de couleur CSS pour afficher ses valeurs RGB, HEX, HSL, HWB, CMYK et NCol, ainsi qu\u2019un aper\u00e7u de la couleur.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[36],"tags":[37],"class_list":["post-358","post","type-post","status-publish","format-standard","hentry","category-outils-web","tag-outils-de-conversion"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/posts\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/comments?post=358"}],"version-history":[{"count":5,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/posts\/358\/revisions"}],"predecessor-version":[{"id":5469,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/posts\/358\/revisions\/5469"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/media?parent=358"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/categories?post=358"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/fr\/wp-json\/wp\/v2\/tags?post=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}