Summary  
This chapter explains how to use the CSS color property to style text by specifying colors as named values, hexadecimal codes, RGB numbers, and RGBA values with transparency.  

General domain of usage  
Web page styling and design

Watch this video to see how to style text and apply colors using different CSS properties and formats. You'll learn how to use color names, hex codes, rgb, and rgba values to customize the appearance of your text, and understand the impact of transparency with the alpha channel. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

Précédemment, nous avons ajouté des couleurs au texte de manière très intuitive et directe. Cependant, examinons en détail l'application des couleurs.

## Couleur
La couleur du texte peut être appliquée à un élément de texte à l'aide de la propriété CSS `color`, qui peut recevoir une valeur dans différents formats.

Les valeurs de couleur les plus couramment utilisées sont RGB, hexadécimal et les noms de couleurs. Considérons l'exemple suivant, où la couleur bleue est appliquée au texte.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cCBjbGFzcz0iY29sb3ItbmFtZSI+SSBmb3Jnb3Qgd2hlcmUgSSBsZWZ0IG15IGtleXMgYWdhaW4uPC9wPgogICAgPHAgY2xhc3M9ImNvbG9yLWhleCI+VGhlIGNvZmZlZSB3YXMgdG9vIGhvdCB0byBkcmluayByaWdodCBhd2F5LjwvcD4KICAgIDxwIGNsYXNzPSJjb2xvci1yZ2IiPlNoZSB0b29rIGEgZGVlcCBicmVhdGggYW5kIGxvb2tlZCBvdXQgdGhlIHdpbmRvdy48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwovKiBVc2luZyBhIG5hbWVkIGNvbG9yICovCi5jb2xvci1uYW1lIHsKICBjb2xvcjogYmx1ZTsKfQoKLyogVXNpbmcgdGhlIHNhbWUgY29sb3IgaW4gaGV4IGZvcm1hdCAqLwouY29sb3ItaGV4IHsKICBjb2xvcjogIzAwMDBmZjsKfQoKLyogVXNpbmcgdGhlIHNhbWUgY29sb3IgaW4gUkdCIGZvcm1hdCAqLwouY29sb3ItcmdiIHsKICBjb2xvcjogcmdiKDAsIDAsIDI1NSk7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogbW9ub3NwYWNlOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGdyYXk7CiAgcGFkZGluZzogMTBweDsKfQoKcCB7CiAgZm9udC1zaXplOiAxNHB4Owp9

## Formats pour spécifier la couleur
Examinons chaque format plus en détail.



### Nom de couleur
Il est possible d'utiliser des mots réservés pour les couleurs. La liste des couleurs réservées est disponible sur <a href="https://htmlcolorcodes.com/color-names/" target="_blank"><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> https://htmlcolorcodes.com</a>.

CSS propose des noms de couleurs prédéfinis tels que `blue`, `red`, `green`, `purple` et d'autres. Ils sont faciles à lire mais limités en variété.

### Format Hexadécimal
**Hex** représente les couleurs sous forme d'un code à six chiffres composé de trois paires de deux chiffres après le symbole `#`. Chaque paire indique l'intensité du **rouge**, du **vert** et du **bleu** (dans cet ordre).


Les valeurs au format hexadécimal varient de `00` (aucune intensité) à `FF` (intensité maximale).

### Format RGB
**RGB** représente les couleurs sous forme d'une série de trois nombres correspondant à l’intensité du **rouge**, du **vert** et du **bleu** (dans cet ordre)

Les valeurs au format RGB varient de `0` (aucune intensité) à `255` (intensité maximale).

Les valeurs **hexadécimales** et **rgb** sont largement utilisées dans la conception web, et le choix entre elles dépendra des préférences personnelles et des exigences du projet.

Remarque

### Transparence avec RGBA
La **transparence** dans les couleurs rgb peut être obtenue en utilisant la notation `rgba` (rouge, vert, bleu, **alpha**), où **alpha** correspond au niveau d'opacité ou de transparence de la couleur.

La valeur **alpha** peut varier de `0` (complètement transparent) à `1` (complètement opaque). Par exemple, la valeur RGBA `rgba(0, 255, 0, 0.5)` représente une couleur verte avec 50 % d'opacité.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cCBjbGFzcz0icmdiYS1vcGFxdWUiPk9wYXF1ZSAoYSA9IDEpPC9wPgogICAgPHAgY2xhc3M9InJnYmEtc2VtaSI+U2VtaS1UcmFuc3BhcmVudCAoYSA9IDAuNSk8L3A+CiAgICA8cCBjbGFzcz0icmdiYS10cmFuc3BhcmVudCI+QWxtb3N0IEludmlzaWJsZSAoYSA9IDAuMSk8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwovKiBGdWxseSBvcGFxdWUgKi8KLnJnYmEtb3BhcXVlIHsKICBjb2xvcjogcmdiYSgyNTUsIDAsIDAsIDEpOyAvKiBSZWQsIGZ1bGx5IG9wYXF1ZSAqLwp9CgovKiBTZW1pLXRyYW5zcGFyZW50ICovCi5yZ2JhLXNlbWkgewogIGNvbG9yOiByZ2JhKDI1NSwgMCwgMCwgMC41KTsgLyogUmVkLCA1MCUgdHJhbnNwYXJlbnQgKi8KfQoKLyogQWxtb3N0IGludmlzaWJsZSAqLwoucmdiYS10cmFuc3BhcmVudCB7CiAgY29sb3I6IHJnYmEoMjU1LCAwLCAwLCAwLjEpOyAvKiBSZWQsIHZlcnkgZmFpbnQgKi8KfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiBmYW50YXN5OwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIG1hcmdpbjogMDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCnAgewogIGZvbnQtc2l6ZTogMThweDsKICBmb250LXdlaWdodDogNjAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBtYXJnaW4tdG9wOiAwOwogIG1hcmdpbi1ib3R0b206IDA7CiAgcGFkZGluZzogNXB4IDE1cHg7CiAgYm94LXNoYWRvdzogMnB4IDJweCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKICBib3JkZXItcmFkaXVzOiAxMHB4Owp9CgpwOm5vdCg6bGFzdC1jaGlsZCkgewogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0=

Quelle est la principale différence entre la notation de couleur hexadécimale et rgb ?

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Mise en Forme du Texte et des Couleurs

Couleur

Formats pour spécifier la couleur

Nom de couleur

Format Hexadécimal

Format RGB

Transparence avec RGBA