top of page

Gradient

Page:  2   3   4   5   6   7   8 

4. HSB

Calculation of gradient via HSB

5.jpg
6.jpg

Gradient range:
The interval between brightness Initial and brightness final defines the gradient and can be written in equation 3 by replacing brightness final with: 
Brightness (sp%): Initial → Final.


Gradient direction:
The direction of the arrow is equal to the direction of the gradient.

15.jpg

Calculation of distance between color 1 and 2:
 

16.jpg

Calculation of distance between color 1 and 2:
 

18.jpg

Saturation and brightness change proportionally with change of hypotenuse. Calculation of Saturation when distance changes:

Length change per %:

19.jpg

Calculation of brightness when distance
changes:

Length change per %:

20.jpg
8.jpg
4.jpg

5. Square and spectral gradient (HSB)

Square gradient
How to calculate the square gradient for HSB color picker when Hue is fixed.

22.jpg

Square gradient – Color picker Photoshop.

Equation.10 from: RGB & HSB (HSV).

23.jpg

The gradient is fixed from bottom to top and follows the same direction as how saturation and brightness are conventionally used.

'Brightness and saturation are expressed as percentage (0.01P) in this equation.

4.jpg

Definition of  arguments:

6.jpg

The argument can be written as follows:
 

25.jpg

The equation to calculate the square gradient will be:

 

26.jpg

The designation S1, B1 means that the brightness and saturation of this color are 100% and is equal to 1 when normalized.
 

3.jpg

Spectral gradient (0Ëš → 360Ëš)

2.jpg
1.jpg

Gradient

Page: 1   2   3   4   5   6   7   8 

bottom of page