前言
最近因为涉及到一个算色规则,其中需要把RGB转HSB的要求,所以自己研究了下,故此记录下。
什么是RGB?
RGB表示红色(R)、绿色(G)、蓝色(B),又称为三原色光。它是通过对三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB即是代表红、绿、蓝三个通道的颜色,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。
什么是HSB?
在HSB模式中,H(hues)表示色相、S(saturation)表示饱和度、B(brightness)表示亮度。 HSB模式对应的媒介是人眼。
既然有了RGB,为何还需要HSB?
我们知道人眼所能看见的颜色都可以通过三原色RGB混合获得,其每个颜色分量分别为红(R)、绿(G)、蓝(B)。然而这只是颜色一种表示方法,这种表示方法非常适合机器却非常的反人性。人们在拾取颜色的时候通常其脑海中的思考过程是:
什么颜色?鲜艳不鲜艳?亮还是暗?
因此为了在拾取颜色过程中更加符合人的思考过程,HSB诞生了。HSB只是RGB颜色空间的另一种表示方法,因此两者所表示的颜色空间大小是一致的。
此外HSB也称之为HSV,两者均指同一个东西,之所以有两种称呼,其原因可能是为了避免在某些上下文中认为HSB中的B字母和RGB中的B字母是同一个含义吧!
RGB转换HSB公式
注:其中max是RGB三个颜色分量中最大的那一个,同理min的含义是RGB三个颜色分量中最小的那一个,因为HSB等价于HSV,因此为了和RGB中的B进行区别,在公式里面,字母V等价于HSB中的B。
根据上述公式得出:
DEMO(PHP)
<?php
/**
* RGB转换HSB(HSV)
* RGB input values: 0-255, 0-255, 0-255
* HSB output values: 0-360, 0-100, 0-100
*
* @param int $red
* @param int $green
* @param int $blue
* @return array
*/
function rgbToHsb($red, $green, $blue) {
$rgb = array($red, $green, $blue);
$max = max($rgb);
$min = min($rgb);
$diff = $max - $min;
/* 计算色相 */
$hue = 0;
if ($max == $min) {
$hue = 0;
} else if ($max == $red && $green >= $blue) {
$hue = 60 * (($green - $blue) / $diff);
} else if ($max == $red && $green < $blue) {
$hue = 60 * (($green - $blue) / $diff) + 360;
} else if ($max == $green) {
$hue = 60 * (($blue - $red) / $diff) + 120;
} else if ($max == $blue) {
$hue = 60 * (($red - $green) / $diff) + 240;
}
/* 计算饱和度 */
if ($max == 0) {
$saturation = 0;
} else {
$saturation = (1 - $min / $max) * 100;
}
/* 计算色调 */
$value = $max / 255 * 100;
return [$hue, $saturation, $value];
}
DEMO(JAVA)
public static float[] rgbToHsb(int rgbR, int rgbG, int rgbB) {
assert 0 <= rgbR && rgbR <= 255;
assert 0 <= rgbG && rgbG <= 255;
assert 0 <= rgbB && rgbB <= 255;
int[] rgb = new int[] { rgbR, rgbG, rgbB };
Arrays.sort(rgb);
int max = rgb[2];
int min = rgb[0];
float hsbB = max / 255.0f * 100f;
float hsbS = max == 0 ? 0 : (max - min) / (float) max * 100f;
float hsbH = 0;
if (max == rgbR && rgbG >= rgbB) {
hsbH = (rgbG - rgbB) * 60f / (max - min);
} else if (max == rgbR && rgbG < rgbB) {
hsbH = (rgbG - rgbB) * 60f / (max - min) + 360;
} else if (max == rgbG) {
hsbH = (rgbB - rgbR) * 60f / (max - min) + 120;
} else if (max == rgbB) {
hsbH = (rgbR - rgbG) * 60f / (max - min) + 240;
}
return new float[] { hsbH, hsbS, hsbB };
}