Sometimes, we need to represent the gradient of a certain value in the form of color gradient. If the color is represented in RGB mode, this gradient often fails to achieve the desired effect. Because RGB interpolation tends to be mixed into one. For example, in the RGB space, take Orange (255,128, 0) and light blue (0,128,255), then the median of the two colors will be (128,128,128), that is, Gray, this is not what we want to see. In addition, the RGB values of the close colors in our eyes are far away from each other.
Therefore, we recommend that you use HSB color space when we need to express numerical changes through color gradient.
1. Understand the HSB Color Space
HSB (HSV) expresses colors by three elements: hue, saturation, and brightness.
H (Hue): indicates the color type (such as red, green, or yellow ). the value range is 0-360 °. each value represents a color. (red, orange, yellow, green, blue, purple)
S (saturation): color saturation. from 0 to 1. Sometimes called Purity. (0 indicates grayscale, 1 indicates pure color) (equivalent to whether there are impurities)
B (brightness or value): the brightness of the color. from 0 to 1. (0 indicates black, 1 indicates the color of a specific saturation ). (Black and white)
Here is a website for understanding HSB: http://web.bentley.edu/empl/c/ncarter/MA307/color-converter.html
According to the demonstration on the URL above, you can understand:
(1) To change between different colors, you only need to change the H value, S = 1, B = 1. This is very obvious.
(2) If a selected color changes, you only need to change the s value, H = fixed value, B = 1. Then you can.
(3) To change between black and white, only change B, H = 0 °, S = 0;
2. h Values of common colors
Red (0 ° or 360 °), yellow (60 °), Green (120 °), Green (180 °), blue (240 °), foreign red (300 ° ).
3. The problem is that the computer uses the RGB mode to display the color. Therefore, you need to convert the HSB value to the RGB value for display. The conversion function is designed as follows.
(1) Algorithm Design
When the RGB value is in [0, 1], refer:
If you want to obtain the RGB value between 0,255, you also need to convert it once.
(R, G, B) = (255 * r, 255 * g, 255 * B ).
(2) Algorithm Implementation (c)
Int * hsb2rgb (float H, float S, float v) {If (H <0 | h> 360.0f) return NULL; If (S <0.0f | S> 1.0f) return NULL; If (v <0.0f | V> 1.0f) return NULL; float r = 0, G = 0, B = 0; int I = (INT) (h/60) % 6); float F = (H/60)-I; float P = V * (1-S ); float q = V * (1-f * s); float T = V * (1-(1-f) * s); Switch (I) {Case 0: R = V; G = T; B = P; break; Case 1: r = Q; G = V; B = P; break; Case 2: r = P; G = V; B = T; break; Case 3: r = P; G = Q; B = V; break; Case 4: r = T; G = P; B = V; break; Case 5: r = V; G = P; B = Q; break; default: break;} int * temp = new int [3]; temp [1] = (INT) (R * 255.0);/* Here, R, G, and B are multiplied by 255, because the previously calculated R, G, B is located between [255.0] */temp [2] = (INT) (G * 255.0); temp [3] = (INT) (B ); return temp ;}
(3) Example:
When the red HSV = (0.0, 1.0, 1.0), the calculated RGB = (, 0 );