Palette de couleurs

Glossaire Web — Design / UX

Une palette de couleurs est l’ensemble des couleurs utilisées de manière cohérente sur un site web ou un support de communication. Une palette bien construite renforce l’identité de marque, guide l’œil du visiteur, crée une ambiance émotionnelle et améliore l’accessibilité. C’est l’un des choix les plus déterminants en design graphique.

La structure d’une palette web

Une palette web complète comporte généralement plusieurs types de couleurs avec des rôles distincts :

Couleur primaire — la couleur principale de la marque, la plus utilisée. Souvent issue du logo. Exemple : le bleu de Facebook, le rouge de YouTube, l’orange d’Amazon.
Couleur secondaire — couleur complémentaire qui enrichit la palette, utilisée pour les éléments d’accentuation secondaires.
Couleur d’accentuation (accent) — couleur vive qui attire l’œil, utilisée pour les CTA et les éléments critiques. Souvent en contraste fort avec la couleur primaire.
Couleurs neutres — nuances de gris (ou beiges) pour les textes, les fonds, les bordures. Représentent 70-80% de la surface d’un site en pratique.
Couleurs sémantiques — vert pour le succès, rouge pour l’erreur, orange pour l’avertissement, bleu pour l’information. Conventions universelles à respecter.

Les théories colorimétriques utiles

Roue chromatique — outil pour trouver des couleurs harmonieuses. Les complémentaires (opposées sur la roue) créent un contraste fort. Les analogues (voisines) créent une harmonie douce.
Règle 60-30-10 — 60% de couleur dominante (fond), 30% de couleur secondaire (sections, blocs), 10% de couleur d’accentuation (CTA, points focaux).
Psychologie des couleurs — chaque couleur évoque des émotions : rouge = énergie/urgence, bleu = confiance/professionnalisme, vert = nature/santé, jaune = optimisme, violet = créativité/luxe.

Les formats de couleur en CSS

HEX — notation hexadécimale (#d9251d). La plus courante sur le web, compacte mais peu lisible.
RGB — Red/Green/Blue avec valeurs de 0 à 255. rgb(217, 37, 29). Lisible mais plus verbeux.
RGBA — RGB avec un canal alpha pour la transparence. rgba(217, 37, 29, 0.8) = 80% d’opacité.
HSL — Hue/Saturation/Lightness. Plus intuitif pour créer des variations de couleur. hsl(4, 78%, 48%).

Accessibilité et contraste

Le contraste entre le texte et son fond est un critère essentiel d’accessibilité. Les normes WCAG imposent :

Niveau AA (minimum) — ratio de contraste de 4.5:1 pour le texte normal, 3:1 pour le grand texte (18pt+).
Niveau AAA (optimal) — ratio de 7:1 pour le texte normal, 4.5:1 pour le grand texte.
Outils de vérification — WebAIM Contrast Checker, Color Contrast Analyser, DevTools Chrome (onglet Accessibility) vérifient automatiquement vos ratios.

Les outils pour créer une palette

Coolors.co — générateur de palettes avec algorithmes d’harmonie. Gratuit et rapide.
Adobe Color — outil professionnel avec extraction depuis une image, roue chromatique et bibliothèques.
Paletton — explore visuellement les harmonies colorimétriques avec aperçu live.
Khroma — utilise l’IA pour générer des palettes adaptées à vos préférences esthétiques.

Le choix des couleurs ne relève pas du hasard. Chez Jeff-Web, nous définissons la palette de chaque projet en fonction du secteur d’activité, de la cible visée et de l’identité existante du client. Une palette cohérente et accessible est un investissement durable : elle façonne l’image de votre marque pour des années.

🔗 Voir aussi : Charte graphique 🔗 Voir aussi : UI 🔗 Voir aussi : CSS 🔗 Voir aussi : Accessibilité web

🔗 Voir aussi : Design / UX

🔗 Voir aussi : Branding

Besoin d’un site web au design professionnel ?

Demander un devis gratuit Découvrir nos offres