Médiaforma

Définir une couleur en CSS avec la fonction rgb

Print Friendly

Dans les rubriques précédentes, vous avez appris à définir des couleurs en HTML, en utilisant un nom de couleur ou un code hexadécimal. Dans cette rubrique, je vais vous montrer comment définir des couleurs en CSS. Pour cela, vous pouvez utiliser un code hexadécimal #rrvvbb rr représente la composant rouge de la couleur, vv la composante verte de la couleur et bb la composante bleue de la couleur. Ces trois composantes sont des nombres décimaux compris entre #00 et #ff.

Par exemple, pour définir la couleur d’arrière-plan rouge, vous pouvez affecter la valeur #ff0000 à la propriété CSS background-color :

background-color : #ff0000 ;

Une deuxième alternative s’offre à vous : l’utilisation de la fonction rgb(r, v, b)r, v et b sont les composantes rouge, verte et bleue de la couleur, codées en décimal (entre 0 et 255) ou en pourcentages (entre 0% et 100%).

Par exemple, pour définir la couleur d’arrière-plan vert, vous pouvez affecter la valeur rvb(0,255, 0) à la propriété CSS background-color :

background-color: rgb(0,255,0);

Ou encore, pour définir la couleur d’arrière-plan bleu, vous pouvez affecter la valeur rvb(0%, 0%, 100%) à la propriété CSS background-color :

background-color: rgb(0%,0%,100%);

Voyons comment mettre ces trois techniques en pratique :

Cet exemple utilise trois balises <div>. Le style div indique que ces balises seront positionnées de façon absolue et auront une dimension de 300×300 pixels.

Les trois balises <div> sont de classe (respectivement) rouge, vert et bleu.

Ces trois classes utilisent les trois types de déclaration de couleurs possibles en CSS. La classe rouge définit un arrière-plan de couleur rouge à l’aide d’un code rrvvbb hexadécimal. La classe vert définit un arrière-plan de couleur verte à l’aide de la fonction rvb() à laquelle sont passés trois valeurs décimales. Enfin, la classe bleu définit un arrière-plan de couleur bleu à l’aide de la fonction rvb() à laquelle sont passés trois valeurs spécifiées en pourcentages.

La commande Exécution / Launch in IE affiche le résultat dans Internet Explorer :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply