如何在 JavaScript 中编写 RGB 颜色值？答案

【问题标题】：How do I write a RGB color value in JavaScript?如何在 JavaScript 中编写 RGB 颜色值？
【发布时间】：2010-01-31 20:41:31
【问题描述】：

我正在尝试更改下面的函数 swapFE() 的颜色，但我不知道如何编写它。我被告知将短语节点的颜色更改为颜色值（155、102、102）。正如您在函数末尾看到的那样，我尝试这样做 see-parent.childNodes[1].style.color= (155, 102, 102);但它只是呈现出深海军蓝色。应该是棕红色的。我不知道我做错了什么。如何解决此问题以获得正确的 RGB 颜色？我知道我有剩下的权利，只是弄清楚如何写出给我带来问题的颜色和值。谢谢！

//this function changes the French phrase to an English phrase. 
    function swapFE(e) { 
           var phrase = e.srcElement;  
           //phrase.innerText = english[phrase.id]; 
           var parent = phrase.parentNode; 
           //childNodes[0] is the number of the phrase +1  
           var idnum = parent.childNodes[0]; 
           //parseInt takes a textstring and extracts it to make a number. Then you will subtract 1 from the number. 

       var phrasenum = parseInt(idnum.innerHTML)-1; 
       phrase.innerText = english[phrasenum]; 
       parent.childNodes[1].style.fontStyle= "normal"; 
       parent.childNodes[1].style.color= (155, 102, 102); 
  } 


function swapEF(e) { 
       var phrase = e.srcElement;  
       //phrase.innerText = english[phrase.id]; 
       var parent = phrase.parentNode; 
       var idnum = parent.childNodes[0]; 
       var phrasenum = parseInt(idnum.innerHTML)-1; 
       phrase.innerText = french[phrasenum]; 
       parent.childNodes[1].style.fontStyle= "italic"; 
       parent.childNodes[1].style.color= "black";

【问题讨论】：

标签： javascript function coding-style colors rgb

【解决方案1】：

尝试：

parent.childNodes[1].style.color = "rgb(155, 102, 102)";

或者

parent.childNodes[1].style.color = "#"+(155).toString(16)+(102).toString(16)+(102).toString(16);

【讨论】：

parent.childNodes[1].style.color = "rgb(155, 102, 102)"; ....工作！非常感谢！
警告！如果其中一种颜色 "#"+(255).toString(16)+(0).toString(16)+(0).toString(16) 给出的#FF00 不是正确的颜色代码。
使用padStart(2,'0')。我已更改 G 和 B 值以检查 "#"+(155).toString(16).padStart(2,'0')+(2).toString(16).padStart(2,'0')+(3).toString(16).padStart(2,'0'); 现在的结果是 "#9b0203"，这是预期的。参考：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
为什么我得到这个结果： colorLcl= #5c.db7bc07a5dc86d.eb59d144e6f79.cdf6b22b95 。您的第二个建议有问题

【解决方案2】：

这是一个简单的函数，它从 0 到 255 的 RGB 值创建 CSS 颜色字符串：

function rgb(r, g, b){
  return "rgb("+r+","+g+","+b+")";
}

或者（为了创建更少的字符串对象），您可以使用数组 join()：

function rgb(r, g, b){
  return ["rgb(",r,",",g,",",b,")"].join("");
}

上述函数只有在 (r, g, and b) 是 0 到 255 之间的整数时才能正常工作。如果它们不是整数，颜色系统会将它们视为在 0 到 1 的范围内。非整数，请使用以下内容：

function rgb(r, g, b){
  r = Math.floor(r);
  g = Math.floor(g);
  b = Math.floor(b);
  return ["rgb(",r,",",g,",",b,")"].join("");
}

你也可以使用 ES6 语言特性：

const rgb = (r, g, b) => 
  `rgb(${Math.floor(r)},${Math.floor(g)},${Math.floor(b)})`;

【讨论】：

【解决方案3】：

这是更好的功能

function RGB2HTML(red, green, blue)
{
    var decColor =0x1000000+ blue + 0x100 * green + 0x10000 *red ;
    return '#'+decColor.toString(16).substr(1);
}

【讨论】：

【解决方案4】：

ES6（模板文字）辅助函数：

function rgba(r, g, b, a=1){
    return `rgba(${r}, ${g}, ${b}, ${a})`
}
function rgb(r, g, b){
    return `rgb(${r}, ${g}, ${b})`
}

【讨论】：

【解决方案5】：

我展示了一个添加随机颜色的示例。你可以这样写

var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
var col = "rgb(" + r + "," + g + "," + b + ")";
parent.childNodes[1].style.color = col;

该属性应为字符串

【讨论】：

【解决方案6】：

dec2hex = function (d) {
  if (d > 15)
    { return d.toString(16) } else
    { return "0" + d.toString(16) }
}
rgb = function (r, g, b) { return "#" + dec2hex(r) + dec2hex(g) + dec2hex(b) };

和：

parent.childNodes[1].style.color = rgb(155, 102, 102);

【讨论】：

【解决方案7】：

类似于 asd 的答案，但更快更简单（使用按位运算）：

function rgb(red, green, blue) {
    return (red & 0xF0 ? '#' : '#0') + (red << 16 | green << 8 | blue).toString(16)
}

【讨论】：