一丶HSL
HSL即色相、饱和度、亮度(英语:Hue, Saturation, Lightness)。
色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等,取0-360。
饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%(0-1)的数值。
明度(V),亮度(L),取0-100%(0-1)。
二丶RGB
光的三原色:红绿蓝,RGB这三种颜色的组合,几乎能形成所有的颜色。所以显示器使用这种原理去显示图像。
RGB的取值范围:R(0~255) G(0~255) B(0~255)
16进制表示方式:#FF FF FF
三丶将RGB转换成HSL
四丶将HSL转换成RGB
五丶在游戏开发中的应用(我自己用到的QAQ)
①高亮显示精灵
当鼠标悬停于按钮上的时候可以通过设置L改变亮度。
②精灵变色 通过shader去改变精灵色相 ,饱和度,明度。.
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 v_texCoord;
uniform float u_dH;//设置色相
uniform float u_dS;//设置饱和度
uniform float u_dL;//设置亮度
uniform float u_dA;//设置透明度
void main() {
vec4 texColor = texture2D(CC_Texture0, v_texCoord);
float r = texColor.r;
float g = texColor.g;
float b = texColor.b;
float a = texColor.a;
//convert rgb to hsl
float h;
float s;
float l;
{
float max = max(max(r, g), b);
float min = min(min(r, g), b);
//----h
if (max == min){
h = 0.0;
}
else if (max == r&&g >= b){
h = 60.0*(g - b) / (max - min) + 0.0;
}
else if (max == r&&g < b){
h = 60.0*(g - b) / (max - min) + 360.0;
}
else if (max == g){
h = 60.0*(b - r) / (max - min) + 120.0;
}
else if (max == b){
h = 60.0*(r - g) / (max - min) + 240.0;
}
//----l
l = 0.5*(max + min);
//----s
if (l == 0.0 || max == min){
s = 0.0;
}
else if (0.0 <= l&&l <= 0.5){
s = (max - min) / (2.0*l);
}
else if (l > 0.5){
s = (max - min) / (2.0 - 2.0*l);
}
}
//(h,s,l)+(dH,dS,dL) -> (h,s,l)
h = h + u_dH;
s = min(1.0, max(0.0, s + u_dS));
l = l + u_dL;
//convert (h,s,l) to rgb and got final color
vec4 finalColor;
{
float q;
if (l < 0.5){
q = l*(1.0 + s);
}
else if (l >= 0.5){
q = l + s - l*s;
}
float p = 2.0*l - q;
float hk = h / 360.0;
float t[3];
t[0] = hk + 1.0 / 3.0;
t[1] = hk;
t[2] = hk - 1.0 / 3.0;
float c[3];
for (int i = 0; i < 3; i++){
if (t[i] < 0.0)t[i] += 1.0;
if (t[i] > 1.0)t[i] -= 1.0;
if (t[i] < 1.0 / 6.0){
c[i] = p + ((q - p)*6.0*t[i]);
}
else if (1.0 / 6.0 <= t[i] && t[i] < 0.5){
c[i] = q;
}
else if (0.5 <= t[i] && t[i] < 2.0 / 3.0){
c[i] = p + ((q - p)*6.0*(2.0 / 3.0 - t[i]));
}
else{
c[i] = p;
}
}
finalColor = vec4( c[0],c[1], c[2], (texColor.a<0.9)?a: (u_dA==0)?1:u_dA);
}
finalColor += vec4(u_dL, u_dL, u_dL, 0.0);
gl_FragColor = finalColor;
}