Javascript函数将颜色名称转换为十六进制代码

Question

Javascript函数将颜色名称转换为十六进制代码

是否有内置函数可以将颜色按名称转换为十六进制表示形式？就像我想通过'白'并接收'#FFFFFF'一样。如果是我自己，我真的想避免全部编码:)

Answer 1

这将以RGB形式呈现给您 - 您应该能够非常轻松地进行十六进制转换。d = document.createElement("div");d.style.color = "white";document.body.appendChild(d)//Color in RGB window.getComputedStyle(d).color并非所有浏览器都支持Get Computed样式。

Answer 2

我已经清理了一下，并做了一个要点和演示。基本方法保持不变。“向DOM添加元素并检查其ComputedStyle”方法对我来说似乎有点复杂 - 你需要添加它并检查它并记得删除它并且你只是为了计算颜色而改变DOM并且它会导致它回流？所以这是一个基于临时（并且从未渲染）的解决方案<canvas>：function&nbsp;colorToRGBA(color)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Returns&nbsp;the&nbsp;color&nbsp;as&nbsp;an&nbsp;array&nbsp;of&nbsp;[r,&nbsp;g,&nbsp;b,&nbsp;a]&nbsp;--&nbsp;all&nbsp;range&nbsp;from&nbsp;0&nbsp;-&nbsp;255 &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;color&nbsp;must&nbsp;be&nbsp;a&nbsp;valid&nbsp;canvas&nbsp;fillStyle.&nbsp;This&nbsp;will&nbsp;cover&nbsp;most&nbsp;anything &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;you'd&nbsp;want&nbsp;to&nbsp;use. &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Examples: &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;colorToRGBA('red')&nbsp;&nbsp;#&nbsp;[255,&nbsp;0,&nbsp;0,&nbsp;255] &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;colorToRGBA('#f00')&nbsp;#&nbsp;[255,&nbsp;0,&nbsp;0,&nbsp;255] &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;cvs,&nbsp;ctx; &nbsp;&nbsp;&nbsp;&nbsp;cvs&nbsp;=&nbsp;document.createElement('canvas'); &nbsp;&nbsp;&nbsp;&nbsp;cvs.height&nbsp;=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;cvs.width&nbsp;=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;ctx&nbsp;=&nbsp;cvs.getContext('2d'); &nbsp;&nbsp;&nbsp;&nbsp;ctx.fillStyle&nbsp;=&nbsp;color; &nbsp;&nbsp;&nbsp;&nbsp;ctx.fillRect(0,&nbsp;0,&nbsp;1,&nbsp;1); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;ctx.getImageData(0,&nbsp;0,&nbsp;1,&nbsp;1).data;}function&nbsp;byteToHex(num)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Turns&nbsp;a&nbsp;number&nbsp;(0-255)&nbsp;into&nbsp;a&nbsp;2-character&nbsp;hex&nbsp;number&nbsp;(00-ff) &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;('0'+num.toString(16)).slice(-2);}function&nbsp;colorToHex(color)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Convert&nbsp;any&nbsp;CSS&nbsp;color&nbsp;to&nbsp;a&nbsp;hex&nbsp;representation &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Examples: &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;colorToHex('red')&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#&nbsp;'#ff0000' &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;colorToHex('rgb(255,&nbsp;0,&nbsp;0)')&nbsp;#&nbsp;'#ff0000' &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rgba,&nbsp;hex; &nbsp;&nbsp;&nbsp;&nbsp;rgba&nbsp;=&nbsp;colorToRGBA(color); &nbsp;&nbsp;&nbsp;&nbsp;hex&nbsp;=&nbsp;[0,1,2].map( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function(idx)&nbsp;{&nbsp;return&nbsp;byteToHex(rgba[idx]);&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;).join(''); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;"#"+hex;}请注意，这允许您使用任何有效的画布fillStyle，因此如果您想从图像中提取1像素图案，它也会告诉您颜色。我已经在IE，Chrome，Safari和Firefox的合理现代版本中对此进行了测试。