Couleurs HEX

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 26 sur 76.

Les couleurs hexadécimales sont un moyen de spécifier des 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 une large gamme 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; /* Rouge */
    background-color: #00FF00; /* Vert */
}

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

p {
    color: #F00; /* Rouge (équivalent à #FF0000) */
    background-color: #0F0; /* Vert (équivalent à #00FF00) */
}

Défi

Facile

On vous donne un document HTML avec 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 electric purple en utilisant le code hexadécimal #BF00FF.
Écrivez une règle CSS pour l'élément <h2>. Définissez la couleur d'arrière-plan sur neon green en utilisant #39FF14.
Écrivez une règle CSS pour tous les éléments <p>. Définissez la couleur d'arrière-plan sur light gray en utilisant #D3D3D3.

Aide-mémoire

Les couleurs hexadécimales utilisent un code hexadécimal à six chiffres précédé d'un symbole dièse (#) pour spécifier les couleurs. Chaque paire de chiffres représente l'intensité de la lumière rouge, verte et bleue, allant de 00 (aucune intensité) à FF (intensité maximale).

Syntaxe de base :

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

Exemple :

p {
    color: #FF0000; /* Rouge */
    background-color: #00FF00; /* Vert */
}

La notation abrégée peut être utilisée lorsque les deux chiffres de chaque paire sont identiques :

p {
    color: #F00; /* Rouge (équivalent à #FF0000) */
    background-color: #0F0; /* Vert (équivalent à #00FF00) */
}

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>