Les Tutos de Gabriel

Utiliser des gammes de couleurs

Écriture du programme

Si vous savez créer un menu horizontal, ce sera facile pour vous !

Connaissances requises :

Connaître le HTML5
Connaître le CSS3

Méthode :

Il faut, au préalable que vous ayez choisi votre gamme graphique, dans un site spécialisé, comme Adobe Color CC

Notez alors les valeurs hexadécimales de vos couleurs, ainsi que leurs noms.
Pour les noms, s'ils ne sont pas insiqués, vous pouvez les retrouver en utilisant le petit programme gratuit "La Boîte à Couleurs" que vous trouverez facilement sur Internet, et qui n'a vraiment pas besoin d'explication pour comprendre le fonctionnement. Chapeau bas à son auteur et un grand merci !

Ensuite, voilà ce que nous voulons reproduire :

black
#000
peachpuff
#F2D8C2
burlywood
#F2AB91
indianred
#D9483B
maroon
#731414
firebrick
#A62121
white
#fff

Et ci-dessous, la méthode :

1 - Reproduisez les divgnes ci-dessous dans votre page html:
<div class="barredecouleurs">
<div
class="couleurs black">black<br />#000</div>
<div
class=couleurs "peachpuff">peachpuff<br />#F2D8C2</div>
<div
class=couleurs "burlywood">burlywood<br />#F2AB91</div>
<div
class=couleurs "indianred">indianred<br />#D9483B</div>
<div
class=couleurs "maroon">maroon<br />#731414</div>
<div
class=couleurs "firebrick">firebrick<br />#A62121</div>
<div
class=couleurs "white">white<br />#fff</div>
</div>

2 - Dans votre fichier CSS, reproduisez les lignes ci-dessous :
.barredecouleurs { display: flex;flex-wrap: nowrap; padding: 0; border: 0 2px solid #fff; width:auto}
.couleurs { display:block; line-height: 2em; border: 1px solid #87cefa; color: #fff; width: 12%; text-align: center; text-shadow: 2px 2px 2px #000}
 
.black { background-color: #000; color: #fff;}
.peachpuff { background-color: #F2D8C2;}
.burlywood { background-color: #F2AB91;}
.indianred { background-color: #D9483B;}
.maroon { background-color: #731414;}
.firebrick { background-color: #A62121;}
.white { background-color: #FFF; color: #000; text-shadow: none;}

Commentaire :

Vous pouvez remarquer qu'aucune image n'a été utilisée.
Ceci économise autant d'images et de temps pour les charger.


Des gammes issues de Photos de Nature

Nous allons utiliser les formules précédentes, en les modifiant, selon besoins, pour créer des gammes de couleurs associées à des images traitées avec Adobe CC

Les images sont extraites du web, de l'application ="Wallpaper Studio 10" à récupérer dans la boutique Microsoft.

Pour simplifier nous allons prendre des exemples pour les couleurs de base arc-en-ciel : "Violet-Indigo-Bleu-Vert-Jaune-Orangé-Rouge".

Violet :

fun/fun0001.jpg

Indigo :

fun/fun0002.jpg

Bleu :

fun/fun0003.jpg

Vert :

fun/fun0004.jpg

Jaune :

fun/fun0005.jpg

Orangé :

fun/fun0006.jpg

Rouge :

fun/fun0007.jpg

Création des gammes correspondantes :

Nous allons donc créer des gammes où les couleurs seront notées des plus claires aux plus foncées.

3 - Dans votre fichier CSS, continuez avec les lignes ci-dessous :
 
.violet1 { background-color : #da70d6}
.violet2 { background-color : #ff6347}
.violet3 { background-color : #cd5c5c}
.violet4 { background-color : #191970}
.indigo1 { background-color : #a159c0}
.indigo2 { background-color : #0549a4}
.indigo3 { background-color : #17215b}
.indigo4 { background-color : #0d0a23}
.bleu1 { background-color : #87cefa}
.bleu2 { background-color : #528dd9}
.bleu3 { background-color : #0f287c}
.bleu4 { background-color : #45832a}
.vert1 { background-color : #72ef6e}
.vert2 { background-color : #0abe04}
.vert3 { background-color : #0a8e02}
.vert4 { background-color : #025a03}
.vert5 { background-color : #014202}
.jaune1 { background-color : #f3a005}
.jaune2 { background-color : #8c4100}
.jaune3 { background-color : #657502}
.jaune4 { background-color : #383c00}
.orange1 { background-color : #f5bf1c}
.orange2 { background-color : #f4ab1f}
.orange3 { background-color : #f5811d}
.orange4 { background-color : #f16f20}
.orange5 { background-color : #db3d15}
.rouge1 { background-color : #a2bddb}
.rouge2 { background-color : #3379db}
.rouge3 { background-color : #f30402}
.rouge4 { background-color : #a50a08}

Remarque :

Ce serait assez long à écrire au clavier, et vous ferez sans doute un copier-coller.

Il nous faut également modifier 2 des premières lignes que nous avons écrites en paragraphe 2 pour les CSS.

4 - Dans la liste CSS des couleurs, modifiez la première ligne comme ci-dessous :
.black, .violet5, .violet6, .indigo5, .indigo6, .bleu5, .bleu6, .vert6, .jaune5, .jaune6, .orange6, .rouge5, .rouge6
{ background-color: #000; color: #fff;}

5 - Modifiez également celle-ci :
.white, .violet0, .indigo0, .bleu0, .vert0, .jaune0, .orange0, .rouge0
{ background-color: #fff}


Conclusion :

Ces quelques lignes vous ont montré comment se constituer des gammes de couleurs à partir du fond d'écran qui sera éventuellement utilisé pour vos pages.
Vous pourez voir dans le cours "Créer son site Web" leur utilisation pour donner le choix des couleurs aux visiteurs.