Explore les différentes façons de définir des couleurs en CSS et apprends à appliquer des couleurs d'arrière-plan, des images et des dégradés aux éléments.
CSS supporte plusieurs façons de définir des couleurs :
Couleurs nommées — CSS inclut 147 couleurs nommées comme red, tomato, steelblue et rebeccapurple. Elles sont faciles à lire mais limitées en précision.
Hexadécimal — Un code de six caractères précédé de #. Chaque paire représente le rouge, le vert et le bleu : #FF5733. Tu peux aussi utiliser une forme abrégée de trois caractères quand les deux chiffres de chaque paire sont identiques : #F00 est identique à #FF0000.
RGB — Définit la couleur en utilisant les valeurs rouge, vert et bleu de 0 à 255 : rgb(255, 87, 51). Tu peux ajouter un canal alpha pour la transparence : rgb(255, 87, 51, 0.5).
HSL — Définit la couleur en utilisant la teinte (0-360), la saturation (0%-100%) et la luminosité (0%-100%) : hsl(14, 100%, 60%). HSL est souvent plus intuitif pour créer des variations de couleur car tu peux ajuster la luminosité ou la saturation indépendamment.
Toutes ces méthodes produisent le même résultat — ce sont juste différentes façons de décrire la même couleur.
<style>
.card {
background-color: #1a1a2e;
color: #e0e0e0;
padding: 24px;
margin: 12px 0;
border-radius: 8px;
}
.card-accent {
background-color: hsl(220, 80%, 55%);
color: white;
padding: 24px;
margin: 12px 0;
border-radius: 8px;
}
.faded {
background-color: rgb(255, 99, 71, 0.3);
padding: 16px;
border-radius: 8px;
}
</style>
<div class="card">Carte sombre avec couleurs hexadécimales</div>
<div class="card-accent">Carte accentuée avec couleur HSL</div>
<div class="faded">Carte atténuée avec RGB transparent</div>Au-delà de background-color, CSS fournit plusieurs propriétés pour contrôler les arrière-plans des éléments :
background-color — Définit une couleur d'arrière-plan unie. Accepte n'importe quelle valeur de couleur.
background-image — Définit une image ou un dégradé comme arrière-plan. Utilise url() pour les images ou les fonctions de dégradé :
background-image: url('photo.jpg');
background-image: linear-gradient(to right, #667eea, #764ba2);background-size — Contrôle comment l'image d'arrière-plan est dimensionnée : cover (remplit toute la zone), contain (s'ajuste entièrement dans la zone), ou des dimensions spécifiques.
background-position — Définit la position de départ d'une image d'arrière-plan : center, top right, ou des valeurs exactes comme 50% 50%.
opacity — Contrôle la transparence d'un élément entier (y compris son contenu) de 0 (complètement transparent) à 1 (complètement opaque). Contrairement à rgba() ou hsla() qui n'affectent qu'une couleur, opacity affecte tout ce qui se trouve à l'intérieur de l'élément.
Quel format de couleur représente hsl(0, 100%, 50%) ?