Couleurs RGB

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

En CSS, les couleurs RGB sont un moyen de spécifier des couleurs en utilisant la notation fonctionnelle rgb(). RGB signifie Rouge, Vert et Bleu (Red, Green, Blue), et chaque couleur est représentée par une valeur allant de 0 à 255. En combinant différentes intensités de ces trois couleurs primaires, vous pouvez créer un large spectre de couleurs.

Voici la syntaxe de base pour utiliser les couleurs RGB en CSS :

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

Par exemple :

p {
    color: rgb(255, 0, 0); /* Rouge */
    background-color: rgb(0, 255, 0); /* Vert */
}

h1 {
    color: rgb(0, 0, 255); /* Bleu */
}

.highlight {
    background-color: rgb(255, 255, 0); /* Jaune */
}

Défi

Facile

On vous donne un document HTML avec un titre (<h1>), un paragraphe (<p>) et une division (<div>). Donnez une couleur d'arrière-plan et une couleur de texte de votre choix à tous les éléments de la page, utilisez rgb() pour ce faire.

Les couleurs par défaut ne seront pas acceptées !

Aide-mémoire

Les couleurs RGB utilisent la notation fonctionnelle rgb() avec des valeurs de 0 à 255 pour le rouge, le vert et le bleu :

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

Exemples :

p {
    color: rgb(255, 0, 0); /* Rouge */
    background-color: rgb(0, 255, 0); /* Vert */
}

h1 {
    color: rgb(0, 0, 255); /* Bleu */
}

.highlight {
    background-color: rgb(255, 255, 0); /* Jaune */
}

Essayez vous-même

<html>
<head>
    <title>RGB Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>