我怎样才能获得两种颜色之间的颜色？

我有两种颜色：

#15293E #012549 

我怎么能find他们之间的一半颜色？ 有没有办法做这个计算？

Answer 1

正如李斯特先生刚才所说，用任何编程语言自动化计算都很容易：

1. 把你的两种颜色分成红色，绿色，蓝色的三种颜色：（r1，g1，b1）和（r2，g2，b2）。
   • 例如＃15293E，＃012549变成（“15”，“29”，“3E”），（“01”，“25”，“49”）
2. 将每个颜色string转换为一个整数，明确指出您正在parsing数字的基于hex的表示forms。
   • 例如（“15”，“29”，“3E”）变成（21,41,62）
3. 计算平均值（r'，g'，b'）=（（r1 + r2）/ 2，（g1 + g2）/ 2，（b1 + b2）/ 2）。
   • 例如（（21 + 1）/ 2，（41 + 37）/ 2，（62 + 73）/ 2）=（11,39,67）
4. 再次将它们转换为string，明确指出您正在生成两位hex表示（必要时填充零）。
   • 例如（11,39,67）→（“0B”，“27”，“43”）
5. 连接一个清晰的字符，然后是3个string
   • 例如（“0B”，“27”，“43”） – > “＃0B2743”

编辑：如我最初所说，实现不是“非常容易”。 我花时间在Programming-Idioms上用几种语言编写代码。

Answer 2

我使用这个网站为我做这个任务： ColorBlender 。

中间颜色将是#0B2744 。

Answer 3

less了

如果你使用最新的LESS CSS预处理器，那么它们是一个函数（ mix() ），

 mix(#15293E, #012549, 50%) 

输出： #0b2744 。

Answer 4

如果你需要做到这一点，并期望在更多的情况下中间色彩在视觉上是准确的（即中间点的视觉色彩和色调应该“看起来是正确的”，观众），那么如上所述，你可能想要计算中点之前从RGB转换为HSV或HSL，然后再转换回来。 这可能与直接平均RGB值有很大的不同。

下面是一些用于从HSL转换到HSL的JavaScript代码，我在简短的search中find了这些代码，并且在一个简单的检查上看起来是正确的：

https://github.com/mjackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript。文本;

只需将rgbToHsl函数应用于您的两个r，g，b颜色向量，对两个结果向量进行平均，然后将hslToRgb应用于该向量。 。 。

Answer 5

喜欢这个：

 function colourGradientor(p, rgb_beginning, rgb_end){ var w = p * 2 - 1; var w1 = (w + 1) / 2.0; var w2 = 1 - w1; var rgb = [parseInt(rgb_beginning[0] * w1 + rgb_end[0] * w2), parseInt(rgb_beginning[1] * w1 + rgb_end[1] * w2), parseInt(rgb_beginning[2] * w1 + rgb_end[2] * w2)]; return rgb; }; 

其中p是介于0和1之间的值，指定颜色应该在渐变中有多远，rgb_beginning是来自颜色，rgb_end是来自颜色。 两者都是[r，g，b]数组，所以你必须先从hex转换。 这是LESS的混音function的简化版本，我认为是来自SASS。 海报p是0.5

Answer 6

Handy-Dandyfunction

 function padToTwo(numberString) { if (numberString.length < 2) { numberString = '0' + numberString; } return numberString; } function hexAverage() { var args = Array.prototype.slice.call(arguments); return args.reduce(function (previousValue, currentValue) { return currentValue .replace(/^#/, '') .match(/.{2}/g) .map(function (value, index) { return previousValue[index] + parseInt(value, 16); }); }, [0, 0, 0]) .reduce(function (previousValue, currentValue) { return previousValue + padToTwo(Math.floor(currentValue / args.length).toString(16)); }, '#'); } console.log(hexAverage('#111111', '#333333')); // => #222222 console.log(hexAverage('#111111', '#222222')); // => #191919 console.log(hexAverage('#111111', '#222222', '#333333')); // => #222222 console.log(hexAverage('#000483', '#004B39')); // => #00275e 

Answer 7

如果你希望你可以用Windows计算器自己做。

1. 打开Windows计算器>查看>程序员
2. selecthex选项
3. inputhex值
4. 切换到十二月，并写下给定的值
5. 对第二个hex值重复步骤2-4
6. 通过添加两个Dec数字并除以2来计算平均值
7. 将此值input到计算器中，并selectDec选项，然后切换到hex选项和瞧

例：

• 15293E（HEX）= 1386814（DEC）
• 012549（HEX）= 75081（DEC）
• 中点=（1386814 + 75081）/ 2
• 中点= 730947（DEC）
• 730947（DEC）= 0B2743（HEX）
• ＃0B2743

或者如上所述使用ColorBlender;）