Presentations
Templates
Features
Teams
Pricing
Log in
Sign up
Log in
Sign up
Menu
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
Learn React in 2020 - 04 Card Reactive Background
By msmo
Made with Slides.com
Learn React in 2020 - 04 Card Reactive Background
581
msmo
More from
msmo
