Card Reactive Background
Learn React in 2020
Color Logic
Hot weather is from 12 -> 40 degrees
Cold weather is from -20 -> 12 degrees
We need to code color changes based on these values
To make things simpler, we can eliminate one factor of the RGB and fix one and we change only one value to change the hues of blue, or red
Different hues of red
Different hues of blue
Hot Color Logic
T:\; 12\; ->\; 40
G:\; 255\; ->\; 0
\left( R,G,B \right)
\left( R=255,G= Variable ,B=0 \right)
ratio\; =\; \frac{t\; -\; 12}{40\; -\; 12}\; \; ;\;
ratio\; =\; \frac{t\; -\; 12}{40\; -\; 12}\; \; ;\; t\; =\; 12\; ;\; ratio\; =\frac{12\; -\; 12}{28}\; =\; 0
variable\; = ratio * 255 \; = 255
variable\; = ratio * 255 \; = 0
t\; =\; 40\; ;\; ratio\; =\frac{40\; -\; 12}{28}\; =\; 1
40
12
t=15
12
Hot Color Logic
T:\; 12\; ->\; 40
G:\; 255\; ->\; 0
\left( R,G,B \right)
\left( R=255,G= Variable ,B=0 \right)
ratio\; =\; \left( 1-\frac{t-12}{40-12} \right)\; ;\; t\; =\; 40\; ;\; ratio\; =\; 1\; -\; 1\; =\; 0
ratio\; =\; \left( 1-\frac{t-12}{40-12} \right)\; ;\; t\; =\; 12\; ;\; ratio\; =\; 1\; -\; 0\; =\; 1
variable\; = ratio * 255 \; = 0
variable\; = ratio * 255 \; = 255
t=15
12
1-ratio
40
12
Cold Color Logic
T:\; -20\; ->\; 12
G:\; 255\; ->\; 0
\left( R,G,B \right)
\left( R=0,G= Variable ,B=255 \right)
ratio\; =\; \left( 1-\frac{t-(-20)}{12-(-20)} \right)\; ;\; t\; =\; 12\; ;\; ratio\; =\; 1\; -\; 1\; =\; 0
ratio\; =\; \left( 1-\frac{t-(-20)}{12-(-20)} \right)\; ;\; t\; =\; -20\; ;\; ratio\; =\; 1\; -\; 0\; =\; 1
variable\; = ratio * 255 \; = 0
variable\; = ratio * 255 \; = 255
Subscribe for more!
Shehata@msmo.io
github.com/ms-mousa
Made with Slides.com