相关疑难解决方法(0)

如何在HSV颜色空间中插入色调值?

我正在尝试在HSV颜色空间中插入两种颜色之间以产生平滑的颜色渐变.

我正在使用线性插值,例如:

h = (1 - p) * h1 + p * h2
s = (1 - p) * s1 + p * s2
v = (1 - p) * v1 + p * v2
Run Code Online (Sandbox Code Playgroud)

(其中p是百分比,h1,h2,s1,s2,v1,v2是两种颜色的色调,饱和度和值分量)

这对s和v产生了良好的结果,但对于h则没有.由于色调分量是一个角度,计算需要计算出h1和h2之间的最短距离,然后沿正确的方向(顺时针或逆时针)进行插值.

我应该使用什么公式或算法?


编辑:通过遵循杰克的建议我修改了我的JavaScript渐变功能,它运作良好.对于任何有兴趣的人,这是我最终得到的:

// create gradient from yellow to red to black with 100 steps
var gradient = hsbGradient(100, [{h:0.14, s:0.5, b:1}, {h:0, s:1, b:1}, {h:0, s:1, b:0}]); 

function hsbGradient(steps, colours) {
  var parts = colours.length - 1;
  var gradient = new Array(steps);
  var …
Run Code Online (Sandbox Code Playgroud)

javascript interpolation gradient colors hsv

15
推荐指数
2
解决办法
8011
查看次数

标签 统计

colors ×1

gradient ×1

hsv ×1

interpolation ×1

javascript ×1