top of page

RGB to HSB (HSV)

Page: 1   2   3   4   5   6   7   8 

1.jpg

1) Absolute value conversion:

1.0 - Absolute value conversion:

1.0.jpg

1.1 - Example:

1.jpg

2) Calculation of brightness (Value): 

2.0 - Calculation of brightness (Value):

1.0.jpg

2.1 - Example:

1.1.jpg

2.2 - Illustration:

Brightness copy.jpg

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:

1.0.jpg

3.1 - Transforming the equation:

1.1. copy.jpg

3.2 - Example:

Untitled-12 copy.jpg

1.0 - If brightness is 100%:

1.3.jpg

How to draw: [See color inversion]

4) Calculation of hue

4.0 - Calculation of hue:

1.0.jpg

4.1 - R′, G′, B′ max:

1.2.jpg

4.1 - Example:

1.1.jpg

5) Graphic illustration

5.0 - Distribution of R, G, B from 0° - 360° - Illustration:

1.4.jpg

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:

2 copy.jpg

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:

1.1.jpg
1.6.jpg

6) Illustration of R'G'B' max (M) and R'G'B' min (m)

4 copy 2.jpg

RGB to HSB (HSV)

Page: 1   2   3   4   5   6   7   8 

bottom of page