{"id":4756,"date":"2026-05-09T10:17:13","date_gmt":"2026-05-09T10:17:13","guid":{"rendered":"https:\/\/rimanagency.com\/css-color-converter-hex-rgb-hsl\/"},"modified":"2026-05-09T10:17:13","modified_gmt":"2026-05-09T10:17:13","slug":"css-color-converter-hex-rgb-hsl","status":"publish","type":"page","link":"https:\/\/rimanagency.com\/fr\/css-color-converter-hex-rgb-hsl\/","title":{"rendered":"Convertisseur de couleurs CSS \u2014 HEX, RGB, HSL"},"content":{"rendered":"<style>.rt-h{background:linear-gradient(135deg,#f1f5e8,#e8efdb);border-radius:14px;padding:32px;margin:0 0 24px;text-align:center}.rt-h h1{margin:0 0 10px;font-size:28px;color:#4a6320}.rt-g{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 24px}.rt-f,.rt-o{background:#fff;border:1px solid #e0e6d8;border-radius:10px;padding:22px}.rt-f h3,.rt-o h3{margin:0 0 14px;color:#4a6320;font-size:18px}.rt-f label{display:block;font-size:13px;color:#516048;font-weight:600;margin:10px 0 6px}.rt-f input,.rt-f select,.rt-f textarea{width:100%;padding:9px;border:1px solid #d4dac6;border-radius:6px;font-size:14px;box-sizing:border-box;font-family:inherit}.rt-btn{background:#719430;color:#fff;border:none;padding:11px 20px;border-radius:6px;font-weight:700;cursor:pointer;width:100%;margin-top:14px;font-size:15px}.rt-btn:hover{background:#4a6320}.rt-o-big{font-size:38px;font-weight:800;color:#719430;text-align:center;margin:6px 0}.rt-o-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f3e8;font-size:14px}.rt-o-row:last-child{border:none}.rt-o-row b{color:#4a6320}.rt-cta{background:linear-gradient(135deg,#719430,#4a6320);color:#fff;border-radius:14px;padding:32px;text-align:center;margin:30px 0}.rt-cta a{background:#fff;color:#4a6320;padding:12px 28px;border-radius:6px;font-weight:700;text-decoration:none;display:inline-block;margin-top:14px}.rt-code{background:#1e1e1e;color:#a3c163;padding:14px;border-radius:8px;font-family:Consolas,monospace;font-size:12px;white-space:pre-wrap;word-break:break-all;max-height:300px;overflow:auto}@media(max-width:768px){.rt-g{grid-template-columns:1fr}}<\/style>\n<div class=\"rt-h\">\n<h1>CSS Color Converter<\/h1>\n<p>Convert between HEX, RGB, and HSL color formats with live preview.<\/p>\n<\/div>\n<div class=\"rt-g\">\n<div class=\"rt-f\">\n<h3>Input<\/h3>\n<p><label>HEX color<\/label><input type=\"text\" id=\"col-hex\" value=\"#719430\"><button class=\"rt-btn\" onclick=\"calcCol()\">Convert<\/button><\/div>\n<div class=\"rt-o\">\n<h3>Conversions<\/h3>\n<div id=\"col-swatch\" style=\"width:100%;height:80px;border-radius:8px;border:1px solid #e0e6d8;background:#719430;margin-bottom:12px\"><\/div>\n<div id=\"col-out\" style=\"font-family:Consolas,monospace;font-size:14px;background:#fafafa;border:1px solid #e0e6d8;border-radius:8px;padding:14px\"><\/div>\n<\/div>\n<\/div>\n<p><script>function calcCol(){function update(){var hex=document.getElementById(\"col-hex\").value;if(!\/^#[0-9a-fA-F]{6}$\/.test(hex)){document.getElementById(\"col-out\").textContent=\"Enter valid #RRGGBB\";return}var r=parseInt(hex.substr(1,2),16);var g=parseInt(hex.substr(3,2),16);var b=parseInt(hex.substr(5,2),16);document.getElementById(\"col-swatch\").style.background=hex;var rgb=\"rgb(\"+r+\", \"+g+\", \"+b+\")\";var rN=r\/255,gN=g\/255,bN=b\/255;var max=Math.max(rN,gN,bN),min=Math.min(rN,gN,bN);var h,s,l=(max+min)\/2;if(max===min){h=s=0}else{var d=max-min;s=l>0.5?d\/(2-max-min):d\/(max+min);if(max===rN)h=(gN-bN)\/d+(gN<bN?6:0);else if(max===gN)h=(bN-rN)\/d+2;else h=(rN-gN)\/d+4;h*=60}var hsl=\"hsl(\"+h.toFixed(0)+\", \"+(s*100).toFixed(0)+\"%, \"+(l*100).toFixed(0)+\"%)\";document.getElementById(\"col-out\").innerHTML=\"\n\n<div>HEX: <b>\"+hex+\"<\/b><\/div>\n<div>RGB: <b>\"+rgb+\"<\/b><\/div>\n<div>HSL: <b>\"+hsl+\"<\/b><\/div>\n<p>\"}update();document.getElementById(\"col-hex\").addEventListener(\"input\",update);}<\/script><\/p>\n<h2>Why color formats matter<\/h2>\n<p>Designers think in HEX. Developers use RGB for transparency calculations. Modern CSS prefers HSL for hue manipulation. Knowing how to convert between them keeps your design tokens consistent.<\/p>\n<h2>Frequently Asked Questions<\/h2>\n<p><strong>HEX or HSL in CSS?<\/strong><br \/>HSL when you need to programmatically manipulate hue\/saturation\/lightness. HEX for static color values.<\/p>\n<div class=\"rt-cta\">\n<h3 style=\"margin:0 0 6px\">Want a design system audit and brand color cleanup?<\/h3>\n<p style=\"margin:0;opacity:.95\">Riman Agency runs design system audits.<\/p>\n<p><a href=\"\/contact\/\">Talk to Design<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS Color Converter Convert between HEX, RGB, and HSL color formats with live preview. Input HEX colorConvert Conversions Why color formats matter Designers think in HEX. Developers use RGB for transparency calculations. Modern CSS prefers HSL for hue manipulation. Knowing how to convert between them keeps your design tokens consistent. Frequently Asked Questions HEX or [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4756","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Color Converter \u2014 HEX, RGB, HSL - Riman Agency<\/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:\/\/rimanagency.com\/fr\/css-color-converter-hex-rgb-hsl\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Color Converter \u2014 HEX, RGB, HSL - Riman Agency\" \/>\n<meta property=\"og:description\" content=\"CSS Color Converter Convert between HEX, RGB, and HSL color formats with live preview. Input HEX colorConvert Conversions Why color formats matter Designers think in HEX. Developers use RGB for transparency calculations. Modern CSS prefers HSL for hue manipulation. Knowing how to convert between them keeps your design tokens consistent. Frequently Asked Questions HEX or [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rimanagency.com\/fr\/css-color-converter-hex-rgb-hsl\/\" \/>\n<meta property=\"og:site_name\" content=\"Riman Agency\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/css-color-converter-hex-rgb-hsl\\\/\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/css-color-converter-hex-rgb-hsl\\\/\",\"name\":\"CSS Color Converter \u2014 HEX, RGB, HSL - Riman Agency\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#website\"},\"datePublished\":\"2026-05-09T10:17:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/css-color-converter-hex-rgb-hsl\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rimanagency.com\\\/css-color-converter-hex-rgb-hsl\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/css-color-converter-hex-rgb-hsl\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rimanagency.com\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Color Converter \u2014 HEX, RGB, HSL\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#website\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/\",\"name\":\"Riman Agency\",\"description\":\"A Full Service Digital Marketing Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rimanagency.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#organization\",\"name\":\"Riman Agency\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/RIMANagency-all-logos-1-2.png\",\"contentUrl\":\"https:\\\/\\\/rimanagency.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/RIMANagency-all-logos-1-2.png\",\"width\":694,\"height\":211,\"caption\":\"Riman Agency\"},\"image\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Convertisseur de couleurs CSS \u2014 HEX, RGB, HSL - Agence Riman","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:\/\/rimanagency.com\/fr\/css-color-converter-hex-rgb-hsl\/","og_locale":"fr_CA","og_type":"article","og_title":"CSS Color Converter \u2014 HEX, RGB, HSL - Riman Agency","og_description":"CSS Color Converter Convert between HEX, RGB, and HSL color formats with live preview. Input HEX colorConvert Conversions Why color formats matter Designers think in HEX. Developers use RGB for transparency calculations. Modern CSS prefers HSL for hue manipulation. Knowing how to convert between them keeps your design tokens consistent. Frequently Asked Questions HEX or [&hellip;]","og_url":"https:\/\/rimanagency.com\/fr\/css-color-converter-hex-rgb-hsl\/","og_site_name":"Riman Agency","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rimanagency.com\/css-color-converter-hex-rgb-hsl\/","url":"https:\/\/rimanagency.com\/css-color-converter-hex-rgb-hsl\/","name":"Convertisseur de couleurs CSS \u2014 HEX, RGB, HSL - Agence Riman","isPartOf":{"@id":"https:\/\/rimanagency.com\/#website"},"datePublished":"2026-05-09T10:17:13+00:00","breadcrumb":{"@id":"https:\/\/rimanagency.com\/css-color-converter-hex-rgb-hsl\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rimanagency.com\/css-color-converter-hex-rgb-hsl\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rimanagency.com\/css-color-converter-hex-rgb-hsl\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rimanagency.com\/home\/"},{"@type":"ListItem","position":2,"name":"CSS Color Converter \u2014 HEX, RGB, HSL"}]},{"@type":"WebSite","@id":"https:\/\/rimanagency.com\/#website","url":"https:\/\/rimanagency.com\/","name":"Agence Riman","description":"Une agence de marketing num\u00e9rique \u00e0 service complet","publisher":{"@id":"https:\/\/rimanagency.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rimanagency.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":"Organization","@id":"https:\/\/rimanagency.com\/#organization","name":"Agence Riman","url":"https:\/\/rimanagency.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/rimanagency.com\/#\/schema\/logo\/image\/","url":"https:\/\/rimanagency.com\/wp-content\/uploads\/2022\/02\/RIMANagency-all-logos-1-2.png","contentUrl":"https:\/\/rimanagency.com\/wp-content\/uploads\/2022\/02\/RIMANagency-all-logos-1-2.png","width":694,"height":211,"caption":"Riman Agency"},"image":{"@id":"https:\/\/rimanagency.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/pages\/4756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/comments?post=4756"}],"version-history":[{"count":0,"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/pages\/4756\/revisions"}],"wp:attachment":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/media?parent=4756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}