Tu connais le CSS ? C’est le langage informatique qui permet de gérer le design d’un site Web. Tu te doutes bien que la couleur en CSS a son importance, mais il n’est pas toujours évident de choisir les couleurs de son site Web avec harmonie. Un site n’est pas un sapin de Noël, donc on pourrait se demander quelles couleurs choisir.
Dans cet article, je vais te donner des outils et des astuces pour t’aider à choisir des couleurs avec harmonie.
Mais juste avant, si tu t’intéresses au CSS, je te laisse la liberté de lire l’article sur les positions.
Comment intégrer la couleur CSS sur son site Web ?
Tu pourras choisir la méthode qui te convient le mieux. Pour commencer, utilisons la plus simple 😉.
les 4 façons d'utiliser la couleur en CSS
Commençons par explorer quelques bases du langage CSS. Nous passerons en revue les différentes méthodes pour définir les couleurs ainsi que les propriétés associées.
Les couleurs CSS programmées
La première méthode est certainement la plus simple, surtout si l’on a quelques notions d’anglais. En effet, il suffit d’écrire le nom de la couleur désirée pour obtenir la couleur CSS voulue. Par exemple, en écrivant « black », on obtiendra du noir, « blue » pour du bleu, et ainsi de suite :
Cette solution est pratique, mais elle reste limitée, car elle se limite aux couleurs prédéfinies. Ainsi, si tu souhaites une couleur entre le bleu et le pastel, tu risques de ne pas la trouver. Cependant, il existe tout de même plus d’une centaine de couleurs prédéfinies. Si tu désires une couleur très précise, nous pourrons utiliser une autre méthode permettant d’obtenir n’importe quelle couleur.
Les couleurs hexadécimal
Deuxième méthode : utiliser la couleur en hexadécimal. Mais qu’est-ce que c’est exactement ? Il s’agit de chiffres de 0 à 9 et de lettres de A à F. Pour ce faire, il suffira d’utiliser une combinaison de six chiffres et/ou lettres et de placer un « # » devant cette combinaison. Par exemple, « #000000 » représente le noir et « #FFFFFF » le blanc.
Tu te dis peut-être : « whoa, mais tu connais tous ces codes couleurs par cœur ? » Absolument pas, à part quelques-uns à force.
Si mon site est sur WordPress, WordPress a déjà ce qu’il faut ; sinon, je vais utiliser une palette de couleur numérique.
Les couleurs RGB
La troisième méthode, que j’utilise moins souvent, est la « RGB », dans laquelle nous allons utiliser trois chiffres allant de « 0 » à « 255 ». Le « R » de « RGB » signifie « rouge » en anglais, le « G » représente « vert », et le « B » signifie « bleu ». Ainsi, lorsque nous utilisons du rouge et du vert, nous obtenons du jaune (ce sont des principes de base de la peinture). J’ai préparé un tableau ci-dessous pour une meilleure visualisation, désolé si cela est un peu agressif pour les yeux :
| r | g | b | Couleurs obtenues |
|---|---|---|---|
| 255 | 0 | 0 | Rouge |
| 0 | 255 | 0 | Vert |
| 255 | 255 | 0 | Jaune |
| 150 | 0 | 0 | Rouge foncé |
Les couleurs HSL
Une autre méthode pour créer des couleurs avec le CSS consiste à utiliser le HSL
Pour comprendre le fonctionnement de la méthode « hsl » pour obtenir des couleurs, nous allons utiliser un rapporteur :
Ensuite, nous allons appliquer de la couleur :
Notre arc-en-ciel est joli, n’est-ce pas ?
Eh bien, si nous rassemblons les deux images, qu’est-ce que cela pourrait donner ?
Ah, eh bien… On peut voir que si j’utilise le chiffre 0, j’obtiens du rouge. À 40 degrés, j’ai du orange, à 60 du jaune, à 90 du vert, et à 180 degrés, du bleu clair.
Et si nous allions plus loin ? Et si nous faisions un tour complet ? Nous aurions alors plus de couleurs :
Effectivement, à 240 degrés, on obtient du bleu foncé, à partir de 270° du violet et vers 310 degrés, du rose.
Donc, ce sont des chiffres entre 0 et 359 qui vont définir notre teinte. Une fois notre teinte sélectionnée, nous allons choisir la saturation de celle-ci en pourcentage.
Oui, car un chiffre ne suffit pas avec cette méthode ! Il nous faut encore deux éléments. Le deuxième élément est de déterminer le pourcentage de saturation de notre teinte. Plus on se rapproche du cent pour cent, plus notre couleur sera vive.
Enfin, le dernier élément, exprimé en pourcentage, va déterminer la luminosité de notre couleur. Si l’on ajoute trop de lumière, notre couleur va devenir blanche. Quel intérêt ?
Par exemple, si je souhaite obtenir un rouge, je remarque que sur mon rapporteur le chiffre « 0 » correspond au rouge. Je vais donc écrire hsl(0). Ensuite, je veux que mon rouge soit assez vif, donc je mets la saturation à 100%, ce qui donne hsl(0, 100%). Maintenant, il ne nous reste plus qu’à définir la luminosité. Pour conserver ce rouge vif, je vais la mettre à 50%. Le résultat final est donc hsl(0, 100%, 50%).
Quels éléments peut-on colorer avec le CSS ?
Maintenant que nous avons vu comment créer de la couleur, voyons ce que nous pouvons colorer. En effet, un peintre avec un pot de peinture mais rien à peindre n’a aucun intérêt.
Tu t’en doutes certainement, le texte peut être mis en couleur en utilisant la propriété « color ». Si j’écris « color » avec la valeur « red », mon texte sera en rouge.
Le code CSS :
color: red;
Résultat :
Une autre propriété très utilisée est « background-color », qui permet de modifier la couleur de l’arrière-plan. Par défaut, il est blanc, mais si je souhaite utiliser un gris clair comme couleur de fond pour mon site web, je vais utiliser « background-color » avec la valeur « #d3d3d3 ».
Le code CSS :
background-color: #d3d3d3;
Résultat :
Si l’on souhaite mettre une bordure en couleur, on peut utiliser la propriété « border-color » avec comme valeur, par exemple, « blue rgb(255, 255, 0) ». Dans ce cas, le haut et le bas seront en bleu, et les côtés droit et gauche en jaune, puisque la valeur possède deux couleurs. Cependant, il faudra également définir le type de bordure avec « border-style » ainsi que l’épaisseur des bordures avec « border-width ».
Le code CSS :
border-style: solid;
border-width: 3px;
border-color: blue rgb(255, 255, 0);
Résultat :
Les ombre CSS
On peut également utiliser la couleur pour créer un ombrage au texte. C’est très utile, surtout si l’on souhaite mettre du texte au-dessus d’une image et que cette image a une couleur proche de la couleur de la police. Pour cela, nous allons utiliser la propriété « text-shadow » et nous allons indiquer quatre valeurs : en premier, le positionnement de l’ombre en horizontal (c’est le décalage qui va créer l’impression d’une ombre), en second, le positionnement de l’ombre en vertical, ensuite l’intensité de l’ombre, et enfin la couleur. Oui, ce n’est pas parce que ton texte est noir que ton ombre doit aussi être en noir (voir l’exemple qui suit)!
Le code CSS :
text-shadow: 2px 2px 4px rgb(253 108 158);
Résultat :
Plus haut, nous avons vu qu’il est possible de créer des bordures. Il est également possible d’ajouter une ombre à nos éléments. Pour ce faire, nous allons utiliser la propriété « box-shadow » et nous allons indiquer quatre valeurs : le positionnement de l’ombre en horizontal, le positionnement de l’ombre en vertical, l’intensité de l’ombre, et enfin la couleur :
Le code CSS :
box-shadow: 2px 2px 4px purple;
Résultat :
Les propriétés CSS moins populaires
Une propriété de couleur CSS moins connue est « text-stroke ». Avec « text-stroke », vous pouvez donner une couleur différente au contour de votre texte. Comment cela fonctionne-t-il ? Il suffit d’indiquer deux valeurs : d’abord l’épaisseur du contour, puis la couleur.
Le code CSS :
-webkit-text-stroke: 2px #008000;
Résultat :
Il est possible d’utiliser les couleurs pour créer un dégradé. Pour vraiment te décortiquer cette fonction, cela mériterait presque un nouveau tutoriel. Donc, je ne vais pas rentrer dans les détails, comme je suis sympa 😉 je vais juste te montrer un dégradé que j’aime bien comme exemple. Nous avons utilisé la propriété « background », ensuite il faudra écrire « linear-gradient() » ; dans les parenthèses, on retrouvera les valeurs : la première valeur est l’orientation du dégradé, puis les couleurs, avec au minimum deux couleurs. Mais il est possible de ne pas préciser l’orientation du dégradé. Dans mon exemple, j’ai une orientation de 90° pour mon dégradé, avec la couleur verte et bleue.
Le code CSS :
background: linear-gradient(180deg, #52d3aa, #3f95ea);
Résultat :
Quelques exemples concrets avec les couleurs
Maintenant, nous allons voir quelques exemples concrets : comment utiliser les couleurs CSS dans des cas pratiques. Tu verras que les exemples utilisés précédemment sont très courants lorsqu’on crée une page Web. Par quoi allons-nous commencer 
?
5 exemples courants en CSS lorsqu'on crée un site et que l'on utilise des couleurs
- Commençons par la couleur de fond. Tu peux voir sur l’image ci-dessous un joli dégradé violet, plus clair vers le haut et plus foncé vers le bas. Pour cela, j’ai utilisé « background: linear-gradient ».
- Par ailleurs, j’ai utilisé la propriété CSS « color » pour mettre mon titre principal et le paragraphe juste en-dessous en blanc. En effet, par défaut, ton texte sera en noir !
- Ensuite, toujours pour mon titre principal et le paragraphe juste en-dessous, j’ai ajouté une ombre en utilisant la propriété « text-shadow ». On ne s’en rend pas forcément compte comme ça, mais cela rend le texte plus visible. De plus, si l’on observe attentivement, on peut voir que cela crée un effet de relief au texte.
- En outre, j’ai créé trois carrés auxquels j’ai ajouté une ombre tout autour. Cela donne une impression de relief. J’ai utilisé la propriété « box-shadow » pour réaliser cela.
- Enfin, dans mon cas, les éléments qui se trouvent sur le fond violet deviennent violets. Pour résoudre ce problème, j’ai utilisé « background-color » sur les trois carrés.
Quelle différence y a-t-il avec et sans la couleur CSS ?
Nous avons vu que parfois l’utilisation de certaines couleurs peut être subtile, comme l’ombre sur le texte. C’est pourquoi nous allons maintenant observer la différence avec et sans couleur pour certains éléments de notre exemple.
Ensuite, nous allons rester sur les ombres, mais cette fois-ci sur nos trois éléments, ou si tu préfères, nos trois carrés. Tu vas voir sur l’image ci-dessous qu’il y a une nette différence. Je tenais quand même à te le montrer en image.
Enfin, comme je te le disais plus haut, sans utiliser la propriété « background-color », le haut de mes carrés devient violet. Pour mieux comprendre, rien ne vaut une image.
Voici le code HTML et CSS que j'ai utilisé
1 & 2. Le code HTML et CSS pour créer un joli dégradé violet et mettre de la couleur au texte :
<!-- HTML -->
<section id="accueil">
<h1>J'adore le CSS et le HTML</h1>
<p>La couleur CSS c'est vraiment super, on peut faire de très beaux site</p>
</section>
<!-- CSS -->
section#accueil {
background: linear-gradient(180deg, #CBB4F2, #6863F2);
padding: 250px 0 250px 0;
color: rgba(255, 255, 255, 0.8);
}
3. Voici le code HTML et CSS pour ajouter une ombre au texte :
<!-- HTML -->
<section id="accueil">
<h1>J'adore le CSS et le HTML</h1>
<p>La couleur CSS c'est vraiment super, on peut faire de très beaux site</p>
</section>
<!-- CSS -->
section#accueil > h1 {
font-size: 3.125em;
text-shadow: 2px 2px 4px #818892;
}
section#accueil > p {
font-size: 1.8em;
text-shadow: 2px 2px 4px #818892;
}
4 & 5. Voici le code HTML et CSS pour créer une ombre sur des éléments (les carrés) et appliquer une couleur de fond :
<!-- HTML -->
<section>
<div class="code">
<h2>HTML</h2>
<p>Pouvez-vous nous aider en traduisant ce site dans des langues étrangères? Envoyez-nous un courrier électronique avec les détails si vous pouvez aider.</p>
</div>
<div class="code">
<h2>CSS</h2>
<p>Pouvez-vous nous aider en traduisant ce site dans des langues étrangères? Envoyez-nous un courrier électronique avec les détails si vous pouvez aider.</p>
</div>
<div class="code">
<h2>BOOTSTRAP</h2>
<p>Pouvez-vous nous aider en traduisant ce site dans des langues étrangères? Envoyez-nous un courrier électronique avec les détails si vous pouvez aider.</p>
</div>
</section>
<!-- CSS -->
.code {
box-shadow: 7px 14px 42px 3px rgba(163, 174, 184, 0.4);
background-color: white;
}
Quelques astuces pour t'en sortir avec toutes les couleurs
Comme nous l’avons vu, il existe tellement de couleurs. Comment s’en sortir ?
Certains sites sont vraiment bien faits pour nous aider, surtout si tu veux utiliser les couleurs hexadécimales.
Réussir le contraste de tes couleurs à chaque fois et faciliter la lecture pour les malvoyants
Par exemple, assurer un contraste suffisant entre la couleur du texte ou d’un élément et la couleur de fond. Si tu as une bonne vue, cela peut être encore plus difficile, car tu ne pourras pas te mettre à la place d’une personne ayant des problèmes de vue. Une personne avec des problèmes de vue qui souhaite lire le texte de ton site peut rencontrer des difficultés si le contraste n’est pas suffisant.
Dans mon exemple (voir l’image ci-dessous), on peut remarquer que sur le site Adobe color, le contraste des couleurs n’est pas optimal. Il faudrait modifier le vert/bleu ou le jaune pour que la lecture du texte soit plus agréable pour les personnes ayant des problèmes de vue :
C’est incroyable, juste avec quelques modifications, nous pouvons rendre la visibilité plus agréable à certaines personnes ayant des problèmes de vue ! Après avoir apporté quelques modifications (voir l’image ci-dessus), nous constatons que le texte standard, le texte de grande taille et les composants graphiques sont améliorés.
Ce que j’ai fait, c’est rendre le jaune plus clair.
Comment trouver de l'inspiration pour découvrir d'autres couleurs ?
Tu as peut-être déjà trouvé une couleur pour ton site, mais tu aimerais en choisir une autre et tu ne sais pas trop laquelle choisir.
Tout d’abord, si tu souhaites avoir des idées pour trouver une ou plusieurs couleurs, tu peux utiliser un nuancier.
Ensuite, en utilisant le paramètre ‘harmonie chromatique’, tu pourras t’inspirer pour trouver d’autres couleurs pour ton site web.
Comment choisir tes couleurs et réussir tes dégradés ?
Comme moi plus haut, tu souhaites peut-être créer un super dégradé, mais pour cela, il te faut au minimum deux couleurs, et tu n’arrives pas à te décider pour la deuxième couleur.
Pour ce faire, j’ai utilisé une couleur claire et une couleur foncée dans les tons violets du nuancier d’Adobe :
Il ne te reste plus qu’à essayer…
Ce qu'il faut retenir
Pour finir, nous avons vu qu’il existe différentes propriétés CSS pour appliquer de la couleur à un site web. Pour choisir la couleur, il existe une centaine de couleurs préprogrammées ; il suffit d’écrire leurs noms en anglais. Mais il est aussi possible d’utiliser les couleurs hexadécimales, RGB et HSL. Ensuite, nous avons vu des exemples concrets en CSS ; la couleur CSS est indispensable lorsqu’on crée un site web. Enfin, nous avons des astuces pour choisir ses couleurs pour son site, et même une astuce très simple pour faciliter la lisibilité des malvoyants.
Merci pour cet article très instructif sur l’utilisation des couleurs en CSS ! Les explications sont claires. J’aime aussi tes exemples concrets. Merci pour ce partage d’astuces qui me seront très utiles !
Merci, Laura, pour ton retour. Je suis ravi que mon article t’ait plu.
Article très complet. Les meilleures couleurs sont les hexadécimales pour le web et adobe color est génial.
D’ailleurs, je me demande si le blanc et le turquoise que utilises passe le rapport de contraste pour les malvoyants car j’ai moi-même du mal à lire.
Hello Flore, merci pour ton commentaire. Les hexadécimales, c’est ce que je préfère utiliser, on dirait que je ne suis pas le seul ! Eh bien… il te suffit de faire le test, souvent le blanc et le turquoise sont jolis à voir, mais pas pratiques si les yeux doivent rester concentrés sur un point, comme par exemple du texte.
Merci pour cet article. Étant artiste peintre, je suis très sensible aux couleurs, et un site web aux couleurs criardes ou peu harmonieuses me fait fuir directement !
Bonjour Alexandra, l’inverse est vrai aussi : les couleurs peuvent retenir les visiteurs d’un site ! Merci pour ton message 😉
Merci pour tous ces détails, je n’ai jamais osé entré dans le code html pour changer mes couleurs. Ton article est très clair et donne de bons conseils. Merci pour le lien sur la roue chromatique et les accords de couleurs.
Avec plaisir Virginie, merci pour ton commentaire. Ce n’est pas avec le code HTML que tu changes les couleurs, mais avec le code CSS. Le HTML concerne la structure, le CSS équivaut à des pinceaux pour ajouter de la couleur ! Ou alors, le HTML c’est la chambre, le CSS c’est la décoration.
N’hésite pas à poser des questions si tu souhaites une fois entrer dans le code HTML, il existe plein de techniques sans défigurer son site !
Il est super ton article. Je connais bien la palette de couleur parce que je l’utilise dans mon métier et il est vrai que ce n’est pas toujours facile de faire le bon choix des couleurs par rapport au contraste sur l’ordinateur.
Merci, je suis content que mon article t’ait plu. Oui, je suis d’accord avec toi, aujourd’hui il existe plein d’outils pour nous aider 😀