Couleurs HEX

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 26 sur 76.

Les couleurs hexadécimales sont une façon de spécifier les couleurs à l’aide de valeurs hexadécimales. Un code couleur hexadécimal est un code à six chiffres précédé d’un symbole dièse (#) qui représente la quantité de lumière rouge, verte et bleue qui compose une couleur.

Chaque paire de chiffres dans le code représente l’intensité de l’une de ces couleurs primaires, allant de 00 (aucune intensité) à FF (intensité maximale). Les couleurs hexadécimales offrent un large éventail d’options de couleurs et sont largement utilisées dans la conception web.

Voici la syntaxe de base pour utiliser les couleurs hexadécimales en CSS :

selector {
    color: #RRGGBB;
    background-color: #RRGGBB;
}

Par exemple :

p {
    color: #FF0000; /* Red */
    background-color: #00FF00; /* Green */
}

Vous pouvez également utiliser une notation abrégée pour les couleurs hexadécimales lorsque les deux chiffres de chaque paire sont identiques. Par exemple :

p {
    color: #F00; /* Red (equivalent to #FF0000) */
    background-color: #0F0; /* Green (equivalent to #00FF00) */
}

Défi

Facile

Vous disposez d’un document HTML contenant deux titres (<h1> et <h2>) et un paragraphe (<p>). Votre tâche consiste à utiliser des codes de couleur hexadécimaux pour les couleurs d’arrière-plan. Suivez les étapes ci-dessous :

Écrivez une règle CSS pour l’élément <h1>. Définissez la couleur d’arrière-plan sur violet électrique en utilisant la couleur hexadécimale #BF00FF.
Écrivez une règle CSS pour l’élément <h2>. Définissez la couleur d’arrière-plan sur vert néon en utilisant #39FF14.
Écrivez une règle CSS pour tous les éléments <p>. Définissez la couleur d’arrière-plan sur gris clair en utilisant #D3D3D3.

Essayez vous-même

<html>
<head>
    <title>HEX Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This heading has an electric purple background!</h1>
    <h2>This heading has a neon green background.</h2>
    <p>This paragraph has a light gray background.</p>
</body>
</html>