Générer une palette de couleurs à partir d'une image

Description

Le choix des couleurs pour la réalisation d'un site web est important.

Par exemple, le site du cours utilise principalement ces trois couleurs :

#FFFFFF

#174A65

#D5DEE5

Ce choix doit souvent être en fonction du logo de l'entreprise ou de l'école.

Cette activité vous permettra d'identifier les couleurs associées à une image.

1. Trouvez une image de votre choix
   
   
2. Placez cette image dans votre espace de téléchargement
   
   
3. Copiez l'URL (adresse) de cette image
   
   
4. Consultez le site web http://www.degraeve.com/color-palette/index.php
   
   
5. Collez l'URL de votre image dans le champ "URL of image"
   
   
6. Cliquez le bouton "Color-Palette-ify!"
   
   
7. Faites ensuite un clic-droit dans la page + Code source de la page
   
   
8. Copiez le code html qui contient la palette des couleurs
   exemple
   <div class="grid-20 grid-parent"> <div class="grid-50"><div style="background:#1155aa; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#1155aa</div> <div class="grid-50"><div style="background:#dd3355; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#dd3355</div> <div class="grid-50"><div style="background:#ffffff; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#ffffff</div> <div class="grid-50"><div style="background:#dddddd; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#dddddd</div> <div class="grid-50"><div style="background:#99aacc; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#99aacc</div> <div class="grid-50"> </div> <div class="grid-50 hide-on-mobile">dull</div> </div> <div class="grid-20 grid-parent"> <div class="grid-50"><div style="background:#0055ee; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#0055ee</div> <div class="grid-50"><div style="background:#ff0011; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#ff0011</div> <div class="grid-50"><div style="background:#ffffff; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#ffffff</div> <div class="grid-50"><div style="background:#ddccdd; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#ddccdd</div> <div class="grid-50"><div style="background:#88aadd; height:40px;"></div></div> <div class="grid-50" style="height:40px; line-height:40px;">#88aadd</div> <div class="grid-50"> </div> <div class="grid-50 hide-on-mobile">vibrant</div> </div>
9. Ajoutez une page à votre portfolio en affichant l'assistant HTML ainsi que la directive 103435
   
   
10. Inscrivez dans le champ titre : Générer une palette de couleurs à partir d'une image
    
    
11. Sélectionnez la section : MODULE HTML
    
    
12. Sélectionnez la matière : informatique
    
    
13. Inscrivez dans le champ no de la directive : 103435
    
    
14. Inscrivez dans votre page le titre de niveau 1 : Générer une palette de couleurs à partir d'une image
    
    
15. Ajoutez votre image utilisée
    
    
16. Collez le code html copié préalablement
    
    
17. Visualisez votre page et apportez des modifications au besoin.