{"id":7074498,"date":"2026-10-03T15:58:29","date_gmt":"2026-10-03T15:58:29","guid":{"rendered":"https:\/\/fivemor.com\/?p=7074498"},"modified":"2026-10-03T15:58:29","modified_gmt":"2026-10-03T15:58:29","slug":"convertisseur-de-couleurs-hex-rgb-et-hsl-avec-variantes","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=7074498","title":{"rendered":"Convertisseur de couleurs HEX, RGB et HSL avec variantes"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<nav class=\"card tool__anchors\" aria-label=\"Sections de la page\"\/>\n<section class=\"card tool-section\">\n<p>Le code #E8590C, la notation rgb(232, 89, 12) et la notation hsl(21, 90 %, 48 %) d\u00e9signent exactement la m\u00eame couleur. La troisi\u00e8me est la seule qui permette d&#8217;\u00e9claircir ou d&#8217;assombrir une teinte sans la changer, ce qui en fait l&#8217;\u00e9criture la plus utile pour construire une palette.<\/p>\n<\/section>\n<section class=\"card tool-section\">\n<h2 id=\"la-formule-utilisee\">La formule utilis\u00e9e<\/h2>\n<p>R, V, B = octets du code hexad\u00e9cimal \u00b7 L = (max + min) \u00f7 2 \u00b7 S = (max \u2212 min) \u00f7 (1 \u2212 |2L \u2212 1|) \u00b7 T selon la composante dominante<\/p>\n<ol class=\"tool__steps\">\n<li>Le code hexad\u00e9cimal se d\u00e9coupe en trois octets, un par composante, chacun entre 0 et 255.<\/li>\n<li>La luminosit\u00e9 est la moyenne des composantes extr\u00eames, la saturation mesure l&#8217;\u00e9cart entre elles, et la teinte se d\u00e9duit de la composante la plus forte.<\/li>\n<li>Faire varier la seule luminosit\u00e9, en gardant teinte et saturation, produit l&#8217;\u00e9chelle de variantes affich\u00e9e sous le r\u00e9sultat.<\/li>\n<\/ol>\n<p class=\"tool__example\">Exemple contr\u00f4lable : #E8590C donne R 232, V 89, B 12. Le maximum vaut 232 \u00f7 255 = 0,91, le minimum 12 \u00f7 255 = 0,047 ; la luminosit\u00e9 vaut (0,91 + 0,047) \u00f7 2 = 48 %.<\/p>\n<\/section>\n<section class=\"card tool-section\">\n<h2 id=\"apres-le-resultat\">Apr\u00e8s le r\u00e9sultat<\/h2>\n<ul>\n<li>Pour une palette, partez d&#8217;une teinte et faites varier la luminosit\u00e9 par paliers r\u00e9guliers : les couleurs restent coh\u00e9rentes entre elles, ce que la retouche \u00e0 l&#8217;\u0153il ne garantit jamais.<\/li>\n<li>La luminance relative affich\u00e9e n&#8217;est pas la luminosit\u00e9 HSL : la premi\u00e8re pond\u00e8re le vert et sert \u00e0 calculer les contrastes, la seconde est une moyenne g\u00e9om\u00e9trique simple.<\/li>\n<li>Deux couleurs de m\u00eame luminosit\u00e9 HSL peuvent avoir des contrastes tr\u00e8s diff\u00e9rents sur fond blanc : le jaune para\u00eet clair, le bleu para\u00eet sombre.<\/li>\n<\/ul>\n<\/section>\n<section class=\"card tool-section\">\n<h2 id=\"ce-que-le-resultat-ne-permet-pas-de-conclure\">Ce que le r\u00e9sultat ne permet pas de conclure<\/h2>\n<\/section>\n<section class=\"card tool-section\">\n<h2 id=\"sources\">Sources<\/h2>\n<\/section>\n<section class=\"card tool-section\">\n<h2 id=\"questions-frequentes\">Questions fr\u00e9quentes<\/h2>\n<\/section>\n<section class=\"card tool__recap\">\n<h2 class=\"card-title\">\u00c0 retenir<\/h2>\n<p>RGB = octets du code hexad\u00e9cimal \u00b7 HSL = teinte, saturation et luminosit\u00e9 d\u00e9riv\u00e9es du RGB<\/p>\n<\/section>\n<p class=\"tool__resp\"> <span><b>Publication<\/b><a href=\"https:\/\/www.force-interactive.com\/author\/elodiev\/\">\u00c9lodie Vasseur<\/a><\/span> <span><b>Mise \u00e0 jour<\/b>4 September 2026<\/span><\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Le code #E8590C, la notation rgb(232, 89, 12) et la notation hsl(21, 90 %, 48 %) d\u00e9signent exactement la m\u00eame couleur. La troisi\u00e8me est la seule qui permette d&#8217;\u00e9claircir ou d&#8217;assombrir une teinte sans la changer, ce qui en fait l&#8217;\u00e9criture la plus utile pour construire une palette. La formule utilis\u00e9e R, V, B = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7074499,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[235176],"tags":[39638,235177,235178,2795,235179,96037,235180],"dealstore":[],"offerexpiration":[],"class_list":["post-7074498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ecrans-et-images","tag-avec","tag-convertisseur","tag-couleurs","tag-hex","tag-hsl","tag-rgb","tag-variantes"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Convertisseur de couleurs HEX, RGB et HSL avec variantes - Som2ny Network<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fivemor.com\/?p=7074498\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Convertisseur de couleurs HEX, RGB et HSL avec variantes - Som2ny Network\" \/>\n<meta property=\"og:description\" content=\"Le code #E8590C, la notation rgb(232, 89, 12) et la notation hsl(21, 90 %, 48 %) d\u00e9signent exactement la m\u00eame couleur. La troisi\u00e8me est la seule qui permette d&#8217;\u00e9claircir ou d&#8217;assombrir une teinte sans la changer, ce qui en fait l&#8217;\u00e9criture la plus utile pour construire une palette. La formule utilis\u00e9e R, V, B = [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fivemor.com\/?p=7074498\" \/>\n<meta property=\"og:site_name\" content=\"Som2ny Network\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-03T15:58:29+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fivemor.com\/?p=7074498#article\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/?p=7074498\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\"},\"headline\":\"Convertisseur de couleurs HEX, RGB et HSL avec variantes\",\"datePublished\":\"2026-10-03T15:58:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=7074498\"},\"wordCount\":300,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=7074498#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg\",\"keywords\":[\"avec\",\"Convertisseur\",\"couleurs\",\"Hex\",\"HSL\",\"RGB\",\"variantes\"],\"articleSection\":[\"\u00c9crans et images\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fivemor.com\/?p=7074498#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fivemor.com\/?p=7074498\",\"url\":\"https:\/\/fivemor.com\/?p=7074498\",\"name\":\"Convertisseur de couleurs HEX, RGB et HSL avec variantes - Som2ny Network\",\"isPartOf\":{\"@id\":\"https:\/\/fivemor.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fivemor.com\/?p=7074498#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/?p=7074498#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg\",\"datePublished\":\"2026-10-03T15:58:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fivemor.com\/?p=7074498#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fivemor.com\/?p=7074498\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/?p=7074498#primaryimage\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fivemor.com\/?p=7074498#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/fivemor.com\/?bp_activities=1\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Convertisseur de couleurs HEX, RGB et HSL avec variantes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fivemor.com\/#website\",\"url\":\"https:\/\/fivemor.com\/\",\"name\":\"Som2ny Network\",\"description\":\"Daily Deals\",\"publisher\":{\"@id\":\"https:\/\/fivemor.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fivemor.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/fivemor.com\/#organization\",\"name\":\"Som2ny Network\",\"url\":\"https:\/\/fivemor.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"contentUrl\":\"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png\",\"width\":300,\"height\":86,\"caption\":\"Som2ny Network\"},\"image\":{\"@id\":\"https:\/\/fivemor.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/fivemor.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/fivemor.com\"],\"url\":\"https:\/\/fivemor.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Convertisseur de couleurs HEX, RGB et HSL avec variantes - Som2ny Network","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:\/\/fivemor.com\/?p=7074498","og_locale":"en_US","og_type":"article","og_title":"Convertisseur de couleurs HEX, RGB et HSL avec variantes - Som2ny Network","og_description":"Le code #E8590C, la notation rgb(232, 89, 12) et la notation hsl(21, 90 %, 48 %) d\u00e9signent exactement la m\u00eame couleur. La troisi\u00e8me est la seule qui permette d&#8217;\u00e9claircir ou d&#8217;assombrir une teinte sans la changer, ce qui en fait l&#8217;\u00e9criture la plus utile pour construire une palette. La formule utilis\u00e9e R, V, B = [&hellip;]","og_url":"https:\/\/fivemor.com\/?p=7074498","og_site_name":"Som2ny Network","article_published_time":"2026-10-03T15:58:29+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fivemor.com\/?p=7074498#article","isPartOf":{"@id":"https:\/\/fivemor.com\/?p=7074498"},"author":{"name":"admin","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371"},"headline":"Convertisseur de couleurs HEX, RGB et HSL avec variantes","datePublished":"2026-10-03T15:58:29+00:00","mainEntityOfPage":{"@id":"https:\/\/fivemor.com\/?p=7074498"},"wordCount":300,"commentCount":0,"publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"image":{"@id":"https:\/\/fivemor.com\/?p=7074498#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg","keywords":["avec","Convertisseur","couleurs","Hex","HSL","RGB","variantes"],"articleSection":["\u00c9crans et images"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fivemor.com\/?p=7074498#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fivemor.com\/?p=7074498","url":"https:\/\/fivemor.com\/?p=7074498","name":"Convertisseur de couleurs HEX, RGB et HSL avec variantes - Som2ny Network","isPartOf":{"@id":"https:\/\/fivemor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fivemor.com\/?p=7074498#primaryimage"},"image":{"@id":"https:\/\/fivemor.com\/?p=7074498#primaryimage"},"thumbnailUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg","datePublished":"2026-10-03T15:58:29+00:00","breadcrumb":{"@id":"https:\/\/fivemor.com\/?p=7074498#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fivemor.com\/?p=7074498"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/?p=7074498#primaryimage","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/10\/convertisseur-couleurs-hex-rgb-hsl-cover.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/fivemor.com\/?p=7074498#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fivemor.com\/?bp_activities=1"},{"@type":"ListItem","position":2,"name":"Convertisseur de couleurs HEX, RGB et HSL avec variantes"}]},{"@type":"WebSite","@id":"https:\/\/fivemor.com\/#website","url":"https:\/\/fivemor.com\/","name":"Som2ny Network","description":"Daily Deals","publisher":{"@id":"https:\/\/fivemor.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fivemor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fivemor.com\/#organization","name":"Som2ny Network","url":"https:\/\/fivemor.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/","url":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","contentUrl":"https:\/\/fivemor.com\/wp-content\/uploads\/2026\/07\/4a0953c4-logo-300x86-1.png","width":300,"height":86,"caption":"Som2ny Network"},"image":{"@id":"https:\/\/fivemor.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/fivemor.com\/#\/schema\/person\/b85e3c3dc0e1daea076524dc8810c371","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fivemor.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/729ae85bf62b9917e93538db2f2688ca?s=96&r=g&default=https%3A%2F%2Ffivemor.com%2Fwp-content%2Fplugins%2Fbuddypress-first-letter-avatar%2Fimages%2Fdefault%2F96%2Flatin_a.png","caption":"admin"},"sameAs":["https:\/\/fivemor.com"],"url":"https:\/\/fivemor.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/7074498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7074498"}],"version-history":[{"count":0,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/posts\/7074498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=\/wp\/v2\/media\/7074499"}],"wp:attachment":[{"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7074498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7074498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7074498"},{"taxonomy":"dealstore","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fdealstore&post=7074498"},{"taxonomy":"offerexpiration","embeddable":true,"href":"https:\/\/fivemor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fofferexpiration&post=7074498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}