Tutoriel couleur CSS

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

Les couleurs en css peuvent être définie par un code héxadécimal, une combinaison des couleurs primaire (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éléctionner une couleur et d'obtenir le numéro exadécimal ou bien la valeur rgb. Autrement, il est possible d'obtenir ces valeur directement depuis des sites internet:

• (en) adobe CC
• (en) w3schools
• (en) quackit

Couleurs hexadécimale

Les couleurs hexadécimale 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.

Couleurs RGB

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

Parfois les couleurs peuvent être nomées. Pour plus d'information 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;
}

Sources

• (en) w3schools