Couleurs HEX en HTML - Tutoriel

Introduction

Les couleurs HEX (hexadécimales) sont une méthode courante pour définir les couleurs en HTML et CSS. Dans ce tutoriel, nous explorerons comment utiliser la notation HEX pour spécifier les niveaux de rouge, de vert et de bleu d'une couleur.

Couleurs HEX

La notation HEX permet de définir une couleur en utilisant une combinaison de six caractères alphanumériques (0-9 et A-F), représentant respectivement les niveaux de rouge, de vert et de bleu. Par exemple, #RRGGBB.

<style>
            h2 {
                color: #ff0000; /* Rouge */
            }
        </style>
        <h2>Ceci est un titre en rouge.</h2>

Notation HEX avec Transparence

Il est également possible d'utiliser la notation HEX avec la notation RGBA pour ajouter de la transparence à une couleur. Par exemple, #RRGGBBAA.

<style>
            p {
                color: #00800080; /* Vert avec une opacité de 50% */
            }
        </style>
        <p>Ceci est un paragraphe en vert avec une opacité de 50%.</p>

Exercices avec Corrections

Exercice 1 : Texte Bleu Semi-transparent

Définissez la couleur du texte d'une phrase en bleu avec une opacité de 0.5 à l'aide de la notation HEX avec transparence :

<p style="color: #0000ff80;">Ceci est une phrase en bleu semi-transparent.</p>

Questions à Choix Multiple (QCM)

1. Comment est représentée une couleur en utilisant la notation HEX?
   • A. #RRRGGGBBB
   • B. #RGB
   • C. #RRGGBB

   Réponse correcte : C

Questions & Réponses

Question : Peut-on utiliser la notation HEX pour définir la couleur de fond d'un élément?

Réponse : Oui, la notation HEX peut être utilisée pour définir la couleur de fond d'un élément en utilisant la propriété CSS background-color.

Études de Cas

Cas d'utilisation : Personnalisation d'un Bouton

Personnalisez l'apparence d'un bouton en utilisant la notation HEX :

<style>
            button {
                background-color: #4caf50; /* Vert */
                color: #ffffff; /* Blanc */
                border: 1px solid #4caf50; /* Bordure verte */
            }
        </style>
        <button>Cliquez ici</button>

Éléments à Retenir

• La notation HEX utilise six caractères alphanumériques pour représenter les niveaux de rouge, de vert et de bleu d'une couleur.
• La notation HEX peut être utilisée pour définir la couleur de texte, la couleur de fond, la bordure, etc.
• La transparence peut être ajoutée à une couleur en utilisant la notation HEX avec la notation RGBA.

Proposition d'un Examen avec Correction

1. Comment est représentée une couleur en utilisant la notation HEX?
   • A. #RRRGGGBBB
   • B. #RGB
   • C. #RRGGBB

   Correction : C

#FF0000