• 4 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 08/01/2018

Une explosion de couleurs

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Un design sans couleur ? Impossible !

Les couleurs sont l'essence même de toute création graphique : sans elle, pas d'ambiance, pas de fantaisie, pas de jolis effets...

Le noir et blanc, bien que donnant un aspect assez classe, est assez ennuyeux, non ?

C'est donc sans surprise que CSS3 améliore la gestion des couleurs pour nous offrir encore plus de possibilités !

Une nouvelle composante ?

Un petit rappel avant de commencer : il existe trois façons d'appeler une couleur en CSS :

  • Écrire son nom en anglais : red, green, blue etc. Vous pouvez consulter la liste des couleurs disponibles sur le site du W3C.

  • Écrire son code hexadécimal : #ca1c1c, #259d18, #498ab9 etc.

  • Écrire son modèle RGB : rgb(234,123,145), rgb(23,213,45), rgb(34,23,245) etc.

Image utilisateur

RGB et ses différents mélanges
©Wikipéda

C'est cette dernière méthode qui va nous intéresser, alors penchons-nous un peu plus sur son fonctionnement.

Comme son nom l'indique, le modèle RGB définit une couleur selon trois composantes : le total de rouge, le total de vert et le total de bleu.

Chaque valeur est comprise entre 0 et 255 inclus : à 0 la composante associée est absente de la couleur finale, à 255 elle est présente à son maximum. Ainsi, la couleur rgb(0,0,0) ne possède pas de rouge, ni de vert, ni de bleu : cela donne du noir.
En revanche, rgb(255,255,255) possède chacune des trois composantes au maximum : nous avons alors du blanc.

Les normes CSS3 ajoutent une quatrième composante aux trois que nous venons de voir : la composante Alpha. Celle-ci définit le taux d'opacité de la couleur : à 0 elle est transparente, à 1 elle est totalement opaque.

