La propriété color permet de modifier la couleur des textes que l’on aura à ajouter dans les futurs pages web que l’on fera.

Nous avons  3 moyens de désigner des couleurs:

  • les noms de couleur,
  • la notation hexadécimale,
  • la notation rgb.

Les noms de couleurs

Il existe sur le web des listes où tu peux trouver le nom des couleurs, il y en a 16 qui sont standards, qui sont reconnues par les navigateurs et qui fonctionnent normalement. Pour information, je crois que le taupe (j’ai jamais compris ce que c’était que ce truc en terme de couleur…), le vert caca d’oie et le jaune moutarde, ne sont pas reconnus par Google par exemple. En revanche, toutes les couleurs notées dans le premier tableau (voir lien au dessus) fonctionnent.

Attention:  le lien présente 2 tableaux. Les couleurs standards sont celles du premier tableau. Je n’utilise personnellement pas le deuxième car je ne suis pas sûr que tous les navigateurs reconnaissent tous de la même façon les nombreux noms de couleurs du second tableau.

 

Voici une liste des couleurs possibles, mais il y en a d’autre:

  • red,
  • blue,
  • green,
  • yellow,
  • silver,
  • black,
  • white,
  • maroon,
  • teal, etc.

Pour utiliser ces couleurs, tu peux directement saisir le nom de la couleur comme valeur de la propriété color:

h1{

color : red;

}

 

La notation hexadécimale

La deuxième solution pour désigner des couleurs, consiste à entrer un code hexadécimal qui prend la forme suivante: #EF476F.

C’est une suite de lettre et de chiffre, mais ça peut être que des lettres ou que des chiffres. Sont utilisés:

  • les chiffres de 1 à 9,
  • les lettres de A à F.

Cette combinaison est et doit être systématiquement précédée d’un # (dièse, pour les moins musiciens d’entre vous).

Pour comprendre comment ça marche, tu peux partager cette suite de lettre et de chiffre en 3 parties,

# FF 00 EE ( FF: Rouge; 00: Vert; EE: Bleu).

Question: à ton avis que donne ce code?

On a le rouge à fond (FF, on ne peut pas avoir plus, pas de vert, et le bleu presque à fond…).

Aucune idée, et bien réécrit ce code couleur dans Codepen ou ton éditeur de texte et regarde ce que ça donne…

Lorsque l’on a des chiffres ou des lettres en doublons comme c’est le cas au dessus, on peut simplifier l’écriture en écrivant la chose suivante:  # F 0 E. Tu peux aussi écrire #f0e. Il n’y a pas d’importance que tu écrives en majuscule ou en minuscule. En revanche, il ne faut pas qu’il y ai d’espace! J’ai mis des espaces dans les exemples pour que la lecture soit plus claire, mais il ne faut pas faire ça dans ton code!

Dans ton code tu écriras la chose suivante pour mettre un titre en couleur:

h1{

color:  #0062AD;

}

Cette solution nous permets d’utiliser beaucoup plus de couleur et de nombreuses nuances. Dans la première section, tu avais le choix entre 16 couleurs, et bien avec la notation hexadécimale, tu as le choix entre 16 millions de couleurs. Tu as donc  l’embarras du choix!

J’utilise le plus souvent cette technique, qui permet rapidement de faire des nuances rapidement dès que l’on commence à avoir l’habitude de certaines choses.

Les nuances de gris

Alors mesdames, ou messieurs, vous allez être assez déçu puisque qu’on ne va parler d’aucune références quelque peu « olé olé », et non je n’ai pas de salle de jeu comme le monsieur dans le livre. Dans ma salle de jeu à moi il y a des instruments de musique et une console de jeux, oui j’ai 32 ans…

Nous allons bien continuer à parler de couleur. Il y a un principe assez simple pour réaliser des nuances de gris très rapidement, qui vont s’étendre:

  •  du Noir : #000000 (ou #000),
  • au blanc: #ffffff (ou #fff)

