使用 JS 实现一个颜色渐变生成器

颜色渐变生成器#

理论分析#

给出两个颜色，生成平均过渡的 N 个 RGB 值

要生成两个颜色之间的平均过渡，我们可以使用线性插值（Linear Interpolation）来计算中间的颜色。线性插值是一种简单的方法，它假设颜色空间是线性的，即颜色之间的变化是均匀的。以下是一个JavaScript函数，它接受两个RGB颜色和一个过渡步数N，然后返回一个包含N个颜色的数组，这些颜色是从第一个颜色平滑过渡到第二个颜色的：

1
function interpolateColors(color1, color2, N) {
2
  // 确保颜色是有效的RGB数组
3
  if (!Array.isArray(color1) || !Array.isArray(color2) || color1.length !== 3 || color2.length !== 3) {
4
    throw new Error('Invalid color values');
5
  }
6

7
  // 创建一个数组来存储过渡颜色
8
  const interpolatedColors = [];
9

10
  // 计算每个颜色分量的差值
11
  const rDelta = color2[0] - color1[0];
12
  const gDelta = color2[1] - color1[1];
13
  const bDelta = color2[2] - color1[2];
14

15
  // 生成过渡颜色
16
  for (let i = 0; i < N; i++) {
17
    const t = i / (N - 1); // 插值因子，从0到1
18
    const r = Math.round(color1[0] + rDelta * t);
19
    const g = Math.round(color1[1] + gDelta * t);
20
    const b = Math.round(color1[2] + bDelta * t);
21
    interpolatedColors.push(`rgb(${r}, ${g}, ${b})`);
22
  }
23

24
  return interpolatedColors;
25
}
26

27
// 示例使用
28
const colorA = [255, 0, 0]; // 红色
29
const colorB = [0, 0, 255]; // 蓝色
30
const N = 10; // 过渡步数
31
const transitionColors = interpolateColors(colorA, colorB, N);
32

33
console.log(transitionColors);

这个函数首先计算两个颜色在RGB分量上的差异，然后通过循环生成N个新的颜色，每个颜色都是通过在两个原始颜色之间进行线性插值得到的。插值因子t从0（第一个颜色）变化到1（第二个颜色），这样在循环的每一步中，我们都会得到一个新的颜色值，这些值构成了从第一个颜色到第二个颜色的平滑过渡。

请注意，这个函数返回的是颜色的字符串表示，例如”rgb(255, 0, 0)“。您可以根据需要调整N的值来增加或减少过渡的平滑度。

完整源码#

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>颜色渐变生成器</title>
8
    <style>
9
        .gradient-container {
10
            display: flex;
11
            flex-wrap: wrap;
12
            gap: 5px;
13
        }
14

15
        .color-box {
16
            width: 20px;
17
            height: 20px;
18
            border: 1px solid #000;
19
        }
20
    </style>
21
</head>
22

23
<body>
24
    <div id="gradient-container" class="gradient-container"></div>
25

26
    <script>
27
        function interpolateColors(color1, color2, N) {
28
            // 确保颜色是有效的RGB数组
29
            if (!Array.isArray(color1) || !Array.isArray(color2) || color1.length !== 3 || color2.length !== 3) {
30
                throw new Error('Invalid color values');
31
            }
32

33
            // 创建一个数组来存储过渡颜色
34
            const interpolatedColors = [];
35

36
            // 计算每个颜色分量的差值
37
            const rDelta = color2[0] - color1[0];
38
            const gDelta = color2[1] - color1[1];
39
            const bDelta = color2[2] - color1[2];
40

41
            // 生成过渡颜色
42
            for (let i = 0; i < N; i++) {
43
                const t = i / (N - 1); // 插值因子，从0到1
44
                const r = Math.round(color1[0] + rDelta * t);
45
                const g = Math.round(color1[1] + gDelta * t);
46
                const b = Math.round(color1[2] + bDelta * t);
47
                interpolatedColors.push(`rgb(${r}, ${g}, ${b})`);
48
            }
49

50
            return interpolatedColors;
51
        }
52

53
        function createGradient() {
54
            const container = document.getElementById('gradient-container');
55
            const startColor = [255, 0, 0]; // Red
56
            const endColor = [0, 0, 255]; // Blue
57
            const gradientColors = interpolateColors(startColor, endColor, 5);
58

59
            gradientColors.forEach(color => {
60
                const colorBox = document.createElement('div');
61
                colorBox.style.backgroundColor = color;
62
                colorBox.classList.add('color-box');
63
                container.appendChild(colorBox);
64
            });
65
        }
66

67
        // Call the function to create the gradient when the page loads
68
        window.onload = createGradient;
69
    </script>
70
</body>
71

72
</html>

应用案例#

https://www.arealme.com/color-hue-test/cn/