如何在两种颜色之间获得颜色？

Question

我有两种颜色:

#15293E
#012549

我怎样才能找到介于两者之间的颜色？有没有办法做这个计算？

Answer 1

正如Lister先生所说,用任何编程语言自动计算很容易:

1. 将您的两种颜色分为红色,绿色,蓝色的3种颜色编号:(r1,g1,b1)和(r2,g2,b2).
   
   • 例如#15293E,#012549变为("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") - > "#0B2743"
     

编辑:正如我最初所说,实施并非"非常简单".我花时间用编程习语上的几种语言编写代码.

Answer 2

我使用这个网站为我做这个任务:ColorBlender.

中间颜色将是#0B2744.

Answer 3

很少

如果您使用最新的LESS CSS预处理器,那么您会注意到有一个函数(mix())可以执行此操作:

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

输出:#0b2744.

Answer 4

如果你需要一般性地做这个,并且期望中间颜色在更多情况下在视觉上准确(即中点的视觉颜色和色调应该"看起来正确"到人类观察者),那么如上所述,你可能想要在计算中点之前从RGB转换为HSV或HSL,然后转换回来.这可能与直接平均RGB值有很大不同.

以下是我在简短搜索中找到的用于转换到/来自HSL的一些JavaScript代码,并且在简短的检查中似乎做了正确的事情:

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

Handy-Dandy功能

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 6

像这样:

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]数组,因此您必须先从十六进制转换.这是LESS混音功能的简化版本,我认为它来自SASS.海报p为0.5