On remarque donc qu’en notant une suite de lettre ou de chiffre identique, on obtient des gris plus ou moins foncé. ( #7777777 ou #777 par exemple)

D’autres nuances

De la même manière, je t’ai parlé plus haut que les chiffres (ou lettres) étaient « regroupable » par 2. Et bien en mettant 2 groupes à 0 et en faisant varier 1 seul couple, on peut facilement faire des nuances de rouge, de vert et de bleu.

Par exemple pour faire des nuances de rouge:

  • # 110000, #22000 => très proche du noir,
  • #330000, #440000, #550000, #660000 => on est plutôt dans les marrons/ marrons foncés,
  • #990000,=> cette fois on obtient du rouge foncé,
  • de #aa0000 à #ff0000, on obtient plusieurs nuances de rouge, jusqu’au rouge « pur ».

Pour obtenir encore plus de nuance de rouge, on peut mélanger les lettres et les chiffres de cette façon: #5e0000.  Ce principe fonctionne de la même façon pour le vert et le bleu.

Mais tu imagines bien que je ne passe pas ma vie à faire varier ces codes pour trouver la couleur qui me convienne… trop de perte de temps, sans compter que lorsqu’on fait un page web, on doit respecter certains principes de design. Pour m’aider à faire ça, et faire des pages pas trop moches et dans la mesure où je ne suis pas un spécialiste des couleurs, je te donne une astuce donc je me sers TOUT LE TEMPS! Il s’agit du site coolors.co. Cet outil est très pratique puisque tu peux choisir des camaïeux de couleurs directement créé par l’application., il y a plusieurs fonctions, tu peux, par exemple, fixer une couleur qui te plait et en cherche d’autre qui vont avec, choisir toi même ton assemblage de couleur, etc.

extrait-camaieu-de-couleur-site-coolors

 

Sur une page web, on a souvent besoin de couleur particulière pour:

  • les titres,
  • les paragraphes,
  • les bordures,
  • le header,
  • le footer,
  • les arrières plans, etc.

Tous cela doit former un ensemble beau et harmonieux. Mais là je rentre dans des considérations que je ne maîtrise pas encore, et c’est un vrai métier, celui de designer. Mais l’avantage de cela, c’est que ça génère les codes hexadécimaux des couleurs du camaïeu que tu auras choisi!

 

La notation rgb

La notation RGB, fonctionne un peu de la même manière que la notation hexadacimale, dans le sens où on se base encore sur un mélange de rouge (R, Red), de vert (G, Green) et de bleu (B, Blue).  Seule la notation va changer, puisque cette fois , tu n’utiliseras plus de lettre mais uniquement des chiffres de 0 à 256.

Une couleur rgb se note de la façon suivante: rgb( 126, 43, 67).  (Red, Green, Blue).

Je vais passer un peu vite, mais les principes sont les mêmes puisqu’on est sur la même base de rouge, vert, bleu:

  • Pour faire des nuances de gris, il te suffit de noter 3 fois le même chiffre : rgb(220,220,220);
  • Pour faire des nuances de rouge, il te suffit de faire varier seulement le premier chiffre, et de laisser les autres à 0: rgb(56,0,0);

Je te laisse tester tout ça dans Codepen ou sur ton éditeur de texte.

La transparence

Et oui, c’est une des particularités de la notation rgb. Il existe la notation rgba ( , , , ), permets d’ajouter la notion de transparence.

Il est à noter que cette notation n’est pas très judicieuse à utiliser sur du texte, mais plutôt sur des arrières plans de blocs de page en valeur de la propriété background-color, mais pourquoi pas, je ne vois pas ce qui pourrais l’interdire? Il faudra tout de même que tu veilles à ce que le texte reste lisible.

Donc avec le rgba, il te faut ajouter une valeur entre les parenthèses. Tu sait à présent que:

  • la première valeur concerne le rouge,
  • la seconde valeur concerne le vert,
  • la troisième valeur concerne le bleu,
  • et bien la quatrième concernera le degrès de transparence( ou d’opacité).

Ce qui donne par exemple:  color: rgba(23, 188, 87, 0.3); .

Tu remarqueras que la valeur de la transparence est un nombre décimal (avec une virgule):

  • 0 : ton texte ou ton background est totalement transparent, on ne le voit donc pas,
  • 1: ton texte est parfaitement opaque et revient à avoir écrit la valeur en rgb.

La valeur de 0.3 que j’ai indiqué donne donc une transparence assez forte. Essaye ce code, et tu verras qu’il est difficile de lire du texte dans ces conditions…

 

J’espère que cet article sur la propriété color t’as plus. Personnellement, cela m’a permis de clarifier les choses, de les formaliser et d’en réviser certaines que j’avais oubliées. Il existe surement d’autre chose pour travailler sur les couleurs en CSS, mais pour le moment, c’est tout ce que j’ai appris et lu jusque là. Si je trouve autre chose j’en parlerais sur ce blog!

Dernière petite astuce, il existe des plug in de « pipette » dans google chrome, qui permettent de prélever une couleur que tu as sur une photo à l’écran dans ton navigateur. Ces outils sont pour la plupart gratuit et très pratique pour récupérer des codes hexadécimaux ou rgb. J’utilise ColorZilla, qui donne les 2 types codes, pour la même couleur.

Je te dis à bientôt pour parler à nouveau de propriété CSS.

Guillaume