Pour utiliser cette nouvelle composante fort intéressante, il faut appeler non plus rgb() mais rgba() (ce n'est pas compliqué, il y a juste un a (de Alpha)en plus ! :p).

Aller, un petit exemple histoire de tester !
Nous allons colorer ces trois <div> :

<!DOCTYPE html>
<html>
    <head>
	<title>RGBA</title>
	<meta charset="UTF-8" />
    </head>
    <body>
	<div></div>
	<div></div>
	<div></div>
    </body>
</html>
/* Toutes les div */
div
{
    border: 2px solid #000;
    width: 200px;
    height: 200px;
    position: absolute;
}
			
/* Première div, en rouge
(et tant qu'à faire, on révise
le chapitre précédent :p ) */
div:nth-of-type(1)
{
    background-color: rgba(255,0,0,0.7);
    left: 130px;
    top: 20px;
}
			
/* Seconde div en vert */
div:nth-of-type(2)
{
    background-color: rgba(0,255,0,0.7);
    left: 80px;
    top: 120px;
}
		
/* Troisième div en bleu */
div:nth-of-type(3)
{
    background-color: rgba(0,0,255,0.7);
    left: 240px;
    top: 100px;
}

Essayer !

Lumière sur le modèle HSL

Le modèle RGB est donc très puissant, mais malheureusement peu intuitif...
Imaginons par exemple que vous regardiez le code CSS d'une autre personne et que vous voyez ceci :

html
{
   background-color: rgb(75,139,185);
}

Si vous avez bien suivi la partie précédente, vous savez que cette couleur possède $75/255$ de rouge, $139/255$ de vert et $185/255$ de bleu.
Vous vous attendez donc à voir afficher une couleur plutôt bleue, allant vers le vert.

Et vous auriez raison, car voici ce que ça donne :

Image utilisateur

. Bon, notre œil ne voit pas tellement ce que cette couleur a de vert, mais admettons !
Prenons maintenant le cas où vous souhaitez rendre ce bleu plus "pétant" : qu'il soit un peu plus "flashy", moins fade !

Comment allez-vous vous débrouiller ? Enlever du rouge ? Enlever du vert ? Ajouter du bleu ? Et de combien devrez-vous faire varier les valeurs de ces composantes ?

A moins de connaître par cœur les 16 millions et quelques de mélanges RGB, il est impossible de faire ça intuitivement !

C'est donc là qu'entre en scène le modèle HSL.
Tout comme le RGB, HSL se base sur trois valeurs. Mais celles-ci ne définissent plus une quantité de couleur, mais un niveau de teinte, un taux de saturation et un taux de luminosité.

Dit comme ça, je dois avouer que c'est encore moins intuitif que RGB. :p
Alors tâchons d'expliquer clairement ces trois nouvelles valeurs :

  • ©Wikipédia

    La teinte définit en quelque sorte la base de notre future couleur : c'est elle qui définit si notre couleur sera rougeâtre, bleutée ou encore dans les tons verts. En CSS, la teinte varie de 0 à 360, selon le schéma ci-dessous :

    ©Wikipéda
    Vous l'aurez compris, si on veut une couleur dans les tons bleus nous devons spécifier à la teinte une valeur comprise entre 180 et 270, tandis que si on veut de l'orangé on la définira entre 0 et un peu avant 90.
    Pas trop compliqué, n'est-ce pas ? :)

  • Image utilisateur

    La saturation est un pourcentage représentant l'intensité de la future couleur. Plus cette valeur est proche de 100, plus la future couleur sera vive. Au contraire, plus la saturation s'approche de 0 et plus elle paraîtra fade et grisâtre.

    La saturation du rouge

  • Image utilisateur

    La luminosité est la plus simple à comprendre : plus cette valeur est élevée, plus la couleur paraîtra lumineuse (plus elle s'approchera du blanc). A contrario, plus cette valeur s'approche de 0 et plus la couleur en résultant paraîtra sombre (et donc plus elle s'approchera du noir). Il s'agit là encore d'un pourcentage.

    La luminosité du rouge

Maintenant que tout est clair dans votre esprit, il serait bon de pouvoir se servir de tout ceci en CSS, n'est-ce pas ?

Les normes CSS3 nous proposent d'utiliser ce modèle en appelant tout simplement hsl().

Pour avoir du rouge pur, nous écrirons donc : hsl(360,100%,50%);
Besoin d'une explication ?
Comme nous venons tout juste de le voir, la première valeur est la teinte. D'après le cercle chromatique qu'on a vu plus haut, le rouge correspond à la valeur 360 (ou 0).
La seconde valeur est la saturation : puisque nous voulons un rouge pur, on le veut le plus vif possible, on indique donc un pourcentage maximum !
Enfin, nous voulons une luminosité moyenne : si elle est trop basse on s'approche trop du noir mais, si elle est trop élevée, nous sommes trop près du blanc... L'idéal est donc d'être à mi-chemin !

Bon, revenons-en à notre problème de départ. Nous avions ce bleu :

Image utilisateur

, définit par rgb(75,139,185);, et nous souhaitions le rendre un peu plus "flashy".

Tel quel, on a vu que c'était pas évident du tout, alors imaginons que le développeur qui nous a précédé ait écrit cette couleur au format HSL :

html
{
   /* Cette couleur est l'équivalent HSL de rgb(75,139,185)
   On ne peut pas vraiment le deviner ! */
   background-color: hsl(205,44%,51%);
}

Et là, c'est le bonheur ! Si vous avez bien suivi jusque-là, vous devriez savoir quelle valeur modifier pour rendre notre bleu plus intense !

Aller, je vous donne un indice : il ne s'agit ni de la teinte, ni de la luminosité. :-°

html
{
   /* On veut rendre notre couleur plus
   flashy : on augmente la SATURATION ! */
   background-color: hsl(205,74%,51%);
}

Nous passons donc de cette couleur de base

Image utilisateur

à celle-ci

Image utilisateur

et notre problème est résolu en deux coups de cuillères à soupe !
Pour information, le modèle RGB correspondant est rgb(38,145,223); : il aurait été bien difficile de le trouver à partir de rgb(75,139,185); !

Jouons avec l'opacité

Nous avons vu que CSS3 nous permet de définir un niveau de transparence à nos couleurs à l'aide de rgba(); ou hsla();.

Il est possible d'aller encore plus loin en définissant l'opacité de tout un élément HTML !

Quelle est exactement la différence... ?

Depuis tout à l'heure, nous appliquons une transparence sur des couleurs. Ces couleurs peuvent ensuite être utilisées pour des propriétés telles que color, background-color, border-color etc.

Définir l'opacité d'un élément HTML concerne tout l'élément : que ce soit son image de fond, ses bordures ou encore son contenu (du texte ou d'autres éléments HTML !).

Pour que vous compreniez bien, voici le code HTML sur lequel on basera notre exemple :

<!DOCTYPE html>
<html>
    <head>
 	<title>Opacité</title>
	<meta charset="UTF-8" />
    </head>
    <body>
	<h1>Ce texte est lisible malgré les DIV présentes sur lui.</h1>
	<div>
            Parent
	    <div>Enfant</div>
	</div>
    </body>
</html>

Notre code CSS placera notre <div> parente au-dessus du texte. En lui appliquant une opacité, nous nous rendrons compte que sa <div> enfant sera également affectée !

Ah oui, avant que je n'oublie : la propriété CSS pour modifier le niveau de transparence d'un élément s'appelle tout simplement opacity. :)
Celle-ci prend une valeur comprise entre 0 (complètement transparent) et 1 (totalement opaque).

/* Toutes les div */
div
{
    border: 2px solid #000;
    position: absolute;
    top: 20px;
    text-align: center;
}
			
/* div parente en blanc */
div:nth-child(2)
{
    background-color: hsl(0,0%,100%);
    width: 200px;
    height: 200px;
    line-height: 200px;
    left: 130px;
    opacity: 0.5;
}
			
/* div enfant en bleu */
div:nth-child(2) div
{
    background-color: hsl(270,100%,50%);
    width: 50%;
    height: 50%;
    line-height: 100px;
    left: 175px;
}

Essayer !

opacity a donc rendu notre <div> parente à moitié transparente (ou à moitié opaque, selon votre niveau d'optimisme :p ). Comme toute propriété CSS, elle a été héritée par tous les enfants de l'élément sur lequel elle est appliquée.

Ainsi s'achève ce chapitre haut en couleur. :D

La possibilité que nous offre CSS3 de jouer avec l'opacité est un grand atout : nul doute que les graphistes seront ravis d'une telle initiative !

Retenez bien ces nouvelles façons d'utiliser les couleurs, car nous les réutiliserons dès le chapitre suivant pour donner un peu de gaieté à des... ombres. :-°

Exemple de certificat de réussite
Exemple de certificat de réussite