Skip to main content

Assignation des couleurs

colors picture

Toutes nos créations web utilisent un set de 5 couleurs, en plus des couleurs d'arrière-plan (souvent blanc ou noir) et des couleurs de texte (couleurs offrant un contraste maximum avec l'arrière-plan, généralement noir ou blanc).
Cela fait donc 7 couleurs au total; Parlons des 5 premières :

  • Couleur principale (Couleur 1)
  • Couleur secondaire (Couleur 2)
  • Couleur d'accentuation (Couleur 3)
  • Couleur d'accentuation secondaire (Couleur 4)
  • Couleur contrastante (Couleur 5)

Un bon exemple est celui de notre site belgates.be, une agence web qui propose des créations de sites web.
On associe parfois du noir comme couleur principale à un site d'agence web. Nous voulions sélectionner un bleu très foncé, #000022, qui est une couleur bleu foncée pure.
Mais nous avons opté pour le "Couleur 1" #1f3e50, perçu comme moins brillant et lumineux ...
Parmi les 5 couleurs, ce "Couleur 1" est notre couleur 1.
Une couleur 5 devrait bien trancher avec ce "Couleur 1", sans être trop flashy.
Les couleurs 2, 3 et 4 sont moins utilisées mais doivent apporter une harmonie.

Très bien, utilisons un "couleur 5" #1f3e50 qui contraste bien avec le "Couleur 1".

Proposition de palette de cinq couleurs:

  • Couleur principale (Couleur 1) : "Couleur 1" - #1f3e50
  • Couleur secondaire (Couleur 2) : "Couleur 2" - #86bd24
  • Couleur d'accentuation (Couleur 3) : "Couleur 3" - #6f6f6f
  • Couleur d'accentuation secondaire (Couleur 4) : "Couleur 4" - #c6c6c6
  • Couleur contrastante (Couleur 5) : "couleur 5" - #fbba00

Utilisation des couleurs

