我怎样才能创建一种只包含绿色、蓝色、橙色和金色的颜色？

Question

如果知道红色、绿色和蓝色的“权重”，可以使用以下类创建颜色：

.blaRGB {
    color: rgb(128, 128, 128)
}
.blaHSL {
    color: hsl(33%, 34%, 33%)
}

并在HTML中使用它，如下所示：

<p class="blaRGB">BLA RGB</p>
<p class="blaHSL">BLA HSL</p>

对于上面显示的值，blaRGB为暗灰色，blaHSL为白色。

但是，如果一个人想要代表其他颜色的组合，比如绿色、蓝色、橙色和金色，该怎么办？

有没有一种方法可以用下面这样的符号来定义这样的颜色？

.CyndiLauper {
    color: truecolors(24, 13, 11, 12) 
}

或者使用颜色： gbog（24, 13, 11, 12)，其中gbog中的字母分别代表绿色、蓝色、橙色和金色？

其目的是通过上面的CSS定义

<p class="CyndiLauper">These are your True Colors, shining through!</p>

将以这四种颜色的加权组合显示文本。

我相信这是可能的使用一些复杂的数学使用绿色，蓝色，橙色和金色的RGB值，但我不知道如何继续。

我意识到这个问题的一个关键组成部分，我最初省略了，是“你说的绿色、蓝色、橙色和金色到底是什么意思？”？

为了回答这个问题，根据官方的“真彩色”网站，并使用ColorZilla浏览器插件，这些颜色的RGB值为：

green = 15, 167, 73
blue = 0, 152, 215
orange = 243, 123, 38
gold = 255, 230, 101

（在我看来，它们实际上更像森林绿、道奇蓝、红橙色和黄色。）

Answer 1

我想知道答案是否不仅仅是在RGB中“混合”颜色？

var green = [15, 167, 73];
var blue = [0, 152, 215];
var orange = [243, 123, 38];
var gold = [255, 230, 101];

generateTrueColor(greenRatio, blueRatio, orangeRatio, goldRatio){
  for(var i = 0; i < 3, i++){
    RGB[i] = greenRatio * green[i] + blueRatio * blue[i] + orangeRatio * orange[i] + goldRatio * gold[i];
  }
  return RGB;
  for(var i = 0; i < 3, i++){
    if(RGB[i] > 255) RGB[i] = 255;
  }
}

generateTrueColor(1, 0.1, 0.1, 0.1);

Answer 2

不，你不能。以下是W3 Css颜色定义的链接，该定义在顶部声明只能使用蓝色、红色和绿色。

编辑：好的，让我澄清一下。从我的理解来看，这是不可能的。然而，您可以使用less和Sass来做一些事情，以达到您想要的结果。这里有一些关于少颜色函数的教程。最有趣的是关于混合颜色的部分：

.box.mix {
    background-color: mix(@blue, @yellow, 50%);
}

不过，你需要对此进行探索，因为我没有这方面的经验。

Answer 3

混合颜色的方法有很多，具体取决于您使用的颜色模型：

• 添加剂混合

下面的代码片段演示了两种混合方法。最左边的列显示四种原始颜色。下一列显示相同的颜色，不透明度为0.25，产生半透明颜色。第三列将半透明颜色层层叠加，这相当于alpha合成。

第四列显示了混合的替代方法。在这里，我们看到了分别平均四种原始颜色中每种颜色的R、G和B分量的结果。

var Colors = {
  names: ['green', 'blue', 'orange', 'gold'],
  values: {
    green: { r: 15, g: 167, b: 73 },
    blue: { r: 0, g: 152, b: 215 },
    orange: { r: 243, g: 123, b: 38 },
    gold: { r: 255, g: 230, b: 101 }
  }
};

Colors.toHex2 = function (decimal) {
  var hex = decimal.toString(16);
  return (hex.length == 1 ? '0'+hex : hex);
};

Colors.toColorString = function (value) {
  var g = Colors,
      toHex2 = g.toHex2;
  var parts = [ '#', toHex2(value.r), toHex2(value.g), toHex2(value.b) ];
  return parts.join('');
};

Colors.load = function () {
  var g = Colors,
      names = g.names,
      values = g.values,
      containers = {
        original: document.getElementById('original'),
        translucent: document.getElementById('translucent'),
        layered: document.getElementById('layered'),
        averaged: document.getElementById('averaged')
      },
      averaged = { r: 0, g: 0, b: 0 };
  document.body.style.paddingTop = 10*(1+names.length) + 'px';
  for (var i = 0; i < names.length; ++i) {
    var name = names[i],
        value = values[name],
        color = g.toColorString(value),
        swatch = document.createElement('div'),
        proportion = 1 / names.length;
    swatch.className = 'swatch';
    swatch.style.backgroundColor = color;
    containers.original.appendChild(swatch);

    swatch = swatch.cloneNode();
    swatch.style.opacity = proportion;
    containers.translucent.appendChild(swatch);

    swatch = swatch.cloneNode();
    swatch.style.height = 60 + 10*(names.length-1) + 'px';
    swatch.style.top = 10*(1+i-names.length) + 'px';
    containers.layered.appendChild(swatch);

    averaged.r += proportion * value.r;
    averaged.g += proportion * value.g;
    averaged.b += proportion * value.b;
  }

  swatch = document.createElement('div');
  swatch.className = 'swatch';
  averaged.r = Math.round(averaged.r);
  averaged.g = Math.round(averaged.g);
  averaged.b = Math.round(averaged.b);
  swatch.style.backgroundColor = g.toColorString(averaged);
  containers.averaged.appendChild(swatch);
};

window.onload = Colors.load;

body {
  font-family: sans-serif;
  font-size: 24px;
  margin: 0;
  padding-left: 20px;
}
.display {
  width: 120px;
  float: left;
}
.swatch {
  width: 100px;
  height: 60px;
  margin-bottom: 10px;
}
.layered {
  position: relative;
  height: 60px;
}
.layered .swatch {
  position: absolute;
}

<div id="original" class="display"></div>

<div id="translucent" class="display"></div>

<div id="layered" class="display layered"></div>

<div id="averaged" class="display"></div>