# HTML colors : configurer et personnaliser les couleurs de votre site Web Les couleurs HTML sont utilisées pour sélectionner les couleurs des arrière-plans, des textes ou des cadres dans un document HTML. Un choix correct de couleurs améliore le design et la lisibilité d’un site Web. Il existe trois façons différentes de définir ces couleurs ; découvrez-les en lisant cet article ! ## HTML colors, qu’est-ce que c’est ? Les couleurs HTML, ou HTML *colors*, sont utilisées pour définir les valeurs de couleur de certains éléments dans un document [HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-que-le-html/). Vous pouvez personnaliser le [*background* HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/backgrounds-html/), les contours et le texte grâce à des réglages simples effectués dans la zone [](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-body/) en utilisant la [balise <style>](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balise-html-style/). ## HTML colors : méthodes de définition des couleurs HTML Il existe trois méthodes différentes, mais équivalentes, pour définir les couleurs HTML. Vous découvrirez dans les paragraphes suivants ce qui différencie ces trois variantes. ### Noms de couleurs Au total, une palette de couleurs HTML assez large est supportée par les navigateurs modernes : pas moins de **140 noms de couleurs** ! Pour les utiliser, il suffit d’insérer le nom anglais correspondant à l’intérieur du code. Outre les valeurs standard comme « *Blue* », « *Gray* » ou « *Red* », des valeurs plus spécifiques comme « *Chocolate* », « *Cornsilk* » ou « *DarkSeaGreen* » sont également possibles. Conseil Dans cet [article de w3schools](https://www.w3schools.com/colors/colors_names.asp "w3schools.com : HTML Color Names"), vous trouverez une liste de tous les noms de couleurs HTML disponibles. ### Codes couleur hexadécimaux En HTML, les codes couleur hexadécimaux sont aussi utilisés. Ils se composent d’un **nombre hexadécimal à six chiffres**, identifié par un dièse (`#`). Les chiffres de 0 à 9 et les lettres de A à F sont utilisés. Dans ce nombre hexadécimal, la proportion des couleurs rouge, verte et bleue est exprimée par paires, `00` étant la plus petite valeur et `FF` la plus grande. La couleur bleue est donc exprimée par le code hexadécimal `#0000FF`, tandis qu’un rose foncé (*DeepPink*) a la valeur `#FF1493`. Aux deux extrémités du spectre se trouvent le noir (`#000000`) et le blanc (`#FFFFFF`). ### Valeurs RGB Tout comme la définition des couleurs avec des codes couleur hexadécimaux, la définition de couleurs HTML fonctionne aussi à l’aide de [codes couleurs RVB](https://www.ionos.fr/digitalguide/sites-internet/web-design/couleurs-rvb/). Celles-ci sont également définies par leurs proportions de rouge, de vert et de bleu, l’intensité d’une composante pouvant être comprise **entre 0 et 255**. Vous définissez par exemple la couleur bleue avec le code `rgb(0, 0, 255)`, le cyan avec `rgb(0, 255, 255)` et le rose avec `rgb(255, 20, 147)`. ## HTML colors : syntaxe et exemples Pour finir, nous illustrons la syntaxe et le fonctionnement des différentes méthodes de spécification des couleurs en HTML par quelques exemples pratiques. ### Modifier les couleurs de l’arrière-plan Si vous souhaitez modifier les couleurs de votre arrière-plan en HTML, vous avez besoin de l’attribut `style` et de la propriété [CSS](https://www.ionos.fr/digitalguide/sites-internet/web-design/quest-ce-que-le-css/) `background-color`. La syntaxe est la suivante : ```html ``` Dans l’exemple suivant, nous utilisons les **noms de couleur** pour définir la couleur de fond du titre `

` sur « *SteelBlue* ». Le texte est surligné une fois avec la valeur de couleur « *SpringGreen* » et une fois avec « *Yellow* » : ```html

Couleurs HTML pour l’arrière-plan

Ici, nous avons créé un paragraphe et sa couleur d’arrière-plan est SpringGreen.

Ceci est un autre paragraphe et sa couleur d’arrière-plan est Jaune.

``` [![Image: HTML colors : exemple d’arrière-plan](https://www.ionos.fr/digitalguide/fileadmin/_processed_/5/4/csm_html-colors-arriere-plan_34e2c59a87.webp "HTML colors : exemple d’arrière-plan")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-colors-arriere-plan.png) Dans le navigateur, nous voyons les différentes couleurs d’arrière-plan pour les trois éléments. ### Personnaliser la couleur d’un texte Si vous souhaitez modifier la couleur des textes sur vos pages Web, cela fonctionne selon un principe similaire. Dans ce cas, vous travaillez toutefois avec la propriété HTML `color`. La syntaxe est la suivante : ```html ``` Pour l’indication de la couleur dans cet exemple, nous utilisons les **valeurs hexadécimales** des couleurs HTML à titre d’illustration. Nous définissons une couleur *OrangeRed* (`#FF4500`) comme couleur de police pour le titre. Le premier paragraphe sera de couleur M*idnightBlue* (`#191970`) et le deuxième paragraphe de couleur *Indigo* (`#4B0082`) : ```html

Ce titre est OrangeRed

Ceci est un paragraphe et son texte est MidnightBlue.

Ceci est un deuxième paragraphe avec la couleur de texte Indigo.

``` [![Image: HTML colors : exemple de texte](https://www.ionos.fr/digitalguide/fileadmin/_processed_/5/9/csm_html-colors-texte_64b8673dd1.webp "HTML colors : exemple de texte")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-colors-texte.png) Après l’exécution de l’exemple de code, nous voyons les trois éléments de texte de couleurs différentes. ### Définir les valeurs de couleur des bordures Vous pouvez également modifier les bordures à votre guise avec les HTML colors. Outre la propriété `border`, vous pouvez utiliser d’autres paramètres pour définir la structure du cadre. Dans ce cas, la syntaxe se présente comme suit : ```html ``` Dans l’exemple suivant, nous allons utiliser la troisième variante de définition des couleurs : les **valeurs RGB**. Le cadre de notre titre reçoit la valeur `rgb(178, 34, 34)` (*FireBrick*). Les deux paragraphes sont encadrés par `rgb(32, 178, 170)` (*LightSeaGreen*) et `rgb(205, 133, 63)` (*Peru*). ```html

Le cadre du titre est FireBrick

Ce cadre est LightSeaGreen.

Ce cadre a la couleur Peru.

``` [![Image: HTML colors : exemple de cadre](https://www.ionos.fr/digitalguide/fileadmin/_processed_/2/4/csm_html-colors-cadre_e63d69abbc.webp "HTML colors : exemple de cadre")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-colors-cadre.png) Les cadres de l’exemple ont différentes couleurs HTML, mais aussi différentes formes d’affichage. This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-colors/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-colors/) for AI/LLM consumption.