Travailler avec les couleurs HTML – Couleurs d'arrière-plan, de bordure et de texte

Comment utiliser HTML Color

Le design n’est pas une caractéristique centrale du HTML, il n’y a donc pas de balise de couleur HTML spéciale. Cependant, vous pouvez changer la couleur de n’importe quel texte en utilisant les méthodes suivantes :

**L’ajout de couleur à une page web fait partie du style CSS en ligne. Pour définir la couleur du texte ou de l’arrière-plan en HTML, vous devez utiliser l’attribut style. Vous pouvez appliquer l’attribut style avec les balises HTML <body>, <p>, <table>, <div>, <h1>, ou <h2>, etc. N’oubliez pas que l’utilisation d’un attribut de style remplace tout style défini dans la balise HTML <style> ou dans une feuille de style externe.
**L’option de style CSS interne est populaire pour appliquer des propriétés à des pages individuelles en encapsulant tous les styles dans l’élément <style> placé dans le <head> des documents HTML.

Couleur du texte

Vous pouvez utiliser l’attribut inline style ou l’élément <style> pour changer la couleur du texte et ensuite définir la valeur à l’aide de la propriété color. La propriété color définit la valeur de la couleur d’avant-plan pour le texte et la décoration d’un élément. La propriété color accepte les noms de couleur HTML, les valeurs RGB, RGBA, HEX, HSL ou HSLA.

HTML et CSS ne prennent pas en charge les modèles de couleurs CMYK, HSV, HWB, LAB, XYZ, etc. pour un certain nombre de raisons (voir l’article Codes de couleurs HTML). HTML et CSS se concentrent sur des modèles de couleurs faciles à utiliser et optimisés pour les écrans numériques, et la prise en charge d’un plus grand nombre de modèles de couleurs peut rendre la gestion des couleurs plus complexe pour les navigateurs, en exigeant plus de puissance de traitement pour la conversion entre les différents modèles.

Couleur du texte à l’aide des noms de couleur HTML

Le nom de la couleur décrit le nom spécifique de la couleur HTML. Les navigateurs modernes supportent 140+ noms de couleurs HTML, et vous pouvez utiliser n’importe lequel d’entre eux pour vos éléments. Par exemple, vous pouvez colorer du texte en utilisant l’attribut inline style comme le montre l’exemple suivant :

1<html>
2	<body>
3		<h2 style="color:DarkCyan;">How to set text color using HTML color names?</h2>
4		<h3 style="color:DarkRed;">Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
5        <h4 style="color:DarkBlue;">There are over 140 named colors to choose from that you can use.</h4>
6	</body>
7</html>

Le même résultat de colorisation du texte peut être obtenu en utilisant le CSS interne, comme le montre l’exemple suivant :

 1<html>
 2	<head>
 3		<style>
 4			h2 {
 5				color:DarkCyan;
 6			}
 7			h3 {
 8				color:DarkRed;
 9			}
10			h4 {
11				color:DarkBlue;
12			}
13		</style>
14	</head>
15	<body>
16		<h2>How to set text color using HTML color names?</h2>
17		<h3>Add a style attribute to the text element you want to colorize and use the color name to specify the color.</h3>
18		<h4>There are over 140 named colors to choose from that you can use.</h4>
19	</body>
20</html>

Le code HTML rendu se présente comme suit :

Texte “L’image rend le code html ci-dessus”

Si vous souhaitez modifier par programmation la couleur du texte, de l’arrière-plan ou de la bordure d’un fichier HTML, veuillez consulter le chapitre Articles pratiques. Les articles de ce chapitre répondent à des questions courantes et contiennent des exemples en C# qui fournissent les informations nécessaires à l’utilisation de la bibliothèque Aspose.HTML for .NET pour résoudre des tâches spécifiques.

Pour en savoir plus sur l’application de feuilles de style CSS inline, internes et externes et leur modification à l’aide de l’API Aspose.HTML, consultez la section Éditer CSS. Vous trouverez des exemples C# de modification de la couleur du texte à l’aide de l’API Aspose.HTML dans l’article Comment modifier la couleur du texte en HTML.

Couleur du texte à l’aide des codes de couleur RVB, RGBA ou HEX

