Tutoriel couleur CSS

De EduTech Wiki
Aller à la navigation Aller à la recherche
La version imprimable n’est plus prise en charge et peut comporter des erreurs de génération. Veuillez mettre à jour les signets de votre navigateur et utiliser à la place la fonction d’impression par défaut de celui-ci.

CSS est utilisé pour donner du style à une page web, comment donner du style sans mettre de couleur? Cet article portera sur les différentes manières de colorer un élément à l'aide de CSS.

Les méthodes de spécification

Il existe plusieurs façons de décrire des couleurs. Dans le monde CSS, la méthode la plus populaire consiste à utiliser soit des valeurs "RGB" soit des noms de couleurs.

Couleurs RGB

Les couleurs en css peuvent être définies par un code héxadécimal ou encore des pourcentages (entre 0 et 100%), une combinaison des couleurs primaires (rgb)

Il existe plusieurs millions de couleurs différentes, c'est pourquoi il est impossible de retenir la valeur css pour chaque couleur. Sur certains programmes de retouche photo ou de dessin (comme Photoshop et Illustrator), il est possible de sélectionner une couleur et d'obtenir le numéro hexadécimal ou bien la valeur rgb. Autrement, il est possible d'obtenir ces valeur directement depuis des sites internet:

Couleurs hexadécimales

Les couleurs hexadécimales sont supportées par tous les navigateurs. Une couleur hexadécimale est spécifiée par #RRGGBB, où les R G et B correspondent à la quantité de rouge, vert et bleu dans la couleur.

CouleurCSS2.png

Les couleurs rgb sont supportées dans la plupart des navigateurs. Une valeur rgb est spécifiée ainsi: rgb(255,255,255), où les valeurs doivent être comprises entre 0 et 255 (ou bien une valeur entre 0% et 100%) et où les valeurs correspondent respectivement à la dose de rouge, vert et bleu.

Couleurs RGBA

Les couleurs rgba sont un sous ensemble des couleurs rgb. La valeur alpha correspond au taux d'opacité de la couleur.

Les noms

Certaines couleurs peuvent être nommées. Pour plus d'informations sur les noms des couleurs voir ici: (en) w3schools color name

section{
	background-color: #0000ff;
}

div{
	background-color: rgb(255,15,30);
}

p{
        background-color: rgba(230,76,85, 0.3);
}

.class{
       background-color: lightgrey;
}
Deux possibilités pour une couleur

Sources