{"id":10728,"date":"2023-02-19T22:10:54","date_gmt":"2023-02-19T14:10:54","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=10728"},"modified":"2023-02-19T22:12:43","modified_gmt":"2023-02-19T14:12:43","slug":"css-color-function","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2023\/02\/css-color-function\/","title":{"rendered":"\u662f\u65f6\u5019\u4ecb\u7ecd\u8fd9\u51e0\u4e2a\u5168\u65b0\u7684CSS\u989c\u8272\u51fd\u6570\u4e86"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=10728\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=10728<\/a> \u946b\u7a7a\u95f4-\u946b\u751f\u6d3b<br \/>\n\u672c\u6587\u6b22\u8fce\u5206\u4eab\u4e0e\u805a\u5408\uff0c\u5168\u6587\u8f6c\u8f7d\u5c31\u4e0d\u5fc5\u4e86\uff0c\u5c0a\u91cd\u7248\u6743\uff0c\u5708\u5b50\u5c31\u8fd9\u4e48\u5927\uff0c\u82e5\u6025\u7528\u53ef\u4ee5\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<p><script>window.wxShareImgUrl = 'https:\/\/www.zhangxinxu.com\/study\/image\/share\/202302-color-function.jpg';<\/script><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/platter-cover.jpg\" width=\"480\" height=\"303\" alt=\"\u8c03\u8272\u677f\u5360\u4f4d\u56feCSS\u989c\u8272\" class=\"alignright clip thumb size-medium\" \/><\/p>\n<p>\u4eca\u5929\u6253\u5f00caniuse\u67e5\u4e86\u4e0b\uff0c\u51e0\u4e2a\u5168\u65b0\u7684\u989c\u8272\u51fd\u6570Chrome\u6d4f\u89c8\u5668\u4e5f\u652f\u6301\u4e86\uff0c\u8fd9\u53ef\u662f\u4e3a\u6570\u4e0d\u591a\u7684\u843d\u540eSafari\u6d4f\u89c8\u5668\u652f\u6301\u6570\u5e74\uff082023\u5e74 vs 2021\u5e74\uff09\u7684CSS\u65b0\u7279\u6027\u4e86\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-14_222048.png\" width=\"651\" height=\"261\" alt=\"Chrome\u6d4f\u89c8\u5668\u652f\u6301LCH\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4e0e\u6b64\u540c\u65f6\uff0cFirefox\u6d4f\u89c8\u5668\u4e5f\u5df2\u7ecf\u5f00\u542f\u201c\u5b9e\u9a8c\u652f\u6301\u201d\uff0c\u8bf4\u660e\u8fd9\u51e0\u4e2a\u989c\u8272\u51fd\u6570\u88ab\u6240\u6709\u73b0\u4ee3\u6d4f\u89c8\u5668\u652f\u6301\u5df2\u7ecf\u662f\u677f\u4e0a\u9489\u9489\u7684\u4e8b\u60c5\u4e86\uff0c\u8fd9\u5c31\u610f\u5473\u7740\u65f6\u673a\u6210\u719f\uff0c\u53ef\u4ee5\u597d\u597d\u4ecb\u7ecd\u8fd9\u51e0\u4e2a\u5168\u65b0\u7684CSS\u989c\u8272\u51fd\u6570\u4e86\u3002<\/p>\n<h3>\u4e00\u3001\u6700\u5148\u652f\u6301\u7684hwb()\u8272\u503c<\/h3>\n<p><code>hwb()<\/code>\u8272\u503c\u662f\u8fd9\u6279\u989c\u8272\u51fd\u6570\uff08CSS Level 4 Color Module\uff09\u4e2d\u6700\u65e9\u652f\u6301\u7684\uff0c\u517c\u5bb9\u6027\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-19_210504.png\" width=\"652\" height=\"247\" alt=\"hwb()\u989c\u8272\u6a21\u578b\" class=\"alignnone size-medium\" \/><\/p>\n<p>HWB\u989c\u8272\u6a21\u578b\u662fRGB\u989c\u8272\u6a21\u578b\u4e2d\u70b9\u7684\u5706\u67f1\u5750\u6807\u8868\u793a\uff0c\u7c7b\u4f3c\u4e8eHSL\u548cHSV\u3002\u5b83\u662f\u7531HSV\u7684\u521b\u5efa\u8005\u963f\u5c14\u7ef4\u00b7\u96f7\u00b7\u53f2\u5bc6\u65af\u4e8e1996\u5e74\u5f00\u53d1\u7684\uff0c\u4ee5\u89e3\u51b3HSV\u7684\u4e00\u4e9b\u95ee\u9898\uff0c\u76f8\u5bf9\u800c\u8a00\uff0cHWB\u5bf9\u4eba\u7c7b\u800c\u8a00\u8981\u66f4\u52a0\u76f4\u89c2\uff0c\u8ba1\u7b97\u901f\u5ea6\u4e5f\u66f4\u5feb\u4e00\u4e9b\u3002<\/p>\n<p>\u6b64\u989c\u8272\u6a21\u578b\u4f7f\u7528\u7684\u65f6\u5019\u5148\u9009\u62e9\u4e00\u4e2a\u4e3b\u8272\uff0c\u7136\u540e\u518d\u548c\u767d\u8272\u548c\uff08\u6216\uff09\u9ed1\u8272\u201c\u6df7\u5408\u201d\u4ee5\u4ea7\u751f\u6240\u9700\u7684\u989c\u8272\u3002\u5176\u4e2d\uff0c\u7b2c\u4e00\u4e2a\u5750\u6807H\uff08\u8272\u8c03\uff09\u4e0eHSL\u548cHSV\u4e2d\u7684\u8272\u8c03\u5750\u6807\u76f8\u540c\uff0c\u800c\u540e\u9762\u7684W\u548cB\u5206\u522b\u4ee3\u8868\u767d\u5ea6\u548c\u9ed1\u5ea6\uff0c\u8303\u56f4\u4e3a0\u2013100%\uff08\u62160\u20131\uff09\u3002<\/p>\n<p>\u4e0b\u56fe\u793a\u610f\u7684\u5c31\u662f\u4e0d\u540cH\u3001W\u3001B\u503c\u4e0b\u7684\u8272\u5757\u663e\u793a\u56fe\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-14_223742.png\" width=\"629\" height=\"729\" alt=\"\u8272\u5757\u663e\u793a\u793a\u610f\u56fe\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u7531\u4e8eHWB\u66f4\u7b26\u5408\u4eba\u7c7b\u7684\u76f4\u89c2\u8ba4\u77e5\uff0c\u56e0\u6b64\uff0cHWB\u6a21\u578b\u7684\u989c\u8272\u66f4\u5bb9\u6613\u8111\u8865\u51fa\u6765\u3002<\/p>\n<p>\u4f8b\u5982 hwb(0 0% 30%)\uff0c\u5c31\u662f\u7ea2\u8272\u52a0\u516530%\u7684\u9ed1\u8272\uff0c\u6548\u679c\u5c31\u662f\u504f\u6df1\u4e00\u70b9\u7684\u7ea2\u8272\u3002<\/p>\n<p>\u5b9e\u9645\u6e32\u67d3\u6548\u679c\u5982\u4e0b\u6240\u793a\uff08\u5b9e\u65f6\u6e32\u67d3\uff0c\u82e5\u65e0\u6548\u679c\uff0c\u591a\u534a\u975e\u539f\u7ad9\uff09\uff1a<\/p>\n<p><canvas style=\"background-color:hwb(0 0% 30%)\" width=\"200\" height=\"100\"><\/canvas><\/p>\n<h4>\u6848\u4f8b\u6f14\u793a<\/h4>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u5927\u5bb6\u4f53\u9a8cHWB\u989c\u8272\u6548\u679c\uff0c\u6211\u505a\u4e86\u4e2a\u6f14\u793a\u9875\u9762\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202302\/css-hwb-color-demo.php\" rel=\"noopener\" target=\"_blank\">CSS HWB()\u989c\u8272\u51fd\u6570\u6e32\u67d3demo<\/a><\/p>\n<p>\u62d6\u52a8\u6ed1\u5757\uff0c\u53ef\u4ee5\u770b\u5230\u5bf9\u5e94\u7684\u989c\u8272\u53d8\u5316\u6548\u679c\u3002<\/p>\n<p>\u5982\u4e0bGIF\u5f55\u5c4f\u6240\u793a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/hwb-color.gif\" width=\"238\" height=\"237\" alt=\"hwb\u989c\u8272\u53d8\u5316\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<h4>\u989c\u8272\u8f6c\u6362<\/h4>\n<p>\u4e0b\u9762\u5c55\u793a\u4e0b\u5982\u4f55\u4f7f\u7528JS\u5b9e\u73b0 RGB \u548c HWB \u4e4b\u95f4\u7684\u989c\u8272\u8f6c\u6362\uff08\u51fa\u81ea<a href=\"https:\/\/stackoverflow.com\/questions\/29461757\/how-to-display-hwb-hsb-cmyk-channels-using-rgb-or-hsl\" rel=\"noopener\" target=\"_blank\">\u8fd9\u91cc<\/a>\uff09\u3002<\/p>\n<pre>\/\/ RGB [0, 255]\r\n\/\/ HWB [0, 1]\r\nfunction rgb2hwb(r, g, b) {\r\n  \r\n  r \/= 255;\r\n  g \/= 255;\r\n  b \/= 255;\r\n  \r\n  var f, i,\r\n      w = Math.min(r, g, b);\r\n      v = Math.max(r, g, b);\r\n      black = 1 - v;\r\n  \r\n  if (v === w) return {h: 0, w: w, b: black};\r\n  f = r === w ? g - b : (g === w ? b - r : r - g);\r\n  i = r === w ? 3 : (g === w ? 5 : 1);\r\n\r\n  return {h: (i - f \/ (v - w)) \/ 6, w: w, b: black}\r\n}\r\n\r\n\/\/ HWB [0, 1]\r\n\/\/ RGB [0, 255]\r\nfunction hwb2rgb(h, w, b) {\r\n  \r\n  h *= 6;\r\n  \r\n  var v = 1 - b, n, f, i;\r\n  if (!h) return {r:v, g:v, b:v};\r\n  i = h|0;\r\n  f = h - i;\r\n  if (i & 1) f = 1 - f;\r\n  n = w + f * (v - w);\r\n  v = (v * 255)|0;\r\n  n = (n * 255)|0;\r\n  w = (w * 255)|0;\r\n\r\n  switch(i) {\r\n    case 6:\r\n    case 0: return {r:v, g:n, b: w};\r\n    case 1: return {r:n, g:v, b: w};\r\n    case 2: return {r:w, g:v, b: n};\r\n    case 3: return {r:w, g:n, b: v};\r\n    case 4: return {r:n, g:w, b: v};\r\n    case 5: return {r:v, g:w, b: n};\r\n  }\r\n}<\/pre>\n<p><span class=\"s\">\/\/zxx: \u4f20\u7edf\u8272\u503c\uff0c\u5982rgb, hsl #RRGGBB\u4e4b\u95f4\u7684\u989c\u8272\u8f6c\u6362JS\u53ef\u4ee5\u8bbf\u95ee\u6211\u4e4b\u524d\u8fd9\u7bc7\u6587\u7ae0\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2010\/03\/javascript-hex-rgb-hsl-color-convert\/\" rel=\"noopener\">JS HEX\u5341\u516d\u8fdb\u5236\u4e0eRGB, HSL\u989c\u8272\u7684\u76f8\u4e92\u8f6c\u6362<\/a>\u201d\u3002<\/span><\/p>\n<h3>\u4e8c\u3001lch()\u548clab()\u51fd\u6570<\/h3>\n<p>lch()\u548clab()\u989c\u8272\u51fd\u6570\u90fd\u662f\u57fa\u4e8eCIE LAB\u989c\u8272\u7a7a\u95f4\u5b9a\u4e49\u7684\uff0c\u662f\u4e00\u79cd\u66f4\u7b26\u5408\u4eba\u7c7b\u611f\u77e5\u7684\u989c\u8272\u8868\u793a\u65b9\u5f0f\uff0c\u8fd9\u4e24\u79cd\u989c\u8272\u51fd\u6570\u63d0\u4f9b\u6bd4\u901a\u5e38RGB\u989c\u8272\u7a7a\u95f4\u66f4\u5bbd\u5e7f\u7684\u989c\u8272\u8303\u56f4\u3002<\/p>\n<h4>lch()\u51fd\u6570<\/h4>\n<p>LCH\u51fd\u6570\u4e09\u4e2a\u5b57\u6bcd\u5206\u522b\u8868\u793a\uff1a<\/p>\n<p>L: \u660e\u5ea6(Lightness)\uff0c0%\uff5e100%<br \/>\nC: \u5f69\u5ea6(Chroma)\uff0c0~ \u221e<br \/>\nH: \u2f8a\u76f8(Hue)\uff0c0~360\uff08\u9690\u85cf\u5355\u4f4d\u662f\u89d2\u5ea6\u5355\u4f4ddeg\uff09<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/lch.png\" width=\"518\" height=\"245\" alt=\"LCH\u989c\u8272\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u5982\u679c\u8981\u5224\u65ad\u4e00\u4e2a\u6c34\u679c\u662f\u5426\u65b0\u9c9c\u8bf1\u4eba\uff0c\u5219\u6700\u9002\u5408\u7684\u989c\u8272\u51fd\u6570\u5c31\u662flch()\u51fd\u6570\uff0c\u56e0\u4e3a\u660e\u5ea6\u3001\u5f69\u5ea6\u5bf9\u5e94\u7684\u5c31\u662f\u6c34\u679c\u8868\u9762\u662f\u5426\u53cd\u5149\uff0c\u989c\u8272\u662f\u5426\u9971\u6ee1\u7b49\u3002<\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>lch(29.2345% 44.2 27);\r\nlch(52.2345% 72.2 56.2);\r\nlch(52.2345% 72.2 56.2 \/ .5);<\/pre>\n<p>\u5bf9\u5e94\u7684\u989c\u8272\u5206\u522b\u5982\u4e0b\u6240\u793a\uff08\u4e0d\u652f\u6301\u7684\u6d4f\u89c8\u5668\u80cc\u666f\u7070\u8272\uff09\uff1a<\/p>\n<p><canvas style=\"background-color:#eee;background-color:lch(29.2345% 44.2 27)\" width=\"200\" height=\"100\"><\/canvas> <canvas style=\"background-color:#eee;background-color:lch(52.2345% 72.2 56.2)\" width=\"200\" height=\"100\"><\/canvas> <canvas style=\"background-color:#eee;background-color:lch(52.2345% 72.2 56.2 \/ .5)\" width=\"200\" height=\"100\"><\/canvas><\/p>\n<h4>lab()\u51fd\u6570<\/h4>\n<p>LAB\u51fd\u6570\u4e09\u4e2a\u5b57\u6bcd\u5206\u522b\u8868\u793a\uff1a<\/p>\n<p>L: \u660e\u5ea6(Lightness)\uff0c0%\uff5e100%<br \/>\nA: \u989c\u2f8a\u901a\u9053\uff0c\u4ece\u6df1\u7eff\u2f8a\uff08\u4f4e\u4eae\u5ea6\uff09\u5230\u7070\u2f8a\uff08\u4e2d\u4eae\u5ea6\uff09\u518d\u5230\u4eae\u7c89\u7ea2\u2f8a\uff08\u2fbc\u4eae\u5ea6\uff09\uff0c\u662fLab\u989c\u8272\u7a7a\u95f4\u4e2d\u6cbfa\u8f74\u7684\u8ddd\u79bb\u3002<br \/>\nB: \u989c\u2f8a\u901a\u9053\uff0c\u4ece\u4eae\u84dd\u2f8a\uff08\u4f4e\u4eae\u5ea6\uff09\u5230\u7070\u2f8a\uff08\u4e2d\u4eae\u5ea6\uff09\u518d\u5230\u2ee9\u2f8a\uff08\u2fbc\u4eae\u5ea6\uff09\uff0cLab\u989c\u8272\u7a7a\u95f4\u4e2d\u6cbfb\u8f74\u7684\u8ddd\u79bb\uff08\u89c1\u4e0b\u56fe\u793a\u610f\uff09\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/lab.jpg\" width=\"241\" height=\"209\" alt=\"lab\u989c\u8272\u7a7a\u95f4\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>Lab\u989c\u8272\u7a7a\u95f4\u6700\u5927\u7684\u4f18\u70b9\u662f\u5176\u53ef\u4ee5\u5728\u4e0d\u540c\u7684\u8f6f\u4ef6\u4e2d\u4f7f\u7528\u540c\u4e00\u79cd\u91cf\u5316\u989c\u8272\uff0c\u4e5f\u5c31\u662fLab\u989c\u8272\u7a7a\u95f4\u4e0e\u8bbe\u5907\u65e0\u5173\uff0c\u8fd9\u5728\u5370\u5237\u4e2d\u975e\u5e38\u53d7\u7528\uff0c\u53ef\u4ee5\u62b9\u6d88\u5370\u5237\u4e2d\u7684\u989c\u8272\u504f\u5dee\uff0c\u4ece\u800c\u5b9e\u73b0\u8bbe\u8ba1\u540c\u6b65\u3002<\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>lab(29.2345% 39.3825 20.0664);\r\nlab(52.2345% 40.1645 59.9971);\r\nlab(52.2345% 40.1645 59.9971 \/ .5);<\/pre>\n<p>\u5bf9\u5e94\u7684\u989c\u8272\u5206\u522b\u5982\u4e0b\u6240\u793a\uff08\u5b9e\u65f6\u6e32\u67d3\uff0c\u82e5\u65e0\u6548\u679c\uff0c\u591a\u534a\u975e\u539f\u7ad9\uff09\uff1a<\/p>\n<p><canvas style=\"background-color:lab(29.2345% 39.3825 20.0664)\" width=\"200\" height=\"100\"><\/canvas> <canvas style=\"background-color:lab(52.2345% 40.1645 59.9971)\" width=\"200\" height=\"100\"><\/canvas> <canvas style=\"background-color:lab(52.2345% 40.1645 59.9971 \/ .5)\" width=\"200\" height=\"100\"><\/canvas><\/p>\n<p><strong>LAB\u5386\u53f2\u5c0f\u80cc\u666f<\/strong><\/p>\n<blockquote><p>1900\u5e74\u4ee3\uff0c\u7406\u67e5\u5fb7\u00b7\u4ea8\u7279\u53d1\u660e\u4e86LAB\u8272\u5f69\u7a7a\u95f4\u3002\u5c3d\u7ba1\u5b83\u80fd\u591f\u6d88\u9664\u989c\u8272\u7684\u5fae\u5c0f\u53d8\u5316\u5e76\u4fdd\u6301\u5747\u5300\u6027\uff0c\u4f46\u5b83\u4ece\u672a\u88ab\u63a5\u53d7\u4e3a\u6807\u51c6\u3002<\/p>\n<p>\u51e0\u5e74\u540e\uff0cCIE\u63a8\u51fa\u4e86\u4e00\u4e2a\u540d\u4e3aCIElab\u7684\u5b9e\u9a8c\u5ba4\u7684\u66f4\u65b0\u7248\u672c\u3002\u5b83\u53d1\u97f3\u4e3ac-lab\uff0c\u4f46\u4e5f\u88ab\u79f0\u4e3alab\u6216L*A*B*\u3002<\/p>\n<p>CIElab\u662f\u65e0\u8bb8\u53ef\u8bc1\u548c\u7248\u6743\u7684\uff0c\u56e0\u6b64\u60a8\u53ef\u4ee5\u5728\u4efb\u4f55\u8bbe\u5907\u4e0a\u4f7f\u7528\u5b83\u3002<\/p><\/blockquote>\n<h4>\u989c\u8272\u8f6c\u6362<\/h4>\n<p>LAB\u989c\u8272\u548cLCH\u989c\u8272\u4e4b\u95f4\u7684\u8f6c\u6362\u5176\u5b9e\u8fd8\u633a\u7b80\u5355\u7684\uff0c\u56e0\u4e3a\u81f3\u5c11L\u662f\u4e00\u6837\u7684\uff0c\u4e0d\u53d8\uff0c\u4e0b\u9762\u5c31\u662f\u4ee3\u7801\u793a\u610f\uff1a<\/p>\n<pre>function lab2lch(labL, labA, labB) {\r\n    const [ lchC, lchH ] = [\r\n        Math.sqrt(Math.pow(labA, 2) + Math.pow(labB, 2)), \/\/ \u8f6c\u6362\u4e3a chroma\r\n        (Math.atan2(labB, labA)) * 180 \/ Math.PI \/\/ \u8f6c\u6362\u4e3a hue\uff0c\u89d2\u5ea6\u503c\r\n    ];\r\n    return [ labL, lchC, lchH ];\r\n}\r\n\r\nfunction lch2lab(lchL, lchC, lchH) {\r\n    const [ labA, labB ] = [\r\n        lchC * Math.cos(lchH * Math.PI \/ 180),\r\n        lchC * Math.sin(lchH * Math.PI \/ 180)\r\n    ];\r\n    return [ lchL, labA, labB ];\r\n}\r\n\r\nconsole.log(lab2lch(0.292345, 39.3825, 20.0664));\r\nconsole.log(lch2lab(0.292345, 44.2, 27));<\/pre>\n<p>\u8f93\u51fa\u7ed3\u679c\u662f\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-19_201638.png\" width=\"239\" height=\"251\" alt=\"\u8f93\u51fa\u7ed3\u679c\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u7b26\u5408\u9884\u671f\u3002<\/p>\n<h3>\u4e09\u3001\u6307\u5b9a\u989c\u8272\u7a7a\u95f4\u51fd\u6570color()<\/h3>\n<p>CSS color()\u51fd\u6570\u5141\u8bb8\u6d4f\u89c8\u5668\u5728\u663e\u793a\u4efb\u4f55\u7684\u989c\u8272\u7a7a\u95f4\uff0c\u4f8b\u5982P3\u989c\u8272\u7a7a\u95f4\uff0c\u5b83\u53ef\u4ee5\u663e\u793a\u9ed8\u8ba4sRGB\u989c\u8272\u7a7a\u95f4\u4e4b\u5916\u7684\u989c\u8272\u3002<\/p>\n<p>\u5176\u8bed\u6cd5\u5982\u4e0b\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u5c31\u662f\u7528\u6765\u6307\u5b9a\u6240\u4f7f\u7528\u7684\u989c\u8272\u7a7a\u95f4\u7684\u3002<\/p>\n<pre>color( [ [<ident> | <dashed-ident>]? [ <number-percentage>+ ] [ \/ <alpha-value> ]? ] )<\/pre>\n<p>\u7b80\u5316\u4e0b\u5c31\u662f\uff1a<\/p>\n<pre>color(\u989c\u8272\u7a7a\u95f4 \u989c\u8272\u6570\u503c \/ \u900f\u660e\u5ea6);<\/pre>\n<p>\u652f\u6301\u7684\u989c\u8272\u7a7a\u95f4\u5305\u62ec\u4e0b\u9762\u8fd9\u4e9b\uff1a<\/p>\n<pre>display-p3\r\nsrgb\r\nrec2020\r\nprophoto-rgb\r\nsrgb-linear\r\na98-rgb<\/pre>\n<p>\u4e0b\u9762\u901a\u8fc7\u4e00\u4e2a\u5b9e\u4f8b\u770b\u4e0b\u5404\u81ea\u652f\u6301\u7684\u6548\u679c\uff0c\u4e0b\u9762\u662f\u6f14\u793a\u4ee3\u7801\uff1a<\/p>\n<pre>&lt;ul&gt;\r\n    &lt;li class=\"color1\"&gt;\u7b2c1\u9879 - display-p3&lt;\/li&gt;\r\n    &lt;li class=\"color2\"&gt;\u7b2c2\u9879 - rec2020&lt;\/li&gt;\r\n    &lt;li class=\"color3\"&gt;\u7b2c3\u9879 - xyz-d50&lt;\/li&gt;\r\n    &lt;li class=\"color4\"&gt;\u7b2c4\u9879 - srgb&lt;\/li&gt;\r\n    &lt;li class=\"color5\"&gt;\u7b2c5\u9879 - prophoto-rgb&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/pre>\n<pre>.color1 {\r\n    color: color(display-p3 1 0.5 0);\r\n}\r\n.color2 {\r\n    color: color(rec2020 0.42053 0.979780 0.00579);\r\n}\r\n.color3 {\r\n    color: color(xyz-d50 0.2005 0.14089 0.4472);\r\n}\r\n.color4 {\r\n    color: color(srgb 0.691 0.139 0.259);\r\n}\r\n.color5 {\r\n    color: color(prophoto-rgb 0.691 0.139 0.259);\r\n}<\/pre>\n<p>\u7ed3\u679c\u5728\u6d4f\u89c8\u5668\u4e2d\uff08\u6ce8\u610f\u81ea\u5df1\u7684Chrome\u6d4f\u89c8\u5668\u7248\u672c\uff0c\u9700\u8981Chrome 111+\uff09\u6bcf\u4e2a\u5217\u8868\u90fd\u6709\u4e86\u989c\u8272\u53d8\u5316\uff08\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\uff0c\u4f1a\u662f\u9ed8\u8ba4\u7684\u9ed1\u8272\uff09\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-19_203920.png\" width=\"313\" height=\"228\" alt=\"color()\u51fd\u6570\u6548\u679c\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u60a8\u53ef\u4ee5\u72e0\u72e0\u5730\u70b9\u51fb\u8fd9\u91cc\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/study\/202302\/css-color-function-demo.php\" rel=\"noopener\" target=\"_blank\">CSS color()\u51fd\u6570\u4e0e\u989c\u8272\u7a7a\u95f4demo<\/a><\/p>\n<h4>\u989c\u8272\u7a7a\u95f4\u7684\u81ea\u5b9a\u4e49<\/h4>\n<p>\u9664\u4e86\u6d4f\u89c8\u5668\u5185\u7f6e\u7684\u8fd9\u4e9b\u7ecf\u5178\u7684\u989c\u8272\u7a7a\u95f4\uff0c\u6211\u4eec\u8fd8\u53ef\u4ee5\u81ea\u5df2\u989c\u8272\u7a7a\u95f4\uff0c\u8fd9\u4e2a\u662f\u4f7f\u7528@color-profile\u89c4\u5219\u5b9e\u73b0\u7684\uff0c\u4f7f\u7528\u793a\u610f\uff08\u6848\u4f8b\u6e90\u81ea<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@color-profile\" rel=\"noopener\" target=\"_blank\">MDN\u6587\u6863<\/a>\uff09\uff1a<\/p>\n<pre>@color-profile --swop5c {\r\n  src: url(\"https:\/\/example.org\/SWOP2006_Coated5v2.icc\");\r\n}\r\n.header {\r\n  background-color: color(--swop5c 0% 70% 20% 0%);\r\n}<\/pre>\n<h4>\u989c\u8272\u7a7a\u95f4\u7684\u68c0\u6d4b<\/h4>\n<p>\u989c\u8272\u7a7a\u95f4\u662f\u5426\u88ab\u5f53\u524d\u6d4f\u89c8\u5668\u652f\u6301\u53ef\u4ee5\u4f7f\u7528color-gamut\u67e5\u8be2\u5b9e\u73b0\uff0c\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>@media (color-gamut: srgb) {\r\n  p {\r\n    background: #f5f3f9;\r\n  }\r\n}<\/pre>\n<p>\u6b64\u67e5\u8be2\u8bed\u53e5\u76ee\u524d\u6240\u6709\u73b0\u4ee3\u6d4f\u89c8\u5668\u90fd\u652f\u6301\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-19_210751.png\" width=\"651\" height=\"247\" alt=\"color-gamut\u517c\u5bb9\u6027\" class=\"alignnone size-medium\" \/><\/p>\n<h4>\u517c\u5bb9\u6027<\/h4>\n<p>color()\u51fd\u6570Firefox\u76ee\u524d\u4f3c\u4e4e\u8fd8\u6ca1\u6709\u652f\u6301\uff0cChrome\u5df2\u7ecf\u5b8c\u5168\u652f\u6301\u4e86\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-19_210310.png\" width=\"651\" height=\"257\" alt=\"color()\u51fd\u6570\u517c\u5bb9\u6027\" class=\"alignnone size-medium\" \/><\/p>\n<h3>\u56db\u3001\u989c\u8272\u6df7\u5408\u51fd\u6570color-mix()<\/h3>\n<p><code>color-mix()<\/code>\u51fd\u6570\u53ef\u4ee5\u8ba9\u4e24\u4e2a\u989c\u8272\u8fdb\u884c\u6307\u5b9a\u6bd4\u4f8b\u7684\u6df7\u5408\u3002<\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>color-mix(in lch, purple 40%, gold);\r\ncolor-mix(in srgb, #34c9eb 20%, white);<\/pre>\n<p>\u5b9e\u65f6\u6e32\u67d3\u6548\u679c\u5982\u4e0b\u6240\u793a\uff08\u5982\u679c\u80cc\u666f\u7070\u8272\u5219\u8bf4\u660e\u6d4f\u89c8\u5668\u5e76\u4e0d\u652f\u6301\uff09\uff1a<\/p>\n<p><canvas style=\"background-color:#eee;background-color:color-mix(in lch, purple 40%, gold)\" width=\"200\" height=\"100\"><\/canvas> <canvas style=\"background-color:#eee;background-color:color-mix(in srgb, #34c9eb 20%, white)\" width=\"200\" height=\"100\"><\/canvas><\/p>\n<p>\u6211\u4eec\u65e5\u5e38\u5f00\u53d1\uff0c\u5c31\u4f7f\u7528<code>in srgb<\/code>\u5c31\u53ef\u4ee5\u4e86\uff0c\u6700\u5e38\u7528\uff0c\u4e0a\u624b\u6210\u672c\u4f4e\u3002<\/p>\n<p>\u6b64\u989c\u8272\u51fd\u6570\u6211<span class=\"hidden\" hidden>(\u5f20\u946b\u65ed)<\/span>\u671f\u76fc\u5df2\u4e45\uff0c\u633a\u5b9e\u7528\u7684\uff0c\u6211\u8fc7\u6bb5\u65f6\u95f4\uff0c\u7b49Safari\u548cFirefox\u6d4f\u89c8\u5668\u4e5f\u5b8c\u5168\u652f\u6301\u7684\u65f6\u5019\uff08\u76ee\u524d\u662f\u5b9e\u9a8c\u652f\u6301\uff09\uff0c\u4f1a\u4e13\u95e8\u8be6\u7ec6\u4ecb\u7ecd\u4e0b\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/2023-02-19_211500.png\" width=\"652\" height=\"225\" alt=\"color-mix\u517c\u5bb9\u6027\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<h3>\u4e94\u3001\u4e86\u89e3oklch()\u548coklab()\u51fd\u6570<\/h3>\n<p>oklch()\u548coklab()\u51fd\u6570\u76ee\u524d\u4ec5Safari15.4+\u652f\u6301\uff0c\u56e0\u6b64\uff0c\u5927\u5bb6\u6682\u65f6\u5148\u4e86\u89e3\u4e0b\u5373\u53ef\u3002<\/p>\n<p>oklch()\u989c\u8272\u7a7a\u95f4\u548clch()\u51fd\u6570\u533a\u522b\u5728\u4e8e\uff0coklch()\u7684C\uff08\u5f69\u5ea6\uff09\u548cH\uff08\u8272\u8c03\uff09\u4f7f\u7528\u7684\u662f\u6781\u5750\u6807\u7cfb\u3002<\/p>\n<p>\u5176\u4e2d\u7b2c\u4e8c\u4e2a\u503cC\u7684\u5b83\u7684\u6700\u5c0f\u503c\u4e3a0\uff0c\u800c\u6700\u5927\u503c\u7406\u8bba\u4e0a\u662f\u65e0\u9650\u7684\uff08\u4f46\u5b9e\u9645\u4e0a\u4e0d\u8d85\u8fc70.4\uff09\u3002<\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>oklch(40.1% 0.123 21.57)\r\noklch(59.69% 0.156 49.77)\r\noklch(59.69% 0.156 49.77 \/ .5)<\/pre>\n<h4>oklab()\u51fd\u6570<\/h4>\n<p>oklab()\u51fd\u6570\u8868\u793a\u7684\u989c\u8272\u4f7f\u7528\u7684\u662foklab\u989c\u8272\u7a7a\u95f4\uff0c\u5b83\u8bd5\u56fe\u6a21\u62df\u4eba\u773c\u5982\u4f55\u611f\u77e5\u989c\u8272\u3002<\/p>\n<p>oklab()\u5728oklab\u989c\u8272\u7a7a\u95f4\u7684a\u8f74\u548cb\u8f74\u4e0a\u4f7f\u7528\u7684\u662f\u7b1b\u5361\u5c14\u5750\u6807\u7cfb\u3002\u5982\u679c\u60a8\u60f3\u8981\u6781\u5750\u6807\u7cfb\u3001\u6216\u8005\u4f7f\u7528\u5f69\u5ea6\u548c\u8272\u8c03\u8868\u793a\u989c\u8272\uff0c\u8bf7\u4f7f\u7528<code>oklch()<\/code>\u51fd\u6570\u3002<\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>\/* oklab(lightness a-axis b-axis) *\/\r\noklab(40.1% 0.1143 0.045);\r\noklab(59.69% 0.1007 0.1191);\r\n\r\n\/* oklab(lightness a-axis b-axis \/ Alpha) *\/\r\noklab(59.69% 0.1007 0.1191 \/ 0.5);<\/pre>\n<h3>\u516d\u3001\u5173\u4e8e\u989c\u8272\u66f4\u591a\u77e5\u8bc6<\/h3>\n<p>\u9664\u4e86\u4ee5\u524d\u8fd9\u4e9b\u989c\u8272\u51fd\u6570\uff0cCSS\u989c\u8272\u89c4\u8303level4\u4e2d\u8fd8\u6709\u51e0\u4e2a\u65b0\u7279\u6027\u6d4f\u89c8\u5668\u5f88\u65e9\u5c31\u652f\u6301\u4e86\uff0c\u4f8b\u5982#RRGGBBAA\u8272\u503c\u8868\u793a\uff0c\u4ee5\u53ca\u66f4\u52a0\u81ea\u7531\u7684rgb\u548chsl\u989c\u8272\u8868\u793a\u65b9\u6cd5\uff0c\u8be6\u89c1\u4e4b\u524d\u5199\u7684\u8fd9\u7bc7\u6587\u7ae0\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/2020\/10\/css-color-level-4\/\">\u5feb\u901f\u5b66\u4e60CSS Color Level 4\u7684\u8272\u503c\u65b0\u8bed\u6cd5<\/a>\u201d\u3002<\/p>\n<p>\u672c\u6587\u6240\u4ecb\u7ecd\u7684\u8fd9\u4e9b\u65f6\u95f4\u51fd\u6570\uff0c\u9664\u4e86hwb()\u8fd8\u6709\u70b9\u773c\u7f18\uff0c<code>color-mix()<\/code>\u51fd\u6570\u503c\u5f97\u671f\u5f85\u5916\uff0c\u5176\u4ed6\u51e0\u4e2a\u989c\u8272\u51fd\u6570\uff0c\u6211\u76f8\u4fe1\u5927\u5bb6\u65e5\u5e38\u5f00\u53d1\u90fd\u662f\u6ca1\u591a\u5c11\u673a\u4f1a\u63a5\u89e6\u7684\u3002<\/p>\n<p>\u5c31\u6211\u4e2a\u4eba\u611f\u89c9\uff0c\u76f8\u6bd4\u989c\u8272\u51fd\u6570\uff0cCSS\u65b0\u652f\u6301\u7684\u90a3\u4e9b\u6570\u5b66\u51fd\u6570\u8981\u5b9e\u7528\u7684\u591a\uff0c\u4f8b\u5982exp()\uff0cround(), sin(), hypot(), abs() \u7b49\uff0c\u5f88\u591a\uff0c\u5341\u6765\u4e2a\u6709\u7684\uff0c\u6211\u67e5\u4e86\u4e0b\uff0cSafari\u548cFirefox111\u5df2\u7ecf\u90fd\u652f\u6301\uff0cChrome111\u4e5f\u5f00\u59cb\u652f\u6301\u90e8\u5206\u6570\u5b66\u51fd\u6570\u3002<\/p>\n<p>CSS\u679c\u7136\u662f\u8d8a\u6765\u8d8a\u5f3a\u4e86\uff0c\u80fd\u505a\u7684\u4e8b\u60c5\u4e5f\u8d8a\u6765\u8d8a\u591a\u7684\u3002<\/p>\n<p>\u4e0d\u8fc7\u77ed\u671f\u8fd8\u662f\u770b\u4e0d\u5230CSS\u5730\u4f4d\u7684\u5d1b\u8d77\uff0c\u56e0\u4e3a\u8f6c\u53d8\u662f\u9700\u8981\u65f6\u95f4\u7684\uff0c\u4eba\u90fd\u662f\u6709\u60ef\u6027\u7684\uff0c\u4ee5\u524dJS\u80fd\u591f\u641e\u5b9a\u7684\u4e14\u8fd0\u884c\u826f\u597d\u7684\u4e8b\u60c5\uff0c\u662f\u5f88\u96be\u6709\u52a8\u529b\u53bb\u6362\u6210\u4e00\u4e2a\u5168\u65b0\u7684\u672a\u77e5\u7684\u53ef\u80fd\u6709\u98ce\u9669\u7684\u65b0\u4e8b\u7269\u7684\u3002<\/p>\n<p>\u2026\u2026\u8fd9\u9700\u8981\u65f6\u95f4\u3002<\/p>\n<p>\u597d\uff0c\u4ee5\u4e0a\u5c31\u662f\u672c\u6587\u7684\u5168\u90e8\u5185\u5bb9\u4e86\uff0c\u535a\u95fb\u5f3a\u8bc6\uff0c\u62d3\u5c55\u89c6\u91ce\u3002<\/p>\n<p>?\u2764\ufe0f????<\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u6b22\u8fce\u5206\u4eab\uff0c\u52ff\u5168\u6587\u8f6c\u8f7d\uff0c\u5982\u679c\u5b9e\u5728\u559c\u6b22\uff0c\u53ef\u6536\u85cf\uff0c\u6c38\u4e0d\u8fc7\u671f\uff0c\u4e14\u4f1a\u53ca\u65f6\u66f4\u65b0\u77e5\u8bc6\u70b9\u53ca\u4fee\u6b63\u9519\u8bef\uff0c\u9605\u8bfb\u4f53\u9a8c\u4e5f\u66f4\u597d\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=10728\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=10728<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/202302\/platter-cover.jpg\" width=\"160\" height=\"101\" alt=\"\u8c03\u8272\u677f\u5360\u4f4d\u56feCSS\u989c\u8272\" class=\"alignright size-medium\" loading=\"lazy\" \/><\/p>\n<p>\u4ecb\u7ecd7\u4e2a\u5168\u65b0\u7684CSS\u989c\u8272\u51fd\u6570\uff0c\u867d\u7136\u4e0d\u7b97\u7279\u522b\u6df1\u5165\uff0c\u4f46\u4e5f\u7b97\u662fCSS\u989c\u8272\u8fd9\u5757\u6bd4\u8f83\u6709\u542b\u91d1\u91cf\u7684\u4ecb\u7ecd\u6587\u7ae0\u4e86\uff0c\u91cc\u9762\u5168\u90e8\u90fd\u662f\u4ee5\u524d\u4e0d\u77e5\u9053\u7684\u77e5\u8bc6\uff0c\u4e0d\u5f97\u4e0d\u611f\u53f9\uff0c\u989c\u8272\u8fd9\u4e1c\u897f\uff0c\u82e5\u8981\u6df1\u7a76\uff0c\u6015\u662f\u6bd4\u8d1d\u52a0\u5c14\u6e56\u8fd8\u8981\u6df1\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[333,1905,1631,1177,1900,1901,1902,1904,1903,337,497],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/10728"}],"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=10728"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/10728\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=10728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=10728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=10728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}