Pour colorer le texte HTML, vous pouvez utiliser RGB ou HEX, qui sont les codes de couleur les plus utilisés. La valeur RVB détermine la couleur HTML en mélangeant les valeurs de rouge, de vert et de bleu. La valeur HEX fonctionne presque de la même manière que la valeur RVB, mais son aspect est différent. Pour en savoir plus sur les codes RVB, RGBA et HEX, consultez l’article Codes de couleur HTML.

L’utilisation des codes de couleur RVB ou HEX est la manière la plus courante d’ajouter de la couleur aux pages web. Il est nécessaire d’ajouter un attribut style à l’élément de texte que vous souhaitez colorer. Dans l’exemple ci-dessous, nous utilisons les éléments <h2>, <h3> et <h4> pour appliquer l’attribut style en ligne et la propriété color avec les codes RGB, RGBA et HEX :

1<html>
2	<body>
3		<h2 style="color:rgb(50,150,200);">How to use Text Color?</h2>
4		<h3 style="color:rgba(220,30,100,1);"> 1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
5		<h4 style="color:#1A8D7E"> 2. Specify the color using RGB, RGBA or HEX code.</h4>
6	</body>
7</html>

Le même résultat sera obtenu en utilisant le CSS interne, comme le montre l’exemple suivant :

 1<html>
 2	<head>
 3		<style>
 4			h2 {
 5				color:rgb(50,150,200);
 6			}
 7			h3 {
 8				color:rgba(220,30,100,1);
 9			}
10			h4 {
11				color:#1A8D7E;
12			}
13		</style>
14	</head>
15	<body>
16		<h2>How to use Text Color?</h2>
17		<h3>1. Add a style attribute to the text element you want to colorize or use internal CSS.</h3>
18		<h4>2. Specify the color using RGB, RGBA or HEX code.</h4>
19	</body>
20</html>

Le code HTML rendu est le suivant :

Texte “L’image affiche le code html permettant de définir la couleur du texte à l’aide des codes de couleur HEX ou RVB”

Couleur du texte à l’aide des codes de couleur HSL ou HSLA

HSL (hue, saturation, lightness) est une représentation du modèle de couleurs RVB en coordonnées cylindriques. La teinte définit la couleur de base et la mesure en degrés de 0 à 360 sur la roue chromatique RVB. La saturation est l’intensité ou la pureté d’une couleur, et elle est définie en pourcentages de 0 (noir et blanc) à 100 (couleurs vives). La clarté est le degré de luminosité ou de lumière d’une couleur. Elle est définie en pourcentage de 0 (noir) à 100 (blanc).

Les valeurs de couleur HSLA sont une extension des valeurs de couleur HSL avec un canal alpha qui détermine l’opacité de la couleur. La valeur de couleur HSLA est spécifiée avec la teinte, la saturation, la luminosité et le canal alpha, où le paramètre alpha spécifie l’opacité. Le paramètre alpha est un nombre compris entre 0,0, ce qui signifie “totalement transparent”, et 1,0, ce qui signifie “totalement opaque”.

En utilisant le même attribut style que précédemment, remplacez le code RGB/RGBA/HEX ou le nom de la couleur par une valeur HSL ou HSLA dans la propriété color :

1<html>
2	<body>
3		<h2 style="color:hsl(200,100%,40%);">HSL and HSLA color codes</h2>
4		<p style="color:hsla(200,100%,40%,0.9); font-size:18px;">HSL(hue, saturation, lightness) is a representation of the RGB color model in cylindrical coordinates.</p>
5		<p style="color:hsla(200,100%,40%,0.6); font-size:18px;">HSLA color values are an extension of HSL color values with an alpha channel that determines the opacity of the color.</p>
6	</body>
7</html>

Comme pour l’exemple précédent, vous pouvez utiliser le CSS interne (élément <style>) et remplacer le code RGB/RGBA/HEX ou le nom de la couleur par une valeur HSL ou HSLA dans les sélecteurs CSS.

Le code HTML rendu se présente comme suit :

Texte “L’image affiche le code html permettant de définir la couleur du texte à l’aide des codes de couleur HSL et HSLA”