Voici un exemple visuel de l'utilisation des couleurs :

  • Couleur 1 (#1f3e50) : Utilisée pour les éléments de base, comme l'arrière-plan principal, le menu de navigation, les pieds de page, etc.
  • Couleur 2 (#86bd24) : Utilisée pour les arrière-plans secondaires, les cartes, les sections de texte, etc.
  • Couleur 3 (#6f6f6f) : Utilisée pour les éléments graphiques, les icônes, les survols de boutons, etc.
  • Couleur 4 (#c6c6c6) : Utilisée pour les titres, les sous-titres, et les éléments interactifs.
  • Couleur 5 (#fbba00) : Utilisée pour attirer l'attention, comme les boutons d'appel à l'action, les liens importants, les notifications.

Principes d'utilisation des couleurs sur un site web

L'utilisation des couleurs sur un site web doit suivre certains principes pour garantir une expérience utilisateur agréable et cohérente. Voici quelques principes clés avec des pourcentages pour guider l'utilisation des couleurs :

  • Couleur principale (Dominante) : 60%
  • La couleur principale devrait couvrir environ 60% de votre site. Cela inclut les grandes zones de votre design comme l'arrière-plan principal, les sections de contenu importantes, et les grands blocs de texte. Par exemple, pour une agence web avec un "Couleur 1" (#1f3e50), cette couleur serait utilisée pour ces éléments dominants. Utilisation : Arrière-plans, sections principales, pieds de page, etc.

  • Couleur secondaire (Complémentaire) : 30%
  • La couleur secondaire doit être utilisée pour environ 30% du site. Elle complète la couleur principale et aide à différencier certaines sections du site tout en maintenant une harmonie visuelle. Cette couleur est souvent plus neutre. Utilisation : Arrière-plans secondaires, cartes, sections de texte secondaire, etc. Exemple : "Couleur 2" (#86bd24).

  • Couleur d'accentuation : 10%
  • La couleur d'accentuation est utilisée avec parcimonie, couvrant environ 10% du site. Elle est destinée à attirer l'attention sur des éléments spécifiques tels que les boutons d'appel à l'action, les liens importants, ou les notifications. Cette couleur doit contraster fortement avec les couleurs principales et secondaires pour se démarquer. Utilisation : Boutons, liens, notifications, icônes interactives, etc. Exemple : "Couleur 3" (#6f6f6f).

  • Couleurs d'accentuation supplémentaires : Utilisation minimale
  • Des couleurs d'accentuation supplémentaires peuvent être utilisées pour ajouter de la variété et de l'intérêt visuel. Cependant, leur utilisation doit être minimale et stratégique pour éviter de surcharger le design. Utilisation : Éléments graphiques, survols de boutons, titres, sous-titres, etc. Exemple : "Couleur 3" (#6f6f6f) et "Couleur 4" (#c6c6c6).

Conseils supplémentaires

  • Contraste et lisibilité : Assurez-vous que le contraste entre le texte et l'arrière-plan est suffisant pour garantir une bonne lisibilité. Utilisez des outils comme le contraste des couleurs pour vérifier cela.
  • Cohérence : Maintenez une cohérence dans l'utilisation des couleurs à travers toutes les pages du site pour offrir une expérience utilisateur harmonieuse.
  • Psychologie des couleurs : Choisissez des couleurs qui correspondent à l'image de marque et qui évoquent les émotions appropriées chez les utilisateurs.

Cette combinaison avec le "Couleur 1" ajoute une dimension dynamique et énergique, tout en maintenant une harmonie visuelle et une bonne lisibilité.

Sections typiques sur un site web

Voici une liste des sections typiques que l'on retrouve souvent sur un site web, notamment pour une agence web qui propose des créations de sites web :

  • Accueil (Home)
  • À propos (About)
  • Services (Services)
  • Portfolio / Réalisations (Portfolio / Work)
  • Équipe (Team)
  • Témoignages (Testimonials)
  • Blog / Actualités (Blog / News)
  • Contact (Contact)
  • Formulaire de contact (Contact Form)
  • FAQ (Frequently Asked Questions)
  • Tarifs / Forfaits (Pricing / Packages)
  • Mentions légales (Legal Notice)
  • Politique de confidentialité (Privacy Policy)
  • Conditions générales d'utilisation (Terms of Service)
  • Carrières / Recrutement (Careers)
  • Partenaires (Partners)
  • Galerie (Gallery)
  • Téléchargements (Downloads / Resources)
  • Support / Assistance (Support)
  • Événements / Webinaires (Events / Webinars)
  • Newsletter (Newsletter)
  • Plan du site (Sitemap)
  • Avis / Commentaires (Reviews / Comments)
  • Démonstrations / Tutoriels (Demos / Tutorials)

(*) Remarque particulière pour notre site : Nous avons longtemps envisagé des changements de couleurs, maintenant notre principale (Couleur 1, "Couleur 1") est adoptée de façon quasi définitive. Avec cette couleur très foncée, nous voulions avoir une couleur 5 qui tranche bien avec ce bleu, sans être trop flashy. Il y a plusieurs solutions... notre explication mentionne le "couleur 5", mais nous avons testé aussi le bleu électrique, le jaune, le mauve, le vert, l'orange, à chaque fois en couleur vive.
Les couleurs secondaire et d'accentuation (2, 3, 4) ont été choisies pour avoir une harmonie avec la couleur principale, elles seront donc gardées.

En fait, comme nous travaillons avec des sets de couleurs qui sont des variables, nous avons créé un certain nombre de sets quasi identiques avec à chaque fois une couleur contrastante (Couleur 5) différente et utilisons chaque jour un set de couleurs différent.

(**) Avantage de cette couleur principale foncée : Avec cette couleur principale (Couleur 1, #1f3e50#000022, "Couleur 1") utilisée pour le menu de navigation, l'entête (header) et le pied de page (footer), le blanc comme arrière-fond et un noir pour le texte, nous pouvons nous permettre à peu près n'importe quelle couleur d'accentuation qui ont une utilisation minimale. Nous nous sommes donc fait plaisir, en utilisant une pile de couleurs LILO.

Pile de couleurs LILO

Une pile (ou "stack" en anglais) de couleurs "LILO" (Last In Last Out, Dernier Entré, Dernier Sorti) est un concept d'organisation des couleurs où la dernière couleur ajoutée à la pile est la dernière à être réutilisée. Cela signifie que lorsqu'une couleur est utilisée, elle est placée au bas de la pile après son utilisation, garantissant que les couleurs sont utilisées de manière équilibrée et régulière.