Déclarer une couleur (Hex, RGB ou RGBA)

Par Clouder le 04 Sep 2019 (Édité) 0 29

En CSS il est possible de modifier la couleur d'un texte, d'un bouton, d'un fond, d'un lien etc. Mais il existe plusieurs façons d'attribuer une couleur.


Les différentes façons sont :

  • Le nom des couleurs primaires,
  • Le système RGB ou RGBA,
  • Le système HEX.



Couleurs primaires


Il est possible de déclarer directement le nom de la couleur primaire que l'on souhaite :

.my-first-class{
  color: red;
  background-color: black;
  border-color: purple;
}


C'est la méthode la plus facile à utiliser lorsque vous débutez.



RGB ou RGBA


On peut également utiliser le système de couleurs « Red, Green, Blue » que l'on appelle le plus souvent RGB. C'est un système de codage des couleurs en informatique.

.my-first-class{
  color: rgb(0, 0, 0); /* = noir */
  background-color: rgb(255, 255, 255); /* = blanc */
  border-color: rgb(50, 147, 56); /* Couleur personnalisée */
}  


Chacune des couleurs primaires s'exprime dans un intervalle de 0 à 255.


Dans le système RGB on peut également jouer sur l'opacité de la couleur entre 0 et 1. (1 : non transparente, 0 : transparente)

.my-first-class{
  color: rgba(0, 0, 0, 1); /* = noir */
  background-color: rgba(255, 255, 255, 0.8); /* = blanc */
  border-color: rgba(50, 147, 56, 0); /* Couleur personnalisée */
  }      



Hex


Pour finir il existe aussi le système Hexadécimal ou plus connu sous le nom de HEX. Ce système utilise la base 16 soit les dix premiers chiffres et les lettres A à F pour les six suivants.


Soit :

  • 1 = 1
  • 2 = 2
  • 3 = 3
  • 4 = 4
  • 5 = 5
  • 6 = 6
  • 7 = 7
  • 8 = 8
  • 9 = 9
  • A = 10
  • B = 11
  • C = 12
  • D = 13
  • E = 14
  • F = 15


Pour donner un exemple plus concret FF vaut 255 et 00 vaut 0 en RGB


.my-first-class{
  color: #FFFFFF; /* = noir */
  background-color: #000000; /* = blanc */
  border-color: #EF45A3; /* Couleur personnalisée */
}   
Cette pub permet au site de vivre ...

Commentaire

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !
Cette pub permet au site de vivre ...