Summarize

Pour modifier la couleur du texte, vous pouvez utiliser l’attribut style en ligne ou le CSS interne.
Pour spécifier la couleur souhaitée, vous pouvez utiliser les noms de couleur HTML ou les codes de couleur RGB, RGBA, HEX, HSL ou HSLA.

Historiquement, le modèle RVB a été choisi comme modèle principal pour le développement web car il est directement lié au fonctionnement des écrans, qui utilisent des pixels rouges, verts et bleus pour afficher les couleurs. HTML et CSS s’efforcent de définir un modèle de couleurs simple et cohérent que tous les navigateurs et appareils prendront en charge. RGB et ses dérivés (HEX, RGBA, HSL, HSLA) sont intuitifs et hautement compatibles avec les écrans numériques.

Couleur de fond

Couleur d’arrière-plan pour un élément HTML spécifique

Vous pouvez utiliser l’attribut style pour spécifier la couleur d’arrière-plan de l’élément HTML, puis définir la valeur à l’aide de la propriété background-color. La propriété background-color accepte les noms de couleurs, les valeurs RGB, RGBA, HEX, HSL ou HSLA. Ici, nous voulons montrer comment la même couleur, “YellowGreen”, est définie en utilisant différents formats de couleur et différents degrés de transparence. Dans le cas contraire, il serait préférable d’utiliser le CSS interne pour spécifier une couleur unique pour tous les éléments d’un certain type.

Déterminez l’élément dont vous souhaitez modifier la couleur d’arrière-plan. S’il s’agit d’un paragraphe, recherchez la balise d’ouverture <p>. Il peut également s’agir d’une balise <h1>…<h6>, <div> ou <table>. Dans cet exemple, nous ajoutons une couleur de fond aux éléments <h2> :

 1<html>
 2	<body>
 3		<p>The color name is "YellowGreen":</p>
 4		<h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
 5		<h2 style="background-color:#9ACD32;">#9ACD32</h1>
 6		<h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
 7
 8		<p>RGBA values of name "YellowGreen" color, with different transparent:</p>
 9		<h2 style="background-color:rgba(154, 205, 50, 0.2);">rgba(154, 205, 50, 0.2)</h2>
10		<h2 style="background-color:rgba(154, 205, 50, 0.5);">rgba(154, 205, 50, 0.5)</h2>
11		<h2 style="background-color:rgba(154, 205, 50, 0.8);">rgba(154, 205, 50, 0.8)</h2>
12
13		<p>HSLA values of name "YellowGreen" color, with different transparent:</p>
14		<h2 style="background-color:hsla(80, 61%, 50%, 0.2);">hsla(80, 61%, 50%, 0.2)</h2>
15		<h2 style="background-color:hsla(80, 61%, 50%, 0.5);">hsla(80, 61%, 50%, 0.5)</h2>
16		<h2 style="background-color:hsla(80, 61%, 50%, 0.8);">hsla(80, 61%, 50%, 0.8)</h2>
17	</body>
18</html>

Le code HTML rendu se présente comme suit :

Texte “L’image affiche le code html permettant de définir la couleur d’arrière-plan à l’aide des codes de couleur HEX, RGB, RGBA, HSL et HSLA”

Couleur d’arrière-plan pour l’ensemble de la page Web

Il est important de noter que dans l’exemple ci-dessus, la propriété background-color fournit une couleur pour l’arrière-plan du texte mais pas pour l’ensemble du document. Si vous souhaitez modifier la couleur HTML pour l’ensemble de la page, vous devez utiliser la propriété background-color de l’attribut style dans la balise d’ouverture de la section <body> :

 1<html>
 2	<body style="background-color:#e0e0e0">
 3		<h2 style="background-color:YellowGreen;">YellowGreen</h2>
 4		<h2 style="background-color:rgb(154, 205, 50);">rgb(154, 205, 50)</h2>
 5		<h2 style="background-color:rgba(154, 205, 50, 1.0);">rgba(154, 205, 50, 1.0)</h2>
 6		<h2 style="background-color:#9ACD32;">#9ACD32</h2>
 7		<h2 style="background-color:hsl(80, 61%, 50%);">hsl(80, 61%, 50%)</h2>
 8		<h2 style="background-color:hsla(80, 61%, 50%, 1.0);">hsla(80, 61%, 50%, 1.0)</h2>
 9	</body>
