RGB to HSB (HSV)
Page: 1 2 3 4 5 6 7 8
1. Absolute value conversion
1.0 - Absolute value conversion:
1.1 - Example:
2. Calculation of brightness (Value)
2.0 - Calculation of brightness (Value):
2.1 - Example:
2.2 - Illustration:
Step 1: RGB (Av 0–255) converted in percent (0–100) corresponds to brightness in percent (0–100).
Step 2: RGB max (Av 0–255) is equated with brightness in percent (Av 0–100).
3. Calculation of saturation
3.0 - Calculation of saturation:
3.1 - Transforming the equation:
3.2 - Example:
1.0 - If brightness is 100%:
How to draw: [See color inversion]
4. Calculation of hue
4.0 - Calculation of hue:
4.1 - R′, G′, B′ max:
4.1 - Example:
5. Graphic illustration
5.0 - Distribution of R, G, B from 0° - 360° - Illustration:
1. Convert the RGB decimal code for red, yellow, green, cyan, blue, and magenta from 0–255 to 0–1.
- Pure Red = (R:1, G:0, B:0), Pure Yellow = (R:1, G:1, B:0), Pure Green = (R:0, G:1, B:0), Pure Cyan = (R:0, G:1, B:1), Pure Blue = (R:0, G:0, B:1), and Pure Magenta = (R:1, G:0, B:1).
2. Calculate the hue of red, yellow, green, cyan, blue, and magenta, and place them in the correct order in the diagram.
- Pure Red = 0°, Pure Yellow = 60°, Pure Green = 120°, and Pure Cyan = 180°. Pure blue = 240°; pure magenta = 300°.
3. The gradient for red, green, and blue can then be created by following the decimal codes:
- Red gradient = R;1 , Y;1 , G;0 , C;0 , B;0 , M;1 , R;1.
- Green-gradient = R;0 , Y;1 , G;1 , C;1 , B;0 , M;0 , R;0.
- Blue gradient = R;0 , Y;0 , G;0 , C;1 , B;1 , M;1 , R;0.
4. Draw the graph by following the code for the gradients.
- R′G′B′ min = 0 ,
- R′G′B′ max = 1.
​
5. The RGB spectrum can finally be generated by blending the red, green, and blue gradients using the Lighten filter in Photoshop.
5.1 - How to interpret the graph:
​Independent of saturation and brightness:
​
1. From 0° to 60°:
The value of B and R does not change: B = RGB min, R = RGB max.
The value of G changes successively from RGB min to RGB max (Slope up).
​
2. From 60° to 120°:
The value of B and G does not change: B = RGB min, G = RGB max.
The value of R changes successively from RGB max to RGB min (Slope down).
​
3. From 120° to 180°:
The value of R and G does not change: R = RGB min, G = RGB max.
The value of B changes successively from RGB min to RGB max (Slope up).
​
4. From 180° to 240°:
The value of R and B does not change: R = RGB min, B = RGB max.
The value of G changes successively from RGB max to RGB min (Slope down).
​
5. From 240° to 300°:
The value of G and B does not change: G = RGB min, B = RGB max.
The value of R changes successively from RGB min to RGB max (Slope up).
​
6. From 300° to 360° (back to 0):
The value of G and R does not change: G = RGB min, R = RGB max.
The value of B changes successively from RGB max to RGB min (Slope down).
5.2 - R, G, B - Equality:
6. Illustration of R'G'B' max (M) and R'G'B' min (m)
