RGB和HSB的转换推算

RGB三原色是基于人肉眼对光线的生理作用。人眼内有三种椎状体“对这三种光线频率所能感受的带宽最大，也能独立刺激这三种颜色的受光体”，因此RGB称为三原色。比如，黄色波长的光对人眼的刺激效果，和红色与绿色同时刺激人眼相同，所以，对人来说R+G=yellow，即（255,255,0）.

 

相对于RGB，HSB（也叫HSV）模式更便于描述人眼对与颜色的感觉。如图的HSB椎形坐标，横截面从下往上亮度值从0%到100%递增；横截面的中心点是灰色的，随着半径增大，饱和度从0增大到100%；色相取值0°~360°，代表截面上红、黄、绿、青、蓝、粉红的颜色变化。

 

HSB坐标系最顶部的截面最外圈，饱和度和亮度都是100%，随着色相从0°到360°变化，RGB值的变化如上图，红色、绿色、蓝色分别位于0°、120°、240°；0°到60°之间绿色分量均匀增加，60°到120°之间红色分量均匀减少，以此类推。将 这个演示中的S和B调到100%，调整H的值观察RGB的变换就能发现这个规律。这时RGB中最大值一定是255（因为亮度为100%），最小值一定是0（如果不是，比如RGB=（10,20,255），可以看成在（0,10,255）分量的基础上加上一个灰色分量（10,10,10），加灰色后饱和度就不是100%了）。

   

 

 

HSB转RGB

 

要算出（h,s,b）对应的（r,g,b）,可以分3步，以HSB=（130°，50%，80%）为例说明：

 

1、先算出（h,100%,100%）对应的（r',g',b'）。

先固定色相，色环图上色相H∈[-60°，60°]时红色分量最大，H∈[60°，180°]时绿色分量最大，H∈[180°，300°]时蓝色分量最大，此时B=100%，所以RGB的最大分量为255。

先算出HSB=（130°，100%，100%）对应的（r',g',b'）：H=130°，在[60°，180°]区间，所以绿色分量为g'=255，红色分量r'=0；进一步地，130°处于[120°，180°]，在这60°的区间上，色环上蓝色分量对应地从0递增到255，所以b'=(130°-120°）/60°*255=43。所以（r',g',b'）=（0,255,43）

 

2、固定色相后再调整饱和度，算出（h,s,100%)对应的（r'',g'',b''）。

在亮度B=100%时，从 演示中发现，饱和度S降低，即“不饱和度”（1-S）升高，会使得RGB与最大值255相差的部分对应增大，RGB三个分量越趋于相同就使得图像越灰。所以，

r''=r'+(255-r')*(1-S) .................................... ①

g''和b''用同样的方法求出。当然，r'g'b'中的最大值不会变化。（r'',g'',b''）=(128,255,149)

 

3、最后算出（h,s,b）对应的（r,g,b）。

最后调整亮度，只要依照亮度值的百分比缩小就行了，（r,g,b）=(r'',g'',b'')*80%=(102,204,119)就是HSB=（130°,50%,80%）对应的RGB

public float[] hsb2rgb(float[] hsb) { float[] rgb= new float[3]; //先令饱和度和亮度为100%，调节色相h for(int offset=240,i=0;i<3;i++,offset-=120) { //算出色相h的值和三个区域中心点(即0°，120°和240°)相差多少，然后根据坐标图按分段函数算出rgb。但因为色环展开后，红色区域的中心点是0°同时也是360°，不好算，索性将三个区域的中心点都向右平移到240°再计算比较方便 float x=Math.abs((hsb[0]+offset)%360-240); //如果相差小于60°则为255 if(x<=60) rgb[i]=255; //如果相差在60°和120°之间， else if(60<x && x<120) rgb[i]=((1-(x-60)/60)*255); //如果相差大于120°则为0 else rgb[i]=0; } //在调节饱和度s for(int i=0;i<3;i++) rgb[i]+=(255-rgb[i])*(1-hsb[1]); //最后调节亮度b for(int i=0;i<3;i++) rgb[i]*=hsb[2]; return rgb; } View Code

 

RGB转HSB

 

这个从HSB转RGB倒推回去就会很容易知道亮度和饱和度的算法

 

亮度：B=max(R,G,B)/255

 

饱和度：1-S=min(R,G,B)/255，所以饱和度S=1-min(R,G,B)/255

 

色相：先算出（r,g,b）对应的饱和度和亮度均为100%时的（r',g',b'），然后既可以根据色环的规律求出色相了。

r'、g'、b'的序号用0、1、2表示，max、min、mid分别是r'g'b'中最大值、最小值和中间值；设maxIndex、minIndex、midIndex分别是r'g'b'中最大值、最小值和中间值的序号。首先将色相h定位到（maxIndex*120°）然后根据中间值算出偏移量（mid/255*60°），既

h=（maxIndex*120°）±（mid/255*60°）....................................②

关于②中的±号的确定方法：将当0、1、2顺时针写成一圈，当midIndex在maxIndex的顺时针方向（既minIndex在maxIndex的逆时针方向）时取正，否则取负，原因看色环就能知道。所以±号可以用(maxIndex-minIndex+3)%3是否等于1来判断，是取正，否则取负。②式可以改写成：

h=（maxIndex*120°）+((maxIndex-minIndex+3)%3==1?1:-1)*（mid/255*60°）....................................③

以（r,g,b）=(102,204,85)为例，前两步已求出亮度为80%，饱和度为50%。当亮度和饱和度均为100%而色相不变时，最大值g'一定是255；最小值r'一定是0；中间值b'按照上面HSB转RGB的后两步反推回去，先得出亮度为100%时b''=102/80%=128，再由①式得出饱和度为100%时b'=43。

因为g'=255最大，先定位到色环上的120°的位置，因为蓝色分量不为0，所以要从120°顺时针偏移b'/255*60°=10°，即H=130°

 

public float[] rgb2hsb(float[] rgb) {

    float[] hsb = new float[3];

    float[] rearranged = rgb.clone();        

    int maxIndex = 0,minIndex = 0;

    float tmp;        

    //将rgb的值从小到大排列，存在rearranged数组里

    for(int i=0;i<2;i++) {

        for(int j=0;j<2-i;j++)

            if(rearranged[j]>rearranged[j+1]) {

                tmp=rearranged[j+1];

                rearranged[j+1]=rearranged[j];

                rearranged[j]=tmp;

            }                

    }

    //rgb的下标分别为0、1、2，maxIndex和minIndex用于存储rgb中最大最小值的下标

    for(int i=0;i<3;i++) {

        if(rearranged[0]==rgb[i]) minIndex=i;

        if(rearranged[2]==rgb[i]) maxIndex=i;

    }

    //算出亮度

    hsb[2]=rearranged[2]/255.0f;

    //算出饱和度

    hsb[1]=1-rearranged[0]/rearranged[2];

    //算出色相

    hsb[0]=maxIndex*120+60* (rearranged[1]/hsb[1]/rearranged[2]+(1-1/hsb[1])) *((maxIndex-minIndex+3)%3==1?1:-1);

    //防止色相为负值

    hsb[0]=(hsb[0]+360)%360;

    return hsb;

}

View Code