我怎样才能得到介于两种颜色之间的颜色？

我有两种颜色:

#15293E
#012549

我怎样才能找到介于两者之间的颜色呢？有什么方法可以做这个计算吗？

61782 次浏览
小开

我使用这个网站为我做这个任务: 色彩搅拌机。

中间颜色是 #0B2744。

小开

如果你希望你可以自己用小算盘做。

  1. 开启小算盘 > 检视 > 程式设计师
  2. 选择十六进制选项
  3. 输入十六进制值
  4. 切换到 Dec 并写下给定的值
  5. 对第二个十六进制值重复步骤2-4
  6. 计算平均值的方法是将两个12月的数字相加，除以2
  7. 使用 Dec 选项在计算器中输入此值 然后切换到十六进制选项，瞧

例如:

  • 15293E (十六进制) = 1386814(十二进制)
  • 012549(十六进制) = 75081(十二进制)
  • 中点 = (1386814 + 75081)/2
  • 中点 = 730947(DEC)
  • 730947(DEC) = 0B2743(HEX)
  • # 0B2743

或者使用上面提到的 ColorBlender;)

小开

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

  1. 把你的两种颜色分成三种颜色，分别代表 红，绿，蓝: (r1，g1，b1)和(r2，g2，b2)。
    • 例如 # 15293E，# 012549 be (“15”，“29”，“3E”) ，(“01”，“25”，“49”)

  2. 将每个颜色字符串转换为整数，并明确指定要解析数字的 基于十六进制表示形式。
    • 例如(“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. 再次将它们转换为字符串，并明确指定要生成 两位数十六进制表示形式(必要时用零填充)。
    • 例如(11,39,67)-> (“0B”，“27”，“43”)

  5. 连接一个哈希字符后面跟着3个字符串
    • 例如(“0B”、“27”、“43”)-> < strong > “ # 0B2743”

编辑: 实现并不像我最初说的那样“非常容易”。我花时间用几种语言编写代码 程式设计课程-习语。

小开

用更少的钱

如果您使用最新的 更少的 CSS 预处理器，那么您将注意到有一个函数(mix())执行以下操作:

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

输出: #0b2744。

小开

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

下面是我在一个简短的搜索中发现的一些转换到/从 HSL 的 JavaScript 代码，在一个简短的检查中似乎做了正确的事情:

Github.com/mjackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.txt

Https://web.archive.org/web/20170919064926/https://github.com/mjackson/mjijackson.github.com/blob/master/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript.txt

只需将 rgbToHsl 函数应用于两个 r，g，b 颜色向量，将两个结果向量平均，然后将 hslToRgb 应用于..。

小开

便利功能

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
小开

像这样:

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 _ start 是 from color，rgb _ end 是 to color。它们都是[ r，g，b ]数组，因此首先必须从十六进制进行转换。这是 LESS 混合函数的简化版本，我认为它来自 SASS。因为海报上的 p 是0.5

小开

我刚写了一个函数用来计算两种颜色之间的颜色所以这里是为了以防万一有人需要它，我觉得这个函数非常简短易读，它接受两种颜色的十六进制字符串，中间计算的颜色数量，返回一个十六进制字符串数组中的颜色

我把 rgbToHex 和 hexToRgb 函数从 给你

希望这个能帮上忙！

function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}


function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result
? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
}
: null;
}


// returns an array of startColor, colors between according to steps, and endColor
function getRamp(startColor, endColor, steps) {
var ramp = [];


ramp.push(startColor);


var startColorRgb = hexToRgb(startColor);
var endColorRgb = hexToRgb(endColor);


var rInc = Math.round((endColorRgb.r - startColorRgb.r) / (steps+1));
var gInc = Math.round((endColorRgb.g - startColorRgb.g) / (steps+1));
var bInc = Math.round((endColorRgb.b - startColorRgb.b) / (steps+1));


for (var i = 0; i < steps; i++) {
startColorRgb.r += rInc;
startColorRgb.g += gInc;
startColorRgb.b += bInc;


ramp.push(rgbToHex(startColorRgb.r, startColorRgb.g, startColorRgb.b));
}
ramp.push(endColor);


return ramp;
}
小开

