html - 如何获得两种颜色之间的颜色？

Question

我有两种颜色：

#15293E
#012549

我怎样才能找到它们中间的颜色？有没有办法做这个计算？

Answer 1

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

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. 再次将它们转换为 strings ，明确指定您正在生成两位十六进制表示（必要时用零填充）。
   • 例如 (11, 39, 67) -> ("0B", "27", "43")
     
     
5. 连接一个哈希字符，后跟 3 个字符串
   • 例如（“0B”、“27”、“43”）-> “#0B2743”
     

编辑：正如我最初所说的那样，实施并不“非常容易”。我花时间在 Programming-Idioms 上用多种语言编写代码。

Answer 2

我使用这个网站为我完成这项任务：ColorBlender。

中间色将是#0B2744。

Answer 3

少

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

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

输出：#0b2744.

Answer 4

如果您需要一般地执行此操作，并期望在更多情况下中间颜色在视觉上是准确的（即中间点的视觉颜色和色调对人类观察者来说应该“看起来正确”），那么如上所述，您可能想要在计算中点之前从 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 应用于那个。. .

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

Answer 7

我刚刚写了一个计算两种颜色之间颜色的函数，所以如果有人需要它，我认为它很短且易读，它接受十六进制字符串中的两种颜色，以及要计算的颜色数量，返回颜色在十六进制字符串数组中

我从 这里获取了 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;
}

Answer 8

我找到了一个执行此操作的 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%)'

Answer 9

如果您愿意，您可以使用 Windows 计算器自己完成。

1. 打开 Windows 计算器 > 查看 > 程序员
2. 选择十六进制选项
3. 输入十六进制值
4. 切换到 Dec 并记下给定的值
5. 对第二个十六进制值重复步骤 2-4
6. 通过将两个 Dec 数字相加并除以 2 来计算平均值
7. 在选择 Dec 选项的情况下将此值输入计算器，然后切换到十六进制选项，瞧

例子：

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

或如上所述使用 ColorBlender ;)

Answer 10

在这里，我留下了我在打字稿应用程序中使用的代码

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('')}`
}

Answer 11

这是一个 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> 
'''