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

Question

我正在尝试更改下面的swapFE()函数的颜色，但不知道该如何编写。有人告诉我将短语节点(node)的颜色更改为颜色值(155, 102, 102)。我尝试在函数的最后一行实现了这个目标——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"; 

- Ashley

Answer 1

尝试执行以下代码:

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

或者

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

- Marius

---

parent.childNodes[1].style.color = "rgb(155, 102, 102)"; ....行了！非常感谢！ - Ashley

警告！如果颜色中有一个小于16，第二个解决方案将不起作用。例如纯红色："#"+(255).toString(16)+(0).toString(16)+(0).toString(16)会得到 #FF00，这不是正确的颜色代码。 - Dunatotatos

使用 padStart(2,'0')。我已经将 G 和 B 值更改为小于 16 进行检查。现在，"#"+(155).toString(16).padStart(2,'0')+(2).toString(16).padStart(2,'0')+(3).toString(16).padStart(2,'0'); 的结果是 "#9b0203"，这是预期的结果。参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart - Xavi Montero

为什么我得到这个结果：colorLcl= #5c.db7bc07a5dc86d.eb59d144e6f79.cdf6b22b95。你的第二个建议有问题。 - CodeToLife

作为一个偶尔使用JS的用户，"rgb(x, y, z)" 对我来说似乎完全疯狂。为什么要让客户端代码从数字构建一个字符串，然后再让浏览器解析该字符串以构建颜色呢？为什么不使用浏览器提供的函数直接返回一个颜色对象，然后将其直接赋值给CSS属性呢？ - Tom

Answer 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 和 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)})`;

- curran

Answer 3

这是更好的函数

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

- asd

Answer 4

我将举一个随机添加颜色的例子来说明。您可以这样编写：

我用一个添加随机颜色的示例来展示。您可以按照以下方式编写：

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;

该属性期望为字符串。

- Ein2012

Answer 5

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

最初的回答

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

- Scott Weaver

Answer 6

尝试创建一个新变量，将RGB值存储为字符串，如下所示。

let newColor = `rgb(${red},${green},${blue})`; 

然后使用变量将值传递到DOM的背景中

document.body.style.backgroundColor = newColor;

我不知道为什么，但是JS似乎不接受直接的rgb值。 :/

- Gaurang Mestry

Answer 7

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

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

- saeedkazemi

Answer 8

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);

- Bandit