我找到了一个做这件事的 npm 模块: https://www.npmjs.com/package/color-between

下面是一些例子:

const colorBetween = require('color-between');


// rgb format
colorBetween('rgb(255, 255, 255)', 'rgb(0, 0, 0)', 0.5, 'rgb');
// output: 'rgb(128, 128, 128)'


// rgba format
colorBetween('rgba(255, 255, 255, .2)', 'rgba(0, 0, 0, .8)', 0.5, 'rgb');
// output: 'rgba(128, 128, 128, 0.5)


// hex format
colorBetween('#fff', '#000', 0.5, 'hex');
// output: '#808080'


// mixed format
colorBetween('#fff', 'rgb(0, 0, 0)', 0.5, 'hsl');
output: 'hsl(0, 0%, 50%)'
小开

在这里，我留下了我在我的打印脚本应用程序中使用的代码

function mixHexColors(color1: string, color2: string) {
const valuesColor1 = color1.replace('#', '').match(/.{2}/g).map((value) =>
parseInt(value, 16)
)
const valuesColor2 = color2.replace('#', '').match(/.{2}/g).map((value) =>
parseInt(value, 16)
)
const mixedValues = valuesColor1.map((value, index) =>
((value + valuesColor2[index]) / 2).toString(16).padStart(2, '')
)
return `#${mixedValues.join('')}`
}
小开

这是 Python 的版本。

# -*- coding: utf-8 -*-
"""jcolor_split.py splits 2 hex color values, HEX_COLOR_1 and HEX_COLOR_2,
printing the color halfway between the two colors
Usage:     jcolor_split.py HEX_COLOR_1 HEX_COLOR_2
Example: ./jcolor_split.py 3E599C      2E4892
"""
import sys


def jcolor_split(hex_color_1, hex_color_2):


print()
print (hex_color_1)
r1s = hex_color_1[0:2]
g1s = hex_color_1[2:4]
b1s = hex_color_1[4:6]
print(r1s,g1s,b1s)


print()
print (hex_color_2)
r2s = hex_color_2[0:2]
g2s = hex_color_2[2:4]
b2s = hex_color_2[4:6]
print(r2s,g2s,b2s)


# convert rgb's to ints
r1 = int(r1s, 16); g1 = int(g1s, 16); b1 = int(b1s, 16);
r2 = int(r2s, 16); g2 = int(g2s, 16); b2 = int(b2s, 16);
print()
print(r1,g1,b1)
print(r2,g2,b2)
   

# get the average
ra = int(round(float(r1+r2)/2))
ga = int(round(float(g1+g2)/2))
ba = int(round(float(b1+b2)/2))


print()
print(format(ra, 'x')+ format(ga, 'x')+ format(ba, 'x') )


    

 

NUM_ARGS = 2
def main():
args = sys.argv[1:]
if len(args) != NUM_ARGS or "-h" in args or "--help" in args:
print (__doc__)
sys.exit(2)
jcolor_split(args[0], args[1])
 

if __name__ == '__main__':
main()




sample_run = '''
PS C:\1d\JoeCodeswellHomePage> ./jcolor_split.py 3E599C      2E4892


3E599C
3E 59 9C


2E4892
2E 48 92


62 89 156
46 72 146


365097
PS C:\1d\JoeCodeswellHomePage>
'''
小开

我知道这个线程已经有10年的历史了，但是这个答案对于那些正在寻找只使用 CSS 的替代方案的人来说可能很有趣。因此，你可以在两种颜色之间创建一个 CSS 渐变，设置一个大的尺寸，例如 10000vw，并将位置设置为 center:

background: linear-gradient(90deg, rgb(255,255,0) 0%, rgb(0,0,255) 100%);
background-size: 10000vw;
background-position: center;

基于渐变位置的百分比，您还可以设置一个比率，以一个方向的颜色。


提交答案