{"id":646,"date":"2010-03-12T16:15:05","date_gmt":"2010-03-12T08:15:05","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=646"},"modified":"2020-06-29T19:38:29","modified_gmt":"2020-06-29T11:38:29","slug":"javascript-hex-rgb-hsl-color-convert","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2010\/03\/javascript-hex-rgb-hsl-color-convert\/","title":{"rendered":"JS HEX\u5341\u516d\u8fdb\u5236\u4e0eRGB, HSL\u989c\u8272\u7684\u76f8\u4e92\u8f6c\u6362"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/\">https:\/\/www.zhangxinxu.com<\/a><br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=646\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=646<\/a><\/p>\n<h3>\u4e00\u3001\u5173\u4e8e\u989c\u8272\u7684\u8868\u793a<\/h3>\n<p>\u989c\u8272\u7684\u8868\u793a\u65b9\u5f0f\u4e0d\u77e5\u4e00\u79cd\uff0c\u4ecephotoshop\u7684\u53d6\u8272\u9762\u677f\u5c31\u53ef\u4ee5\u770b\u51fa\uff0c\u5982\u4e0b\uff1a<br \/>\n<a href=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_143923.png\"><img loading=\"lazy\" decoding=\"async\" class=\"mt5\" alt=\"\u989c\u8272\u7684\u8868\u793a\u65b9\u5f0f \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_143923.png\" title=\"\u989c\u8272\u7684\u8868\u793a\u65b9\u5f0f \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" class=\"alignnone\" width=\"523\" height=\"383\" \/><\/a><\/p>\n<p>\u4e0a\u56fe\u5171\u663e\u793a\u4e865\u79cd\u989c\u8272\u7684\u8868\u793a\u65b9\u6cd5\uff1aHSB,lab,RGB,CMYK\u4e0e\u5341\u516d\u8fdb\u5236\u8868\u793a\u6cd5<\/p>\n<p>\u5728CSS\u4e2d\uff0c\u6211\u4eec\u4e5f\u7ecf\u5e38\u4e0e\u989c\u8272\u6253\u4ea4\u9053\uff0c\u5176\u4e2d\u6709color(\u6587\u5b57\u989c\u8272)\uff0c\u8fd8\u6709\u4e00\u4e2a\u5c31\u662fbackground-color\u80cc\u666f\u989c\u8272\uff0c\u8fd8\u6709\u5c31\u662fborder-color\u3002\u4e00\u822c\uff0c\u6211\u4eec\u4e60\u60ef\u7528\u5341\u516d\u8fdb\u5236\u8868\u793a\u989c\u8272\uff0c<span class=\"s\">\/\/zxx:AS\u4e2d\u4e5f\u662f\u5982\u6b64\uff0c\u4e0d\u8fc7\u662f\u4ee5&#8221;0x&#8221;\u6253\u5934\uff0c\u800c\u4e0d\u662f&#8221;#&#8221;<\/span>\uff0c\u4f8b\u5982\u9ed1\u8272\u8868\u793a\u4e3a\uff1a#000000;\u5728CSS 2.1\u4e2d\uff0c\u8fd8\u652f\u6301RGB\u7684\u989c\u8272\u8868\u793a\u6cd5\uff0cIE\uff0cFirefox\u7b49\u6d4f\u89c8\u5668\u5747\u652f\u6301\uff0c\u4f8b\u5982\u9ed1\u8272\u53ef\u4ee5\u8868\u793a\u4e3aRGB(0, 0, 0);<\/p>\n<p>\u5728CSS3\u4e2d\uff0c\u589e\u52a0\u4e86        \t<a href=\"https:\/\/www.zhangxinxu.com\/css3\/css3-hsl-colors.php\">HSL colors<\/a>            <a href=\"https:\/\/www.zhangxinxu.com\/css3\/css3-hsla-colors.php\">HSLA colors<\/a>           <a href=\"https:\/\/www.zhangxinxu.com\/css3\/css3-rgba-colors.php\">RGBA colors<\/a>\u8868\u793a\u65b9\u6cd5\uff0c\u4e0d\u8fc7\u8fd9\u4e9b\u8fd9\u91cc\u4e0d\u8ba8\u8bba\u3002<\/p>\n<p>\u66f4\u591a\u989c\u8272\u7684\u77e5\u8bc6\u53ef\u4ee5\u70b9\u51fb\u8fd9\u91cc\uff1a<a target=\"_blank\" href=\"https:\/\/zh.wikipedia.org\/wiki\/%E9%A2%9C%E8%89%B2\">\u7ef4\u57fa\u767e\u79d1-\u989c\u8272<\/a><\/p>\n<h3>\u4e8c\u3001\u989c\u8272\u8868\u793a\u65b9\u5f0f\u8f6c\u6362\u7684\u5fc5\u8981\u6027<\/h3>\n<p>\u8fd9\u786e\u5b9e\u662f\u4e2a\u7591\u95ee\uff0c\u867d\u8bf4\u5728CSS\u4e2d\u6709\u4e24\u79cd\u989c\u8272\u8868\u793a\u65b9\u6cd5\uff0c\u90a3\u4e48\u4e3a\u4ec0\u4e48\u8fd8\u6709\u8fdb\u884c\u989c\u8272\u8868\u793a\u65b9\u5f0f\u7684\u8f6c\u6362\u5462\uff0c\u4e0d\u90fd\u662f\u4e00\u6837\u7684\u8868\u793a\u989c\u8272\u5417\uff1f<br \/>\n\u786e\u5b9e\uff0c\u5927\u591a\u6570\u60c5\u51b5\u4e0b\uff0c\u8f6c\u6362\u65f6\u6ca1\u6709\u5fc5\u8981\u7684\uff0c\u4f46\u662fweb\u9875\u9762\u5343\u53d8\u4e07\u5316\uff0c\u9047\u5230\u7684\u60c5\u51b5\u5343\u5947\u767e\u602a\uff0c\u662f\u6709\u9700\u8981\u8f6c\u6362\u7684\u60c5\u51b5\u3002<\/p>\n<p>\u4e3e\u4e2a\u6211\u9047\u5230\u7684\u4f8b\u5b50\u5427\uff0c\u6211\u53bb\u5e749\u6708\u4efd\uff0c\u5b66\u4e60Ajax\u7684\u65f6\u5019\uff0c\u505a\u8fc7\u4e00\u4e2aAjax+PHP\u591a\u4eba\u5728\u7ebf\u804a\u5929\u5ba4\u804a\u5929\u5ba4\uff08\u8bbf\u95ee\u8be5\u9875\u9762\u70b9\u51fb<a target=\"_blank\" class=\"a_link\" href=\"https:\/\/www.zhangxinxu.com\/jq\/study\/200911\/chat_index.php\">\u8fd9\u91cc<\/a>\uff09\uff0c\u5176\u4e2d\u91cc\u9762\u6709\u4e2a\u5f88\u91cd\u8981\u7684\u5de5\u5177\u5c31\u662f\u53d6\u8272\u9762\u677f\uff0c\u7528\u4ee5\u6539\u53d8\u663e\u793a\u7684\u6587\u5b57\u989c\u8272\u7684\u3002\u89c1\u4e0b\u56fe\uff1a<br \/>\n<a href=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_150626.png\"><img loading=\"lazy\" decoding=\"async\" class=\"mt5\" alt=\"\u804a\u5929\u5ba4\u53d6\u8272\u9762\u677f \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_150626.png\" title=\"\u804a\u5929\u5ba4\u53d6\u8272\u9762\u677f \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" class=\"alignnone\" width=\"516\" height=\"300\" \/><\/a><\/p>\n<p>\u91cc\u9762\u5bf9\u989c\u8272\u5b57\u7b26\u505a\u4e86\u4e9b\u5904\u7406\uff0c\u5c31\u662f\u4ee5\u5341\u516d\u8fdb\u5236\u7684\u5f62\u5f0f\u663e\u793a\u3002\u505a\u5904\u7406\u5f52\u6839\u7ed3\u5e95\u7684\u539f\u56e0\u5c31\u662f\u6d4f\u89c8\u5668\u7684\u5dee\u5f02\uff0c\u5dee\u5f02\u5982\u4e0b\uff1a<br \/>\n\u5728Firefox\u6d4f\u89c8\u5668\u4e0b\uff08chrome\u540c\u6837\uff09\uff0c\u5373\u4f7f\u4f60\u4f7f\u7528\u4e86\u5341\u516d\u8fdb\u5236\u5f62\u5f0f\u8868\u793a\u4e86\u989c\u8272\u503c\uff0c\u4f46\u662f\u5728HTML\u9875\u9762\u4e2d\uff0c\u5176\u5374\u662f\u4ee5RGB\u5f62\u5f0f\u8868\u793a\u7684\uff0c\u8fd9\u4e0eIE\u6d4f\u89c8\u5668\u662f\u4e0d\u4e00\u81f4\u7684\u3002\u4e5f\u5c31\u662f\u8bf4\uff0c\u5982\u679c\u4e0d\u505a\u5b57\u7b26\u663e\u793a\u7684\u5904\u7406\u7684\u8bdd\uff0c\u90a3\u4e48Firefox\u6d4f\u89c8\u5668\u4e0b\uff0c\u4e0a\u9762\u7684\u804a\u5929\u989c\u8272\u9762\u677f\u83b7\u5f97\u7684\u503c\u5c31\u662f\u7c7b\u4f3c\u4e8eRGB(255,0,0)\u8fd9\u79cd\u5f62\u5f0f\u7684\uff0c\u800c\u4e0d\u662f&#8221;#FF0000&#8243;\uff0c\u6211\u4eec\u53ef\u4ee5\u505a\u4e2a\u7b80\u5355\u7684\u6d4b\u8bd5\uff0c\u770b\u5982\u4e0b\u7684\u4ee3\u7801\u3002<\/p>\n<div class=\"zxx_code\">\n<pre>&lt;button style=\"color:#ff3300;\" onclick=\"javascript:alert(this.style.color);\">\u70b9\u51fb\u6211&lt;\/button><\/pre>\n<\/div>\n<p>\u7ed3\u679cFirefox\u4e0b\u7684\u663e\u793a\u662f\uff0c\u5982\u4e0b\u56fe\uff1a<br \/>\n<a href=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_151743.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"Firefox\u6d4f\u89c8\u5668\u4e0b\u7684\u989c\u8272\u663e\u793a \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_151743.png\" title=\"Firefox\u6d4f\u89c8\u5668\u4e0b\u7684\u989c\u8272\u663e\u793a \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" class=\"alignnone\" width=\"367\" height=\"146\" \/><\/a><\/p>\n<p>\u800cIE\u6d4f\u89c8\u5668\u4e0b\u5219\u662f\uff1a<br \/>\n<a href=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_151803.png\"><img loading=\"lazy\" decoding=\"async\" alt=\"IE\u6d4f\u89c8\u5668\u4e0b\u989c\u8272\u7684\u8868\u793a \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201003\/2010-03-12_151803.png\" title=\"IE\u6d4f\u89c8\u5668\u4e0b\u989c\u8272\u7684\u8868\u793a \u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b\" class=\"alignnone\" width=\"270\" height=\"133\" \/><\/a><\/p>\n<p>\u60a8\u53ef\u4ee5\u81ea\u5df1\u70b9\u51fb\u4e0b\u9762\u7684\u6309\u94ae\u6d4b\u8bd5\u4e00\u4e0b\uff1a<br \/>\n<button style=\"color:#ff3300;\" onclick=\"javascript:alert(this.style.color);\">\u70b9\u51fb\u6211<\/button><\/p>\n<p>\u53ef\u89c1\uff0c\u8fd9\u79cd\u989c\u8272\u8868\u793a\u7684\u5dee\u5f02\u6027\uff0c\u4f7f\u5f97\u6709\u65f6\u5019\uff0c\u989c\u8272\u8f6c\u6362\u6210\u4e3a\u7684\u5fc5\u987b\u3002<\/p>\n<h3>\u4e09\u3001JavaScript\u989c\u8272\u8f6c\u6362\u7684\u6838\u5fc3<\/h3>\n<p>JavaScript\u989c\u8272\u8f6c\u6362\u7684\u6838\u5fc3\u5c31\u662f\u8fdb\u5236\u95f4\u7684\u8f6c\u6362\u3002RGB\u683c\u5f0f\u5176\u5b9e\u5c31\u662f\u5341\u8fdb\u5236\u8868\u793a\u6cd5\uff0c\u6240\u4ee5\uff0c\u5341\u516d\u8fdb\u5236\u989c\u8272\u4e0eRGB\u989c\u8272\u7684\u8f6c\u6362\u5c31\u662f\u5341\u516d\u8fdb\u5236\u4e0e\u5341\u8fdb\u5236\u4e4b\u95f4\u7684\u8f6c\u6362\u3002<\/p>\n<p>\u5341\u516d\u8fdb\u5236\u8f6c\u6362\u4e3a\u5341\u8fdb\u5236\u76f8\u5bf9\u5bb9\u6613\u4e9b\uff0c\u6838\u5fc3\u4ee3\u7801\u5982\u4e0b\u793a\u4f8b\uff1a<code>parseInt(\"0xFF\")<\/code>\uff0c\u5176\u7ed3\u679c\u5c31\u662f255\uff0c&#8221;0x&#8221;\u5c31\u8868\u660e\u5f53\u524d\u662f16\u8fdb\u5236\uff0c\u7531\u4e8eparseInt\u540e\u9762\u65e0\u53c2\u6570\uff0c\u9ed8\u8ba4\u5c31\u662f\u8f6c\u6362\u4e3a10\u8fdb\u5236\u4e86\u3002<\/p>\n<p>\u5341\u8fdb\u5236\u8f6c\u6362\u4e3a16\u8fdb\u5236\uff0c\u6838\u5fc3\u4ee3\u7801\u5982\u4e0b\uff1a<code>var num=255; num.toString(16);<\/code>\uff0c\u5176\u7ed3\u679c\u662fFF\u3002&#8221;16&#8243;\u8868\u793a\u6570\u503c\u8f6c\u6362\u4e3a16\u8fdb\u5236\u5b57\u7b26\u4e32\u3002<\/p>\n<h3>\u56db\u3001JavaScript\u989c\u8272\u8868\u793a\u65b9\u5f0f\u7684\u8f6c\u6362\u7684\u5b9e\u73b0<\/h3>\n<p><script src='https:\/\/www.zhangxinxu.com\/study\/js\/zxx.color_exchange.js'><\/script><br \/>\n\u8f6c\u6362\u4ee3\u7801\u5982\u4e0b\uff0c\u9996\u5148\u662fRGB\u989c\u8272\u8f6c\u6362\u4e3a\u5341\u516d\u8fdb\u5236\u8868\u793a\uff1a<\/p>\n<pre>String.prototype.colorHex = function(){\r\n    var that = this;\r\n    <span style=\"color:green;\">\/\/\u5341\u516d\u8fdb\u5236\u989c\u8272\u503c\u7684\u6b63\u5219\u8868\u8fbe\u5f0f<\/span>\r\n    var reg = \/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$\/;\r\n    <span style=\"color:green;\">\/\/ \u5982\u679c\u662frgb\u989c\u8272\u8868\u793a<\/span>\r\n    if (\/^(rgb|RGB)\/.test(that)) {\r\n        var aColor = that.replace(\/(?:\\(|\\)|rgb|RGB)*\/g, \"\").split(\",\");\r\n        var strHex = \"#\";\r\n        for (var i=0; i&lt;aColor.length; i++) {\r\n            var hex = Number(aColor[i]).toString(16);\r\n            if (hex.length < 2) {\r\n                hex = '0' + hex;    \r\n            }\r\n            strHex += hex;\r\n        }\r\n        if (strHex.length !== 7) {\r\n            strHex = that;    \r\n        }\r\n        return strHex;\r\n    } else if (reg.test(that)) {\r\n        var aNum = that.replace(\/#\/,\"\").split(\"\");\r\n        if (aNum.length === 6) {\r\n            return that;    \r\n        } else if(aNum.length === 3) {\r\n            var numHex = \"#\";\r\n            for (var i=0; i&lt;aNum.length; i+=1) {\r\n                numHex += (aNum[i] + aNum[i]);\r\n            }\r\n            return numHex;\r\n        }\r\n    }\r\n    return that;\r\n};<\/pre>\n<p>\u7136\u540e\u662f\u5341\u516d\u8fdb\u5236\u989c\u8272\u8f6c\u4e3aRGB\u683c\u5f0f\uff1a<\/p>\n<pre>String.prototype.colorRgb = function(){\r\n    var sColor = this.toLowerCase();\r\n    <span style=\"color:green;\">\/\/\u5341\u516d\u8fdb\u5236\u989c\u8272\u503c\u7684\u6b63\u5219\u8868\u8fbe\u5f0f<\/span>\r\n    var reg = \/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$\/;\r\n    <span style=\"color:green;\">\/\/ \u5982\u679c\u662f16\u8fdb\u5236\u989c\u8272<\/span>\r\n    if (sColor &amp;&amp; reg.test(sColor)) {\r\n        if (sColor.length === 4) {\r\n            var sColorNew = \"#\";\r\n            for (var i=1; i&lt;4; i+=1) {\r\n                sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1));    \r\n            }\r\n            sColor = sColorNew;\r\n        }\r\n        <span style=\"color:green;\">\/\/\u5904\u7406\u516d\u4f4d\u7684\u989c\u8272\u503c<\/span>\r\n        var sColorChange = [];\r\n        for (var i=1; i&lt;7; i+=2) {\r\n            sColorChange.push(parseInt(\"0x\"+sColor.slice(i, i+2)));    \r\n        }\r\n        return \"RGB(\" + sColorChange.join(\",\") + \")\";\r\n    }\r\n    return sColor;\r\n};<\/pre>\n<p>\u4e0a\u9762\u989c\u8272\u8f6c\u6362\u65b9\u6cd5\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<div class=\"zxx_code\">\n<pre>\r\nvar sRgb = \"RGB(23, 245, 56)\" , sHex = \"#34538b\";\r\nvar sHexColor = sRgb.<b>colorHex()<\/b>;\r\nvar sRgbColor = sHex.<b>colorRgb()<\/b>;\r\n<\/pre>\n<\/div>\n<p>\u5176\u4e2d<code>colorHex()<\/code>\u8868\u793a\u8f6c\u6362\u4e3a\u5341\u516d\u8fdb\u5236\u65b9\u6cd5\uff0c<code>colorRgb()<\/code>\u8868\u793a\u8f6c\u4e3aRGB\u989c\u8272\u503c\u7684\u65b9\u6cd5\u3002<\/p>\n<p>\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a target=\"_blank\" class=\"a_link\" href=\"https:\/\/www.zhangxinxu.com\/study\/201003\/color-exchange-test.html\">\u6d4b\u8bd5demo\u9875\u9762<\/a><\/p>\n<p>\u60a8\u4e5f\u53ef\u4ee5\u76f4\u63a5\u5728\u4e0b\u9762\u8fdb\u884c\u6d4b\u8bd5\uff1a<\/p>\n<p>\u5341\u516d\u8fdb\u5236\u989c\u8272\u503c\uff1a<input id=\"v1\" type=\"text\" value=\"#34538b\" \/><input id=\"b1\" type=\"button\" value=\"\u8f6c\u4e3aRGB\u683c\u5f0f\" \/><\/p>\n<p id=\"showRgb\">\n<p>GRB\u989c\u8272\u503c\uff1a<input id=\"v2\" type=\"text\" value=\"RGB(23, 245, 56)\" \/><input id=\"b2\" type=\"button\" value=\"\u8f6c\u4e3a\u5341\u516d\u8fdb\u5236\u5f62\u5f0f\" \/><\/p>\n<p id=\"showHex\">\n<p><script type=\"text\/javascript\">\nwindow.onload = function(){\n    var obj = {\n        v1: document.getElementById(\"v1\"),    \n        b1: document.getElementById(\"b1\"),    \n        s1: document.getElementById(\"showRgb\"),\n        v2: document.getElementById(\"v2\"),    \n        b2: document.getElementById(\"b2\"),    \n        s2: document.getElementById(\"showHex\")\n    };\n    obj.b1.onclick = function(){\n        var v = obj.v1.value;\n        obj.s1.innerHTML = v.colorRgb();\n    };\n    obj.b2.onclick = function(){\n        var v = obj.v2.value;\n        obj.s2.innerHTML = v.colorHex();\n    };\n};\n<\/script><\/p>\n<p><strong>\u8bf4\u660e\uff1a<\/strong>\u6b64JavaScript\u5b9e\u73b0\u7684\u4e00\u4e2a\u5c0f\u5c0f\u539f\u5219\u662f\u201c\u4ee5\u7edf\u4e00\u7684\u5f62\u5f0f\u663e\u793a\u201d\uff0c\u6240\u4ee5\u5341\u516d\u8fdb\u5236\u7f29\u5199\u7684\u989c\u8272\u503c\uff08\u5982\uff1a#333\uff09\u4f1a\u4ee5#333333\u663e\u793a\u3002\u5982\u679c\u8f6c\u4e3a\u7684\u5b57\u7b26\u683c\u5f0f\u4e0d\u5339\u914d\u6216\u662f\u503c\u6ea2\u51fa\u8fd4\u56de\uff0c\u5219\u4f1a\u539f\u503c\u8fd4\u56de\u3002\u4f8b\u5982\uff1aRGB(0,0,256)\u4f1a\u8fd4\u56deRGB(0,0,256)\uff0c#3456\u4f1a\u8fd4\u56de#3456\uff0c#egd\u4f1a\u8fd4\u56de#egd\u3002<\/p>\n<p><strong>\u65b0\u589e\u4e8e2015-05-20<\/strong><br \/>\n\u8fd9\u91cc\u518d\u9644\u4e0aHSL\u8f6cRGB\u4ee5\u53caRGB\u8f6cHSL\u7684\u4ee3\u7801\uff0c\u51fa\u5904\u89c1<a href=\"https:\/\/stackoverflow.com\/questions\/2353211\/hsl-to-rgb-color-conversion\" target=\"_blank\">\u8fd9\u91cc<\/a>\u3002<\/p>\n<p><strong>HSL\u8f6cRGB<\/strong><\/p>\n<div class=\"zxx_code\">\n<pre><span style=\"color:green;\">\/**\r\n * HSL\u989c\u8272\u503c\u8f6c\u6362\u4e3aRGB. \r\n * \u6362\u7b97\u516c\u5f0f\u6539\u7f16\u81ea http:\/\/en.wikipedia.org\/wiki\/HSL_color_space.\r\n * h, s, \u548c l \u8bbe\u5b9a\u5728 [0, 1] \u4e4b\u95f4\r\n * \u8fd4\u56de\u7684 r, g, \u548c b \u5728 [0, 255]\u4e4b\u95f4\r\n *\r\n * @param   Number  h       \u8272\u76f8\r\n * @param   Number  s       \u9971\u548c\u5ea6\r\n * @param   Number  l       \u4eae\u5ea6\r\n * @return  Array           RGB\u8272\u503c\u6570\u503c\r\n *\/<\/span>\r\nfunction hslToRgb(h, s, l) {\r\n    var r, g, b;\r\n\r\n    if(s == 0) {\r\n        r = g = b = l; \/\/ achromatic\r\n    } else {\r\n        var hue2rgb = function hue2rgb(p, q, t) {\r\n            if(t &lt; 0) t += 1;\r\n            if(t &gt; 1) t -= 1;\r\n            if(t &lt; 1\/6) return p + (q - p) * 6 * t;\r\n            if(t &lt; 1\/2) return q;\r\n            if(t &lt; 2\/3) return p + (q - p) * (2\/3 - t) * 6;\r\n            return p;\r\n        }\r\n\r\n        var q = l &lt; 0.5 ? l * (1 + s) : l + s - l * s;\r\n        var p = 2 * l - q;\r\n        r = hue2rgb(p, q, h + 1\/3);\r\n        g = hue2rgb(p, q, h);\r\n        b = hue2rgb(p, q, h - 1\/3);\r\n    }\r\n\r\n    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\r\n}<\/pre>\n<\/div>\n<p><strong>RGB\u8f6cHSL<\/strong><\/p>\n<div class=\"zxx_code\">\n<pre><span style=\"color:green;\">\/**\r\n * RGB \u989c\u8272\u503c\u8f6c\u6362\u4e3a HSL.\r\n * \u8f6c\u6362\u516c\u5f0f\u53c2\u8003\u81ea http:\/\/en.wikipedia.org\/wiki\/HSL_color_space.\r\n * r, g, \u548c b \u9700\u8981\u5728 [0, 255] \u8303\u56f4\u5185\r\n * \u8fd4\u56de\u7684 h, s, \u548c l \u5728 [0, 1] \u4e4b\u95f4\r\n *\r\n * @param   Number  r       \u7ea2\u8272\u8272\u503c\r\n * @param   Number  g       \u7eff\u8272\u8272\u503c\r\n * @param   Number  b       \u84dd\u8272\u8272\u503c\r\n * @return  Array           HSL\u5404\u503c\u6570\u7ec4\r\n *\/<\/span>\r\nfunction rgbToHsl(r, g, b) {\r\n    r \/= 255, g \/= 255, b \/= 255;\r\n    var max = Math.max(r, g, b), min = Math.min(r, g, b);\r\n    var h, s, l = (max + min) \/ 2;\r\n\r\n    if (max == min){ \r\n        h = s = 0; \/\/ achromatic\r\n    } else {\r\n        var d = max - min;\r\n        s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\r\n        switch(max) {\r\n            case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\r\n            case g: h = (b - r) \/ d + 2; break;\r\n            case b: h = (r - g) \/ d + 4; break;\r\n        }\r\n        h \/= 6;\r\n    }\r\n\r\n    return [h, s, l];\r\n}<\/pre>\n<\/div>\n<p>\u8fd9\u91cc\u8f6c\u6362\u7684HSL\u5e76\u4e0d\u80fd\u76f4\u63a5\u5f53\u4f5cCSS\u989c\u8272\u503c\u5904\u7406\uff0c\u56e0\u4e3a\u8303\u56f4\u4e0d\u4e00\u6837\u3002<\/p>\n<p>H\u6307Hue(\u8272\u8c03)\u3002 0(\u6216360)\u8868\u793a\u7ea2\u8272\uff0c120\u8868\u793a\u7eff\u8272\uff0c240\u8868\u793a\u84dd\u8272\uff0c\u5f53\u7136\u53ef\u53d6\u5176\u4ed6\u6570\u503c\u6765\u786e\u5b9a\u5176\u5b83\u989c\u8272\uff1b<br \/>\nS\u6307Saturation(\u9971\u548c\u5ea6)\u3002 \u53d6\u503c\u4e3a0%\u5230100%\u4e4b\u95f4\u7684\u503c\uff1b<br \/>\nL\u6307Lightness(\u4eae\u5ea6)\u3002 \u53d6\u503c\u4e3a0%\u5230100%\u4e4b\u95f4\u7684\u503c\uff1b<\/p>\n<p>\u81ea\u5df1\u9700\u8981\u518d\u8f6c\u6362\u4e0b\u3002<\/p>\n<p>\u5173\u4e8eHSL\uff0c\u53ef\u4ee5\u53c2\u89c1\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/css3\/css3-hsl-colors.php\" rel=\"noopener\" target=\"_blank\">css3-hsl-colors<\/a><\/p>\n<p><strong>\u8865\u5145\u4e8e2018-11-23<\/strong><br \/>\n\u589e\u52a0\u4e2a<strong>RGB\u8f6cHSB\/HSV<\/strong>\u7684\u65b9\u6cd5\uff1a<\/p>\n<pre>function rgbToHsv(r, g, b) {\r\n    r = r \/ 255;\r\n    g = g \/ 255;\r\n    b = b \/ 255;\r\n    var h, s, v;\r\n    var min = Math.min(r, g, b);\r\n    var max = v = Math.max(r, g, b);\r\n    var l = (min + max) \/ 2;\r\n    var difference = max - min;\r\n\r\n    if (max == min) {\r\n        h = 0;\r\n    } else {\r\n        switch (max) {\r\n        case r:\r\n            h = (g - b) \/ difference + (g &lt; b ? 6 : 0);\r\n            break;\r\n        case g:\r\n            h = 2.0 + (b - r) \/ difference;\r\n            break;\r\n        case b:\r\n            h = 4.0 + (r - g) \/ difference;\r\n            break;\r\n        }\r\n        h = Math.round(h * 60);\r\n    }\r\n    if (max == 0) {\r\n        s = 0;\r\n    } else {\r\n        s = 1 - min \/ max;\r\n    }\r\n    s = Math.round(s * 100);\r\n    v = Math.round(v * 100);\r\n    return [h, s, v];\r\n}<\/pre>\n<p><strong>\u8865\u5145\u4e8e2020-06-29<\/strong><br \/>\n\u4eca\u5929\u53d1\u73b0\u9700\u8981\u7528\u5230HSV\/HSB\u8f6cRGB\u8272\u503c\u7684\u573a\u666f\uff0c\u8865\u4e0a\u4e00\u6bb5\u4ee3\u7801\uff1a<\/p>\n<pre>\/\/ \u53c2\u6570arr\u76843\u4e2a\u503c\u5206\u522b\u5bf9\u5e94[h, s, v]\r\nfunction hsvToRgb(arr) {\r\n    var h = arr[0], s = arr[1], v = arr[2];\r\n    s = s \/ 100;\r\n    v = v \/ 100;\r\n    var r = 0, g = 0, b = 0;\r\n    var i = parseInt((h \/ 60) % 6);\r\n    var f = h \/ 60 - i;\r\n    var p = v * (1 - s);\r\n    var q = v * (1 - f * s);\r\n    var t = v * (1 - (1 - f) * s);\r\n    switch (i) {\r\n        case 0:\r\n            r = v; g = t; b = p;\r\n            break;\r\n        case 1:\r\n            r = q; g = v; b = p;\r\n            break;\r\n        case 2:\r\n            r = p; g = v; b = t;\r\n            break;\r\n        case 3:\r\n            r = p; g = q; b = v;\r\n            break;\r\n        case 4:\r\n            r = t; g = p; b = v;\r\n            break;\r\n        case 5:\r\n            r = v; g = p; b = q;\r\n            break;\r\n        default:\r\n            break;\r\n    }\r\n    r = parseInt(r * 255.0)\r\n    g = parseInt(g * 255.0)\r\n    b = parseInt(b * 255.0)\r\n    return [r, g, b];\r\n}<\/pre>\n<p><strong>\u8865\u5145\u4e8e2017\u5e749\u670819\u65e5<\/strong><br \/>\n\u518d\u8865\u5145\u4e2a\u4efb\u610f\u8272\u503c\uff08\u751a\u81f3\u662fCSS\u989c\u8272\u5173\u952e\u5b57\uff09\u8f6c\u6362\u4e3aRGB\u989c\u8272\u7684\u65b9\u6cd5\uff0c\u6b64\u65b9\u6cd5IE9+\u6d4f\u89c8\u5668\u652f\u6301\uff0c\u57fa\u4e8eDOM\u7279\u6027\u5b9e\u73b0\u3002<\/p>\n<pre>var colorToRgb = function (color) {\r\n    var div = document.createElement('div');\r\n    div.style.backgroundColor = color;\r\n    document.body.appendChild(div);\r\n    var c = window.getComputedStyle(div).backgroundColor;    \r\n    document.body.removeChild(div);\r\n    return c;\r\n};<\/pre>\n<p>\u9700\u8981\u4fdd\u8bc1color\u662f\u4e0d\u5e26\u900f\u660e\u5ea6\u7684\uff0c\u5426\u5219\u6700\u540e\u5f97\u5230\u7684\u56de\u4e8bRGBA\u989c\u8272\uff0c\u800c\u4e0d\u662fRGB\u989c\u8272\u3002<\/p>\n<h3>\u4e94\u3001\u7ed3\u8bed<\/h3>\n<p>\u6211js\u8d44\u5386\u5c1a\u6d45\uff0c\u6240\u4ee5\u4ee3\u7801\u53ef\u80fd\u4f1a\u9047\u5230\u4ee5\u4e0b\u4e9b\u4e0d\u8db3\uff1a<br \/>\n1\u3001\u53ef\u80fd\u6f0f\u4e86\u4e9b\u7279\u6b8a\u60c5\u51b5\uff1b<br \/>\n2\u3001\u5728\u6548\u7387\u65b9\u9762\u8fd8\u53ef\u4ee5\u8fdb\u4e00\u6b65\u6539\u8fdb\uff1b<br \/>\n3\u3001\u5728\u7b97\u6cd5\u4e0a\u53ef\u4ee5\u8fdb\u4e00\u6b65\u4f18\u5316\uff1b<\/p>\n<p>\u6b22\u8fce\u6307\u51fa\u8fd9\u4e9b\u4e0d\u8db3\u3002<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201611\/14.png\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u6765\u81ea<a href=\"https:\/\/www.zhangxinxu.com\/\">\u5f20\u946b\u65ed-\u946b\u7a7a\u95f4-\u946b\u751f\u6d3b<\/a>[<a href=\"https:\/\/www.zhangxinxu.com\/\">https:\/\/www.zhangxinxu.com<\/a>]<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=646\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=646<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6587\u9010\u5c42\u6df1\u5165\uff0c\u8bb2\u8ff0\u4f7f\u7528JavaScript\u5bf9HTML\u4e0eCSS\u4e2d\u7684\u989c\u8272\u503c\u8868\u793a\u65b9\u6cd5\uff08\u5341\u516d\u8fdb\u5236\u5f62\u5f0f\u4e0eRGB\u5f62\u5f0f\uff09\u4e4b\u95f4\u7684\u8fdb\u884c\u76f8\u4e92\u7684\u8f6c\u5316\u3002\u63d0\u4f9b\u5fc5\u8981\u7684\u63d2\u56fe\uff0c\u63d0\u4f9bdemo\u4ee5\u53ca\u6e90\u6587\u4ef6\u4e0b\u8f7d\uff0c\u5e0c\u671b\u80fd\u5bf9\u60a8\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[180],"tags":[333,1631,1632,337,335,1634,334,251,1633],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/646"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=646"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/646\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}