fbpx
contact@bootstrap-top-design.com

Les bases nécessaires à connaitre sur les couleurs avant de débuter tout projet web

les bases sur les couleurs

Comment combiner différentes couleurs pour qu’elles s’assortissent convenablement sur un projet web ?

Es-ce que ces couleurs choisies sont adéquation avec le message que véhicule le projet ? 

Et ensuite, comment jouer sur ces couleurs  pour ne pas donner une impression de monotonie ?

Ce sont de telles questions auxquelles font face les designers débutants lors de leurs conceptions. Si c’est votre cas, ne vous en faites pas, car la suite de l’article vous montre les bases sur les couleurs et vous apporte la lumière sur toutes ces questions.

A propos des couleurs :

à propos des bases sur les couleurs

Nous avons plus d’une dizaine de millions de couleurs, énorme !

Mais ces couleurs sont toutes formées à base des couleurs rouge, jaune et bleu que l’on appelle les couleurs primaires.

Ça, tout le monde le sait, il s’agit de l’une des bases sur les couleurs enseignée à l’école.

Pour un template ou site web,  on utilise le système de notation de couleur RGB et les valeurs hexadécimales pour représenter les couleurs. Le RGB qui signifie littéralement Red Green Blue  (Rouge Vert Bleu en français).

Exemple d’utilisation du RGB et de l’hexadécimal :

  • Code RGB du violet : rgb(238,82,238)
  • Code hexadécimal du violet : #EE82EE

Pour la notation hexadécimale, les deux premières valeurs représentent celle du rouge, les deux suivantes celles du vert et les dernières celles du bleu.

Jouer avec les couleurs :

jeu de couleurs

Prenons l’exemple d’un one page où les couleurs utilisées sont le rouge et le blanc.

Il n’y a pas de mal à ce qu’il utilise le même rouge sur les différents éléments à mettre en valeur sur la page.

Mais vous conviendrez avec moi que ça serait beaucoup plus intéressant et attrayant si à certains endroits le rouge est nuancé, à d’autre il est saturé ou encore si même sur certains éléments présentait un peu d’ombrage.

N’est-ce pas que cela évitera la monotonie et l’ennuie à l’utilisateur ?

Les différents vocabulaires d’une couleur :

Le vocabulaire des couleurs
  • L’ombrage : C’est l’ajout de la couleur noire à une couleur, il permet de créer du monochrome en ajoutant une variation de couleurs noires à une couleur de base.
  • La nuance : C’est l’ajout du blanc à une couleur de base, lui aussi permet de créer du monochrome. Elle tout comme l’ombrage permettent d’intensifier ou de diminuer la luminance d’une couleur.
  • La saturation : Elle décrit l’intensité d’une couleur, augmenter la saturation d’une couleur la rend riche et foncée alors que la réduire la rend fade et clair.
  • La clarté : C’est l’état d’éclat d’une couleur
  • Les couleurs chaudes : Ce sont les couleurs qui contiennent une quantité élevée du rouge et du jaune.
  • Les couleurs légères : Elles contiennent une quantité élevée du bleu.

4 schémas de fonctionnement des couleurs :

Bien avant de découvrir ces 4 schémas, nous allons tout d’abord voir ce que c’est qu’une roue chromatique.

Vous vous rappelez de ce terme !

Il existe plusieurs types de cercle chromatique, mais le cercle chromatique basique contient 12 couleurs standards. Chaque portion du cercle représente une famille de couleurs qui peut être obtenue après mélange de quantités égales d’autres couleurs.

roue chromatique

Il est primordial de vous faire découvrir la roue chromatique en premier, car elle permet de faire des combinaisons de couleurs bien assorties.

SCHEMA 1 : La Monochromie

La monochromie consiste en une variation de nuances, d’ombres et de saturation d’une couleur de base. Son désavantage est qu’il est monotone donc il y a risque d’ennui pour l’utilisateur.

SCHEMA 2 : La Complémentarité

La complémentarité est basée sur 2 couleurs opposées de la roue chromatique. Ce schéma est souvent impactant, car il permet une propre mise en valeur d’un élément.

SCHEMA 3 : L’analogie

Il consiste à utiliser 3 couleurs côte à côte de la roue chromatique. A cause de leur similitude, cette combinaison donne souvent de la cohésion, et ne présente pas aussi de monotonie.

SCHEMA 4 : La Triade

Elle consiste à dessiner un triangle équilatéral (triangle dont les trois côtés sont égaux) dans la roue chromatique, ensuite choisir les couleurs qui accueillent les sommets du triangle.

Cela crée une diversité, mais cohérente.

Psychologie des couleurs :

la psychologie des couleurs

Les couleurs ont chacune une valeur et une signification. Grâce à elles, vous pouvez renforcer le message que vous cherchez à véhiculer ou encore mettre plus en lumière un produit.

  • ROUGE : vibrante et agressive, elle communique différents messages selon les contextes. Elle communique le danger, l’exemple des panneaux avec le signe STOP, elle peut aussi communiquer la masculinité en combinaison avec du noir, l’exemple des voitures de sport.
  • JAUNE : Elle représente le soleil et l’été. Couleur très visible, il est souvent utilisé en combinaison du blanc et du noir pour les équipements de sécurité.
  • BLEU : Elle illustre le céleste, l’hiver, la solitude, la peur et en même temps le professionnel.
  • VERT : Il communique la santé, la croissance, il est parfait pour tout ce qui concerne l’environnement, l’organique. Aux Etats-Unis par exemple, le vert symbolise l’abondance et la finance.
  • VIOLET : Cette couleur était utilisée dans la Rome antique par les riches. Aujourd’hui, elle est utilisée pour certaines marques de produits de luxe. Quand la couleur violette combinée avec le rouge, elles communiquent le romantisme. Mais combinée avec le banc, ils permettent d’illustrer du jeu et de l’amusement.
  • BLANC : Pureté, innocence, ils communiquent la fraicheur, la propreté.
  • NOIR : Le noir insinue la force, le luxe, le mal ou encore l’inconnu.

Quelques ressources :

les outils des couleurs

Sur le net, il existe une multitude de ressources dans différents domaines, mais nous allons voir juste quelques-uns de ceux qui permettent de générer des palettes de couleurs et de ceux qui permettent de s’inspirer des travaux des professionnels.

Générateurs de Palettes de Couleurs :

Sites d’illustrations :

Ces sites permettent de publier ces œuvres et d’avoir les commentaires et les avis des utilisateurs. Ces sites comportent beaucoup d’œuvres des professionnels, vous pouvez voir comment ils utilisent les couleurs et les agencent dans leur œuvre.

Conclusion :

Désormais, vous connaissez les bases sur les couleurs et quelques outils utiles qui vous permettront de réaliser de magnifiques designs avec des agencements de couleurs captivants.

Si vous connaissez d’autres outils pour les couleurs alors n’hésitez pas à le poster en commentaire, car votre commentaire serait instructif et bénéfique pour nous tous.

Laisser un commentaire