10</html>

L’image restitue le code HTML permettant de définir la couleur d’arrière-plan du texte (le nom de la couleur jaune-vert est spécifié dans différents codes de couleur) et de l’ensemble de la page web.

Texte “L’image rend le code html permettant de définir la couleur d’arrière-plan du texte et de l’ensemble de la page web”

Un autre exemple pour obtenir l’effet de colorisation de l’arrière-plan de toute la page web en utilisant l’attribut style avec la propriété background-color dans la balise d’ouverture de la section <body> :

1<html>
2	<body style="background-color:#ffe0e0;">
3		<h2>How to set Background Color for the whole web page?</h2>
4		<p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
5	</body>
6</html>

Vous pouvez également utiliser le CSS interne pour définir la couleur d’arrière-plan de l’ensemble de la page :

 1<html>
 2	<head>
 3		<style>
 4			body {
 5				background-color:#ffe0e0
 6			}
 7		</style>
 8	</head>
 9	<body>
10		<h2>How to set Background Color for the whole web page?</h2>
11		<p>Add the style attribute to the body section and apply the background-color property to specify a color using color name, RGB, HEX or HSL code.</p>
12	</body>
13</html>

Texte “L’image restitue le code html permettant de définir la couleur d’arrière-plan de l’ensemble de la page web”

Couleur de la bordure

Vous pouvez utiliser l’attribut style avec les propriétés border-style et border-color pour spécifier la couleur de la bordure des éléments de texte. La propriété CSS border-color définit la couleur des quatre bordures d’un élément. La propriété border-color ne fonctionnera que si la propriété border-style est définie en premier, laquelle est utilisée pour définir les bordures. Cette propriété ne fonctionne pas seule. Si cette propriété n’est pas définie, elle hérite de la couleur de l’élément. La propriété border-color accepte les noms de couleurs, les valeurs RGB, RGBA, HEX, HSL ou HSLA.

1<html>
2	<body>
3		<p> The border-color property only works when the border-style property is defined first, which is used to set the borders.</p>
4		<h2 style="color:rgb(50,150,200); border-style:solid; border-color:rgb(220,30,100);">How to define border color?</h2>
5		<p> If the border-style property is defined and the border-color property is not set, the border inherits the element's color.</p>
6		<h2 style="color:rgb(50,150,200); border-style:solid;">How to define border color?</h2>
7	</body>
8</html>

Texte “L’image affiche le code html permettant de définir la couleur de la bordure du texte. “

Voir aussi

Découvrez le monde des noms de couleurs HTML ! Apprenez à utiliser les noms de couleur HTML dans la conception de sites web et quand choisir une alternative.
L’article Comment changer la couleur du texte en HTML? montre comment utiliser la bibliothèque Aspose.HTML for .NET pour contrôler la couleur du texte dans un document HTML.
Dans l’article Comment changer la couleur d’arrière-plan en HTML?, vous trouverez des exemples en C# démontrant différentes façons de définir ou de changer la couleur d’arrière-plan pour l’ensemble du document HTML et pour ses éléments individuels.
L’article Comment changer la couleur des bordures en HTML? traite des différentes façons de définir ou de changer la couleur des bordures dans les fichiers HTML à l’aide de la bibliothèque Aspose.HTML for .NET.

Aspose.HTML propose un Sélecteur de roue de couleur gratuit en ligne qui vous permet de créer un ensemble de couleurs dans le code couleur HEX. Vous pouvez utiliser cette application gratuite en ligne pour trouver des harmonies de couleurs en utilisant les règles de combinaisons de couleurs, mais il est également essentiel d’expérimenter avec les couleurs. Color Wheel Picker propose un excellent moyen d’expérimenter avec les couleurs et de créer des combinaisons de couleurs passionnantes de manière indépendante. L’application fonctionne sur les ordinateurs, les tablettes et les appareils mobiles. Créez votre propre palette pour n’importe quel projet !

Qu'est-ce que HTML DOM ? Sélecteurs CSS