UE4 制作颜色选择面板

首先了解一下HSV颜色模型

HSV(Hue, Saturation, Value)是根据颜色的直观特性由A. R. Smith在1978年创建的一种颜色空间, 也称六角锥体模型(Hexcone Model)。

这个模型中颜色的参数分别是：色调（H），饱和度（S），明度（V）

 

色调H

用角度度量，取值范围为0°～360°，从红色开始按逆时针方向计算，红色为0°，绿色为120°,蓝色为240°。它们的补色是：黄色为60°，青色为180°,品红为300°；

饱和度S

饱和度S表示颜色接近光谱色的程度。一种颜色，可以看成是某种光谱色与白色混合的结果。其中光谱色所占的比例愈大，颜色接近光谱色的程度就愈高，颜色的饱和度也就愈高。饱和度高，颜色则深而艳。光谱色的白光成分为0，饱和度达到最高。通常取值范围为0%～100%，值越大，颜色越饱和。

明度V

明度表示颜色明亮的程度，对于光源色，明度值与发光体的光亮度有关；对于物体色，此值和物体的透射比或反射比有关。通常取值范围为0%（黑）到100%（白）。

 

基于以上知识 首先找到一张HSV标准色卡图

根据H值的说明 红色为0° 绿色为120° 这里以右方向为标准向量 顺时针进行旋转

S饱和度 则取圆心到选取位置的距离取值范围为0%到100% 也就是0到1之间 用距离/半径 取到比例即可

V明度，因为HSV模型是一个锥体，二维色卡图没有深度信息，所以可以参照PS等软件实现，添加一个0到1之间的滑块来单独控制。

下面为蓝图连线

SignPos为当前拾取点在色卡中的二维坐标

CenterPos为色卡图中心点（圆心）的坐标

MapRangeClamped 将Value值限制在InRange范围内 等比缩放到OutRange范围内

S:

H:

或

V：

独立声明变量控制在0到1之间

 

最后将HSV转换为RGB颜色

 

RGB转化到HSV的算法:

max=max(R,G,B)  
min=min(R,G,B)  
if R = max, H = (G-B)/(max-min)  
if G = max, H = 2 + (B-R)/(max-min)  
if B = max, H = 4 + (R-G)/(max-min)  

H = H * 60  
if H < 0, H = H + 360  

V=max(R,G,B)  
S=(max-min)/max

HSV转化到RGB的算法  

if s = 0    
R=G=B=V  
else    
H /= 60;    
i = INTEGER(H)

f = H - i    
a = V * ( 1 - s )    
b = V * ( 1 - s * f )    
c = V * ( 1 - s * (1 - f ) )    

switch(i)      
case 0: R = V; G = c; B = a;      
case 1: R = b; G = v; B = a;      
case 2: R = a; G = v; B = c;      
case 3: R = a; G = b; B = v;      
case 4: R = c; G = a; B = v;      
case 5: R = v; G = a; B = b;