Les couleurs en veux tu, en voilà !

Nous y voilà, les couleurs, une multitudes de couleurs ! Nous quittons l’univers du noir et blanc pour parsemer le monde de nos goûts et couleurs ! Il est malheureux de voir qu’avec de si nombreuses palettes, et de si nombreux logiciels mis à notre disposition, nous ne faisons pas mieux que des enfants de maternelle.

Mais tout vient à point à qui sait apprendre. Et nous sommes là pour apprendre à apprendre, toute la subtilité de l’ACS.

Alors oui, il est vrai, si vous avez déjà lu les articles des autres membres de ma promotion, nous avons déjà travaillé avec des couleurs pour la réalisation d’une copie du logo de notre école. Mais là, nous parlons de couleurs en rapport avec l’html et le CSS !

Il existe une multitude de façons (bon, pas autant que semble le faire croire cette phrase) de faire afficher des couleurs.

Nous avons les attributs que plus personne n’utilise depuis les dernières années universitaires de Mr Boutet (c’est dire si ça remonte à loin).

Cet attribut est : « bgcolor », il permet de coloré le « background » ou le fond du block ciblé.
Suivi de « color » qui est lui encore utilisé et permet de colorer le texte.

Concernant le CSS, nous avons :
background-color:
color:

 

Pour pouvoir utiliser ces propriétés CSS nous devons leur indiquer des valeurs, et de nouveaux choix se présentent :

L’hexadécimal est le plus classique, par exemple #33CC66 ou encore #0066FF.
Le RGB (Red Green Blue) et RGBA (Red Green Blue Alpha) est intégré depuis un certain temps aux CSS, il permet la gestion de la transparence.

Exemple :

background-color: rgba(150, 150, 150, 0.5);
color: #0066FF;

Des petits nouveaux se sont ajoutés avec CSS3 :

Hue : Hue, Saturation, Luminosity ou si vous préférez : teinte, saturation, luminosité.
Pour la teinte :

  • entre 0 et 119 (nuance de rouge) ;
  • entre 120 et 239 (nuance de vert) ;
  • entre 240 et 359 (nuance de bleu);

Pour la saturation la valeur est un pourcentage, 100% équivalent à la couleur.
La luminosité est une valeur en pourcentage elle est aussi :

  • 0% est le sombre (noir) ;
  • 50% est la moyenne ;
  • 100% est la lumière (blanc).

Exemple :

background-color: hsl(100, 100%, 50%);
color: hsl(250, 100%, 50%);

Même chose pour SHLA, avec comme seule différence la gestion de la transparence :

Exemple :

background-color: hsl(100, 100%, 50%, 0.8);

 

 

Voilà, voilà.
J’espère que vous aurez appris quelques choses :)

Allez, je dois dormir, @bientôt.

giphy

Laisser un commentaire :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *