La première partie de l’article web design présentent les avantages d’un agencement graphique réussi (structure d’une page Internet, affichage, couleurs …). Définition des polices de texte et des règles typographiques.

Mais qu’en est-il des couleurs du Web Design, de l’agencement et de l’harmonie des couleurs. « Qui sait si le rouge va bien avec le vert… » Voici quelques idées pour concevoir une belle palette de couleur pour le design de votre site Internet.

Les couleurs du Web Design d’un site internet

Le choix des couleurs devrait être bien harmonisées, le cas échéant, choisir les couleurs de l’organisation (notamment celles du logo) pour afficher une ambiance de marque. Attention, il est recommandé de ne pas choisir plus de trois couleurs.
D’autre part, quel que soit le choix des couleurs, il est conseillé d’établir une prédominante, pour présenter la tendance générale des pages web. A savoir, il est conseillé de choisir une ou deux couleurs secondaires plus dynamiques, soit plus vives). Cela permet de souligner et donner plus de relief aux éléments signalétiques.

Les couleurs possèdent toutes une symbolique, de préférence, il faut les choisir en connaissance de cause. En effet, les couleurs influencent le comportement des personnes :

• physiquement : appétit, sommeil, température du corps, etc.
• émotionnellement : sentiment de peur, de sécurité, de joie, etc.
• psychologiquement : dynamisme, concentration, etc.

Les couleurs thématiques les plus utilisées en web design

• Bleu: Voile, nouvelles technologies, informatique, médecine.
• Violet : Culture, politique.
• Rose : Journal personnel, femmes.
• Rouge : Luxe, mode, sport, marketing, médias.
• Orange : Divertissement, sport, voyage.
• Jaune : Communication, tourisme.
• Vert : Découverte, nature, voyage, éducation.
• Brun : Environnement.
• Blanc : Mode, actualités.
• Gris : Design, associations, organisations à but non lucratif.
• Noir : Cinéma, art, photographie.

Toutefois, il est possible d’utiliser une autre couleur thématique que celles indiquées dans la liste ci dessus.

Les règles universelles de la composition et l’harmonie des couleurs

Cela en raison des propriétés physiques de l’œil. habituellement la règle des compositions des couleurs sur une page web, est de 3 couleurs. En effet, l’œil crée automatiquement, sur son contour, un filtre de couleur complémentaire. On parle de « contraste simultané ». Avec ce mécanisme, la perception des couleurs dépend de celles avoisinantes. Il existe donc globalement deux façons principales de choisir des couleurs harmonieuses :

• En choisissant des nuances d’une même couleur, soit des coloris de même teinte dont les tons sont proches,
• En mêlant des couleurs complémentaires (chaudes et froides), c’est-à-dire éloignées sur le diagramme chromatique. La composition avec deux couleurs, choisissez des couleurs complémentaires, diamétralement opposées. Quant a une composition sur trois couleurs, ces dernières devraient former un triangle équilatéral…

Le choix de la couleur d’arrière-plan (en anglais background) est primordial, en effet un arrière-plan mal choisi peut gêner la lecture. Attention au contraste entre la couleur de premier plan et celle de l’arrière plan. Ainsi, il est déconseillé d’opter pour un arrière-plan graphique. Cela peut gêner la lecture et transmettre une touche d’amateurisme. Généralement, l’arrière-plan devrait avoir des tons et des couleurs pastelles.

En savoir plus sur les couleurs du web

Les couleurs du web jouent un rôle essentiel dans la conception de sites, applications et interfaces numériques. Elles sont définies à l’aide de plusieurs modèles et formats. Voici une vue d’ensemble des concepts essentiels :

1. Les formats de définition des couleurs :

a. HEX (Hexadécimal) :

• Forme : #RRGGBB ou #RGB.
• Exemples : #FFFFFF (blanc), #000000 (noir), #FF5733 (orange vif).
• Basé sur une combinaison de rouge, vert et bleu (RGB).

b. RGB (Red, Green, Blue) :

• Forme : rgb(rouge, vert, bleu), chaque valeur de 0 à 255.
• Exemples : rgb(255, 255, 255) (blanc), rgb(0, 0, 0) (noir).
• Utilisé principalement pour afficher des couleurs sur des écrans.

c. HSL (Hue, Saturation, Lightness) :

• Forme : hsl(teinte, saturation, luminosité).
  • Teinte (Hue) : Angle (0-360°) représentant une couleur sur le cercle chromatique (0 = rouge, 120 = vert, 240 = bleu).
  • Saturation : Intensité de la couleur (0% = gris, 100% = couleur vive).
  • Luminosité : Éclairage de la couleur (0% = noir, 100% = blanc).
• Exemple : hsl(240, 100%, 50%) (bleu pur).

d. RGBA / HSLA :

• Ajoutent un canal alpha pour la transparence.
• Exemples :
  • rgba(255, 0, 0, 0.5) (rouge semi-transparent).
  • hsla(0, 100%, 50%, 0.5) (idem).

2. Les palettes standards :

a. Couleurs Web-Safe (216 couleurs) :

• Palette utilisée dans les débuts du web pour garantir une bonne compatibilité entre écrans. Basée sur des couleurs avec des valeurs RGB par paliers de 51 (00, 33, 66, 99, CC, FF).
• Aujourd’hui, cette limitation n’est plus nécessaire.

b. Couleurs nommées CSS :

• Une liste de couleurs pré-nommées, définies par le standard CSS.
• Exemples : red, blue, green, yellow, orange, pink, black, white, gray, etc.

3. Les outils et concepts associés :

a. Accessibilité des couleurs :

• Contraste : Vérifier le contraste entre le texte et l’arrière-plan pour garantir une bonne lisibilité (ex. avec l’outil WCAG).
• Exemples de ratios de contraste recommandés :
  • Texte normal : 4.5:1 ou plus.
  • Texte large : 3:1 ou plus.

b. Dégradés CSS :

• Permettent de créer des transitions lisses entre plusieurs couleurs.
• Exemples :
  • Linéaire : background: linear-gradient(to right, red, blue);
  • Radial : background: radial-gradient(circle, red, blue);

c. Outils pour choisir et harmoniser les couleurs :

• Adobe Color, Coolors, Canva Color Palette Generator.
• Ces outils aident à créer des palettes harmonieuses selon des règles de design (analogues, complémentaires, triadiques, etc.).

4. Tendances récentes dans les couleurs web :

• Couleurs vives et néon : Accentuation des interfaces modernes.
• Nuances pastel : Création d’ambiances douces et chaleureuses.
• Mode sombre : Utilisation accrue du mode sombre pour le confort visuel.

Si vous avez des questions ou souhaitez des exemples pratiques (comme du code CSS), n’hésitez pas à demander !

Autres articles :

Le webdesign et l’agencement, typographie (Part 1)

La charte graphique d’un site Web