Couleurs HEX

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

Les couleurs hexadécimales permettent 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 un large éventail de possibilités et sont largement utilisées en 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 te donne un document HTML avec deux titres (<h1> et <h2>) et un paragraphe (<p>). Ta tâche consiste à utiliser des codes de couleur hexadécimaux pour les couleurs d’arrière-plan. Suis les étapes ci-dessous :

Écris une règle CSS pour l’élément <h1>. Définis la couleur d’arrière-plan sur violet électrique à l’aide du code couleur hexadécimal #BF00FF.
Écris une règle CSS pour l’élément <h2>. Définis la couleur d’arrière-plan sur vert néon à l’aide de #39FF14.
Écris une règle CSS pour tous les éléments <p>. Définis la couleur d’arrière-plan sur gris clair à l’aide de #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>