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 flexiweb.io, 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 "Bleu-vert très foncé" #04171e, perçu comme moins brillant et lumineux ...
Parmi les 5 couleurs, ce "Bleu-vert très foncé" est notre couleur 1.
Une couleur 5 devrait bien trancher avec ce "Bleu-vert très foncé", sans être trop flashy.
Les couleurs 2, 3 et 4 sont moins utilisées mais doivent apporter une harmonie.

Très bien, utilisons un "Rouge vif et saturé" #04171e qui contraste bien avec le "Bleu-vert très foncé".
La couleur#04171e est un rouge vif et saturé, très dynamique et percutant.
Elle est immédiatement reconnaissable comme la couleur emblématique de Netflix, pour notre logo "flexible" c'était une évidence...
Mais en dehors de ce contexte, elle évoque aussi le danger, la passion, ou une urgence stylisée.

Proposition de palette de cinq couleurs:

• Couleur principale (Couleur 1) : "Bleu-vert très foncé" - #04171e
• Couleur secondaire (Couleur 2) : "Bleu profond" - #1d5077
• Couleur d'accentuation (Couleur 3) : "Bleu moyen vif" - #3a7ca5
• Couleur d'accentuation secondaire (Couleur 4) : "Bleu clair grisé" - #81a4cd
• Couleur contrastante (Couleur 5) : "Rouge vif et saturé" - #e50914

Utilisation des couleurs

Voici un exemple visuel de l'utilisation des couleurs :

• Couleur 1 (#04171e) : 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 (#1d5077) : Utilisée pour les arrière-plans secondaires, les cartes, les sections de texte, etc.
• Couleur 3 (#3a7ca5) : Utilisée pour les éléments graphiques, les icônes, les survols de boutons, etc.
• Couleur 4 (#81a4cd) : Utilisée pour les titres, les sous-titres, et les éléments interactifs.
• Couleur 5 (#e50914) : 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 "Bleu-vert très foncé" (#04171e), 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 : "Bleu profond" (#1d5077).

• 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 : "Bleu moyen vif" (#3a7ca5).

• 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 : "Bleu moyen vif" (#3a7ca5) et "Bleu clair grisé" (#81a4cd).

• Couleurs contrastante : Utilisation minimale souvent avec la couleur principale

La couleur contrastante est utilisée pour créer un contraste visuel fort avec la couleur principale. Elle attire l'attention et met en valeur des éléments spécifiques.
Elle S'utilise en accent pour mettre en avant des éléments importants : appels à l'action (CTA), notifications, liens actifs, survols (hover), badges ou messages clés.
Elle sert à guider l'utilisateur en créant des points focaux et elle doit offrir un bon contraste visuel avec la couleur principale pour garantir la lisibilité et l'accessibilité.
Son usage doit rester modéré et stratégique, pour éviter de nuire à l'harmonie générale du design.

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 "Bleu-vert très foncé" 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, "Bleu-vert très foncé" - #04171e) 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 "Rouge vif et saturé", mais nous avons testé aussi le bleu électrique, le jaune, le mauve, le vert, l'orange, à chaque fois en couleur vive.
Les couleurs secondaires et d'accentuation (2, 3, 4) ont été choisies pour avoir une harmonie avec la couleur principale, elles seront donc gardées.

(**) Avantage de cette couleur principale foncée : Avec cette couleur principale (Couleur 1, "Bleu-vert très foncé" - #04171e) 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.

(***) Les couleurs secondaires et d'accentuation (2, 3, 4) ayant été sélectionnées pour s'harmoniser avec la couleur principale et la couleur contrastante, une inversion de ces deux couleurs resterait visuellement équilibrée, tout en modifiant fortement l'impact global du design.