GRADIENTS : TIME II

Concept de cadrant de montre affichant l'heure avec un dégradé de couleurs en se basant sur le cercle chromatique.

Scroll ↓

Concept

Colors-1

Cercle chromatique divisé en 12 couleurs.

Pickers-Hours

Chaque heure est matérialisée par une couleur du cercle chromatique. 4 heures en jaune et 10 heures en violet par exemple.

Pickers-Min

Chaque tranche de 5 minutes est matérialisée par une couleur du cercle chromatique. La tranche "18-22" en jaune et la tranche "48-52" en violet par exemple.

Color-Pick-450-Chiffre Color-Gradient-time450-1

Sur cet exemple il est 4h50. 4 heures est représenté par la couleur “jaune” et 50 minutes par la couleur “violet” de la tranche “48-52”. La combinaison des 2, forme le dégradé “jaune → violet” dans la direction haut (heure) → bas (minutes).

Note : Vous pouvez déplacer le curseur sur l'image

Color-Pick-1020-Chiffre Color-Gradient-time1020-1

Sur cet exemple il est 10h20. 10 heures est représenté par la couleur “violet” et 20 minutes par la couleur “jaune” de la tranche “18-22”. La combinaison des 2, forme le dégradé “violet → jaune” dans la direction haut (heure) → bas (minutes).

Note : Vous pouvez déplacer le curseur sur l'image

140
150
305
335
530
555
620
710
745
820
830
915
955
1110
1220

J'ai pour finir fait codé par Chat GPT en HTML/CSS/JS le principe.

DECOUVREZ AUSSI

View