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. Vous pouvez personnaliser le background HTML, les contours et le texte grâce à des réglages simples effectués dans la zone en utilisant la balise <style>.
- 3x plus rapide, 60 % d'économie
- Haute disponibilité >99,99 %
- Seulement chez IONOS : jusqu'à 500 Go inclus
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.
Dans cet article de w3schools, 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. 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 background-color. La syntaxe est la suivante :
<element style="background-color: ValeurDeLaCouleur;">Dans l’exemple suivant, nous utilisons les noms de couleur pour définir la couleur de fond du titre <h2> sur « SteelBlue ». Le texte est surligné une fois avec la valeur de couleur « SpringGreen » et une fois avec « Yellow » :
<body>
<h2 style="background-color: SteelBlue;">
Couleurs HTML pour l’arrière-plan
</h2>
<p style="background-color: SpringGreen; padding: 5px;">
Ici, nous avons créé un paragraphe et sa couleur d’arrière-plan est <b>SpringGreen</b>.
</p>
<p style="background-color: Yellow;">
Ceci est un autre paragraphe et sa couleur d’arrière-plan est <b>Jaune</b>.
</p>
</body>
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 :
<element style="color: ValeurDeLaCouleur;">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 MidnightBlue (#191970) et le deuxième paragraphe de couleur Indigo (#4B0082) :
<body>
<h2 style="color: #FF4500;">
Ce titre est OrangeRed
</h2>
<p style="color: #191970;">
Ceci est un paragraphe et son texte est <b>MidnightBlue</b>.</p>
<p style="color: #4B0082;">
Ceci est un deuxième paragraphe avec la couleur de texte <b>Indigo</b>.
</p>
</body>
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 :
<element style="border: parametres ValeurDeLaCouleur;">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).
<body>
<h2 style="border: 2.5px solid rgb(178, 34, 34);">
Le cadre du titre est FireBrick</h2>
<p style="border: 2.5px dashed rgb(32, 178, 170); padding: 5px;">
Ce cadre est <b>LightSeaGreen</b>.
</p>
<p style="border: 2.5px dotted rgb(205, 133, 63); padding: 5px;">
Ce cadre a la couleur <b>Peru</b>.
</p>
- 1 certificat SSL Wildcard par contrat
- Fonction incluse Domain Connect pour une configuration DNS simplifiée