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 :
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".
Voici un exemple visuel de l'utilisation des couleurs :
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 :
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.
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).
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).
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).
Cette combinaison avec le "Couleur 1" ajoute une dimension dynamique et énergique, tout en maintenant une harmonie visuelle et une bonne lisibilité.
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 :
(*) 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.
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.