top of page

Gradient

Page: 1   2   3   4   5   6   7   8 

1. Brightness: Vertical gradient

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

1.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.

2.jpg

Gradient ordering:
The abbreviation (Sp) stands for successive placement and can be defined with arguments. Three arguments are used for HSB color space: the hue argument (HA), the saturation argument (SA), and the brightness argument (BA).

3.jpg

Equation one is valid when the colors are within the same hue Range and are equal in saturation:

4.jpg

The brightness argument says that the brightness of the gradient starts at 1% and ends at 100%.

Equation 1 can then be written as:

5.jpg

2. Saturation: Horizontal gradient

Equation. 9 from: RGB & HSB (HSV)

6.jpg

Gradient range:
The interval between saturation initial and saturation final defines the gradient and can be written in equation 9 by replacing Saturation final with:
Saturation (Sp%) Initial → Final)

​If the gradient changes gradually by 1%, the expression is written as follows:
Saturation (Sp1%) Initial → Final)

 

7.jpg

Equation 2 is valid when the colors are within the same hue Range and are equal in brightness:

8.jpg

The saturation argument says that the saturation of the gradient starts at 1% and ends at 100%.

Equation 2 can then be written as:

9.jpg

2. Saturation: Horizontal gradient

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

10.jpg

Gradient range:
The interval between brightness initial and final, respectively, saturation initial and final, defines the starting point and ending point of the gradient and can be written in equation 10 by replacing brightness final and saturation final with:
B(sp%)  Initial ↔ Final
S(sp%)  Initial ↔ Final

11.jpg

Gradient direction:
The range between brightness initial and final is equal to:
Δ = Bf - Bi

- Range in percentage:
To calculate the range in percentage, the expression is multiplied by 0.01 × Percentage sp:
Δ% = (Bf - Bi) × 0.01P

- By adding the range in percentage with initial brightness, the following expression is maintained: Bi + (Bf - Bi) × 0.01Psp, the expression forces the direction of the gradient, so it always goes from the initial brightness (0%) to the final (100%).

Bi → Bf = Bi + Δ% = Bi + (Bf - Bi) × 0.01Psp 

The same approach is used for the saturation:
Si → Sf = Si + Δ% = Si + (Sf - Si) × 0.01Psp

5.jpg

Gradient range:​
The expression:
(A)  Is valid when the colors are within the same hue range.
(B)  Predicts the RGB code for horizontal and vertical changes.

Gradient ordering: SP argument

13.jpg

Gradient range:​
The brightness and saturation argument says that the brightness and saturation of the gradient starts at 1% and ends at 100%, while the hue is constant.

14.jpg

Gradient

Page: 1   2   3   4   5   6   7   8 

bottom of page