{"id":948,"date":"2012-05-22T14:40:18","date_gmt":"2012-05-22T12:40:18","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=948"},"modified":"2012-09-25T11:35:01","modified_gmt":"2012-09-25T09:35:01","slug":"obtenir-une-couleur-plus-sombre-ou-plus-claire-pour-css-javascript","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2012\/05\/22\/obtenir-une-couleur-plus-sombre-ou-plus-claire-pour-css-javascript\/","title":{"rendered":"Obtenir une couleur plus sombre ou plus claire pour CSS [javascript]"},"content":{"rendered":"\r\n<script type=\"text\/javascript\">\r\nvar pad = function(num, totalChars) {\r\n    var pad = '0';\r\n    num = num + '';\r\n    while (num.length < totalChars) {\r\n        num = pad + num;\r\n    }\r\n    return num;\r\n};\r\n\r\n\/\/ Ratio is between 0 and 1\r\nvar changeColor = function(color, ratio, darker) {\r\n    \/\/ Trim trailing\/leading whitespace\r\n    color = color.replace(\/^\\s*|\\s*$\/, '');\r\n\r\n    \/\/ Expand three-digit hex\r\n    color = color.replace(\r\n        \/^#?([a-f0-9])([a-f0-9])([a-f0-9])$\/i,\r\n        '#$1$1$2$2$3$3'\r\n    );\r\n\r\n    \/\/ Calculate ratio\r\n    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),\r\n        \/\/ Determine if input is RGB(A)\r\n        rgb = color.match(new RegExp('^rgba?\\\\(\\\\s*' +\r\n            '(\\\\d|[1-9]\\\\d|1\\\\d{2}|2[0-4][0-9]|25[0-5])' +\r\n            '\\\\s*,\\\\s*' +\r\n            '(\\\\d|[1-9]\\\\d|1\\\\d{2}|2[0-4][0-9]|25[0-5])' +\r\n            '\\\\s*,\\\\s*' +\r\n            '(\\\\d|[1-9]\\\\d|1\\\\d{2}|2[0-4][0-9]|25[0-5])' +\r\n            '(?:\\\\s*,\\\\s*' +\r\n            '(0|1|0?\\\\.\\\\d+))?' +\r\n            '\\\\s*\\\\)$'\r\n        , 'i')),\r\n        alpha = !!rgb && rgb[4] != null ? rgb[4] : null,\r\n\r\n        \/\/ Convert hex to decimal\r\n        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(\r\n            \/^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])\/i,\r\n            function() {\r\n                return parseInt(arguments[1], 16) + ',' +\r\n                    parseInt(arguments[2], 16) + ',' +\r\n                    parseInt(arguments[3], 16);\r\n            }\r\n        ).split(\/,\/),\r\n        returnValue;\r\n\r\n    \/\/ Return RGB(A)\r\n    return !!rgb ?\r\n        'rgb' + (alpha !== null ? 'a' : '') + '(' +\r\n            Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[0], 10) + difference, darker ? 0 : 255\r\n            ) + ', ' +\r\n            Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[1], 10) + difference, darker ? 0 : 255\r\n            ) + ', ' +\r\n            Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[2], 10) + difference, darker ? 0 : 255\r\n            ) +\r\n            (alpha !== null ? ', ' + alpha : '') +\r\n            ')' :\r\n        \/\/ Return hex\r\n        [\r\n            '#',\r\n            pad(Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[0], 10) + difference, darker ? 0 : 255\r\n            ).toString(16), 2),\r\n            pad(Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[1], 10) + difference, darker ? 0 : 255\r\n            ).toString(16), 2),\r\n            pad(Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[2], 10) + difference, darker ? 0 : 255\r\n            ).toString(16), 2)\r\n        ].join('');\r\n};\r\nvar lighterColor = function(color, ratio) {\r\n    return changeColor(color, ratio, false);\r\n};\r\nvar darkerColor = function(color, ratio) {\r\n    return changeColor(color, ratio, true);\r\n};\r\n\r\nvar plus = function(sens) {\r\n  var val = (!document.getElementById('result').innerHTML ? document.getElementById('color-css').value : document.getElementById('result').innerHTML);\r\n  document.getElementById('color-css').value = val;\r\n  var res=(sens==\"sombre\"?darkerColor(val,document.getElementById('perc').value):lighterColor(val,document.getElementById('perc').value));\r\n  document.getElementById('result').innerHTML=res;\r\n  document.getElementById('result-en-couleur').style.backgroundColor=res;\r\n};\r\n<\/script>\r\n\r\n<b>EDIT du 22\/05\/2012<\/b> : il existe un site qui permet de trouver plusieurs d\u00e9grad\u00e9s \u00e0 partir d'une couleur, et \u00e7a se passe sur <a href=\"http:\/\/0to255.com\/\" title=\"Lien vers un site de d\u00e9grad\u00e9s de couleurs\">http:\/\/0to255.com\/<\/a><br>\r\n<b>EDIT du 20\/09\/2012<\/b> : et voil\u00e0 encore un autre site un peu plus int\u00e9ressant que le pr\u00e9c\u00e9dent <a href=\"http:\/\/sassme.arc90.com\/\">http:\/\/sassme.arc90.com\/<\/a><br>\r\n<b>EDIT du 25\/09\/2012<\/b> : une autre fonction\/m\u00e9thode plus l\u00e9g\u00e8re est disponible tout en bas du billet\r\n\r\n<p>Voici un petit outil en ligne qui permet d'avoir une couleur plus claire ou plus sombre en se basant sur une couleur CSS et en demandant un pourcentage (exprim\u00e9 entre 0 et 1) \u00e0 appliquer :<\/p>\r\n<fieldset>\r\n<label for=\"color-css\">Couleur CSS: <input id=\"color-css\" type=\"text\" placeholder=\"ex: #F4F4F4\" \/><\/label><br \/>\r\n<label for=\"perc\">Pourcentage \u00e0 appliquer: <input id=\"perc\" type=\"text\" placeholder=\"ex: .2 pour 20%\" \/><\/label><br \/>\r\n<button onclick=\"plus('sombre'); return false\">plus sombre<\/button><button onclick=\"plus('clair'); return false\">plus claire<\/button>\r\n<div>R\u00e9sultat: <span id=\"result\"><\/span><\/div>\r\n<div id=\"result-en-couleur\" style=\"width:50px; height:50px\"><\/div>\r\n<\/fieldset>\r\n<p>Cette fonction vient directement de <a href=\"http:\/\/stackoverflow.com\/questions\/1507931\/generate-lighter-darker-color-in-css-using-javascript\" title=\"Lien vers le code d'origine\">stackoverflow.com<\/a> :<\/p>\n<pre class=\"brush:javascript\">\r\nvar pad = function(num, totalChars) {\r\n    var pad = '0';\r\n    num = num + '';\r\n    while (num.length &lt; totalChars) {\r\n        num = pad + num;\r\n    }\r\n    return num;\r\n};\r\n\r\n\/\/ Ratio is between 0 and 1\r\nvar changeColor = function(color, ratio, darker) {\r\n    \/\/ Trim trailing\/leading whitespace\r\n    color = color.replace(\/^\\s*|\\s*$\/, '');\r\n\r\n    \/\/ Expand three-digit hex\r\n    color = color.replace(\r\n        \/^#?([a-f0-9])([a-f0-9])([a-f0-9])$\/i,\r\n        '#$1$1$2$2$3$3'\r\n    );\r\n\r\n    \/\/ Calculate ratio\r\n    var difference = Math.round(ratio * 256) * (darker ? -1 : 1),\r\n        \/\/ Determine if input is RGB(A)\r\n        rgb = color.match(new RegExp('^rgba?\\\\(\\\\s*' +\r\n            '(\\\\d|[1-9]\\\\d|1\\\\d{2}|2[0-4][0-9]|25[0-5])' +\r\n            '\\\\s*,\\\\s*' +\r\n            '(\\\\d|[1-9]\\\\d|1\\\\d{2}|2[0-4][0-9]|25[0-5])' +\r\n            '\\\\s*,\\\\s*' +\r\n            '(\\\\d|[1-9]\\\\d|1\\\\d{2}|2[0-4][0-9]|25[0-5])' +\r\n            '(?:\\\\s*,\\\\s*' +\r\n            '(0|1|0?\\\\.\\\\d+))?' +\r\n            '\\\\s*\\\\)$'\r\n        , 'i')),\r\n        alpha = !!rgb &#038;& rgb[4] != null ? rgb[4] : null,\r\n\r\n        \/\/ Convert hex to decimal\r\n        decimal = !!rgb? [rgb[1], rgb[2], rgb[3]] : color.replace(\r\n            \/^#?([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])([a-f0-9][a-f0-9])\/i,\r\n            function() {\r\n                return parseInt(arguments[1], 16) + ',' +\r\n                    parseInt(arguments[2], 16) + ',' +\r\n                    parseInt(arguments[3], 16);\r\n            }\r\n        ).split(\/,\/),\r\n        returnValue;\r\n\r\n    \/\/ Return RGB(A)\r\n    return !!rgb ?\r\n        'rgb' + (alpha !== null ? 'a' : '') + '(' +\r\n            Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[0], 10) + difference, darker ? 0 : 255\r\n            ) + ', ' +\r\n            Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[1], 10) + difference, darker ? 0 : 255\r\n            ) + ', ' +\r\n            Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[2], 10) + difference, darker ? 0 : 255\r\n            ) +\r\n            (alpha !== null ? ', ' + alpha : '') +\r\n            ')' :\r\n        \/\/ Return hex\r\n        [\r\n            '#',\r\n            pad(Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[0], 10) + difference, darker ? 0 : 255\r\n            ).toString(16), 2),\r\n            pad(Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[1], 10) + difference, darker ? 0 : 255\r\n            ).toString(16), 2),\r\n            pad(Math[darker ? 'max' : 'min'](\r\n                parseInt(decimal[2], 10) + difference, darker ? 0 : 255\r\n            ).toString(16), 2)\r\n        ].join('');\r\n};\r\nvar lighterColor = function(color, ratio) {\r\n    return changeColor(color, ratio, false);\r\n};\r\nvar darkerColor = function(color, ratio) {\r\n    return changeColor(color, ratio, true);\r\n};\r\n\r\n\/\/ Use\r\nvar darker = darkerColor('rgba(80, 75, 52, .5)', .2);\r\nvar lighter = lighterColor('rgba(80, 75, 52, .5)', .2);\r\n<\/pre>\n<p>Une autre m\u00e9thode, plus l\u00e9g\u00e8re, inspir\u00e9e par <a href=\"http:\/\/stackoverflow.com\/questions\/5560248\/programmatically-lighten-or-darken-a-hex-color\">stackoverflow<\/a>:<\/p>\n<pre class=\"brush:javascript\">\r\nfunction LightenDarkenColor(col,amt,usePound,num,f,h,r,b,g) {\r\n  if (col[0]==\"#\") {\r\n    col = col.slice(1);\r\n    usePound = (usePound==undefined?true:usePound)\r\n  }\r\n\r\n  num = parseInt(col,16);\r\n  f=function(n) { return n>255?255:(n&lt;0?0:n) }\r\n  h=function(n) { return n.length&lt;2?\"0\"+n:n }\r\n  \r\n  r = h(f((num >> 16) + amt).toString(16));\r\n  b = h(f(((num >> 8) &#038; 0x00FF) + amt).toString(16));\r\n  g = h(f((num &#038; 0x0000FF) + amt).toString(16));\r\n\r\n  return (usePound?\"#\":\"\") + r + b + g;\r\n}\r\n\r\nLightenDarkenColor(\"#FAB787\",10);\r\nLightenDarkenColor(\"#FAB787\",-15);\r\nLightenDarkenColor(\"FAB787\",5,true);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>EDIT du 22\/05\/2012 : il existe un site qui permet de trouver plusieurs d\u00e9grad\u00e9s \u00e0 partir d&#8217;une couleur, et \u00e7a se passe sur http:\/\/0to255.com\/ EDIT du 20\/09\/2012 : et voil\u00e0 encore un autre site un peu plus int\u00e9ressant que le pr\u00e9c\u00e9dent http:\/\/sassme.arc90.com\/ EDIT du 25\/09\/2012 : une autre fonction\/m\u00e9thode plus l\u00e9g\u00e8re est disponible tout en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[13,33,26],"tags":[30,24,152,158,157],"class_list":["post-948","post","type-post","status-publish","format-standard","hentry","category-niveau-intermediaire","category-programmation","category-web-design","tag-css","tag-javascript","tag-niveau-intermediaire","tag-programmation","tag-web-design"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=948"}],"version-history":[{"count":19,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/948\/revisions"}],"predecessor-version":[{"id":1127,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/948\/revisions\/1127"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}