Palette de couleurs

Palettes de couleurs pour site web

Sur un site web, chaque couleur a un rôle : fond, texte, boutons, liens et messages. Ces 12 palettes sont pensées pour cela, avec un fond clair ou sombre, une couleur de texte lisible et un accent pour les boutons. Copiez les codes HEX directement dans votre CSS ou votre outil de création de site.

SaaS bleu épuré

Fond presque blanc, texte bleu très foncé et boutons bleu vif.

Corporate sobre

Pour les cabinets, les sociétés de conseil ou les entreprises industrielles.

E-commerce chaleureux

L'orange fait ressortir les boutons d'achat sur un fond chaud.

Mode sombre avec vert

Fonds sombres en couches, texte clair et accent vert pour les actions.

Nature et bio

Pour les boutiques de produits naturels, les potagers ou le bien-être.

Pastel accueillant

Conviviale ; le gris bleuté foncé garantit un texte lisible.

Éditorial avec rouge

Pour les blogs, magazines et médias ; le rouge signale liens et titres.

Violet tech

Fréquente pour les produits numériques, les cours en ligne et les outils d'IA.

Turquoise et corail

Deux accents complémentaires : l'un pour les boutons, l'autre pour les alertes.

Luxe sombre

Pour les hôtels, restaurants ou marques premium où les photos priment.

Santé et bien-être

Nette et apaisante ; idéale pour les cabinets et les thérapies.

Sable et bleu-vert

À la fois chaleureuse et sérieuse ; pour le tourisme, l'immobilier ou les cafés.

Touchez une couleur pour copier son code HEX. L'icône du crayon ouvre la palette dans l'éditeur pour la modifier.

Appliquez la règle 60-30-10

Utilisez la couleur dominante (souvent le fond) sur environ 60 % de la page, une couleur secondaire sur 30 % (sections, cartes, en-tête) et l'accent sur les 10 % restants. Réservez l'accent aux boutons et aux liens : l'utilisateur sait ainsi où cliquer.

Vérifiez le contraste du texte

Les règles d'accessibilité WCAG demandent un contraste minimum de 4,5:1 pour un texte normal. Le gris clair sur blanc paraît élégant mais se lit mal, surtout sur mobile au soleil. Passez par un vérificateur de contraste avant de publier.

Prévoyez des couleurs d'état et d'alerte

En plus de la palette de marque, un site a besoin de couleurs pour les erreurs (rouge), les succès (vert) et les avertissements (jaune ou orange). Choisissez des versions qui s'accordent avec votre palette et utilisez-les toujours de la même façon dans les formulaires et les messages.

Couleurs de ces palettes

Blanc fuméePlatineNoir bleutéBlancGris ardoiseLinChampagneCorailAcajouNoir charbonÉbèneOnyxBlanc casséÉcruVert saugeRose pastel

Questions fréquentes

Combien de couleurs doit avoir un site web ?

En général trois ou quatre suffisent : un fond, une couleur de texte, une couleur principale et un accent, plus les couleurs d'alerte.

Quelle est la meilleure couleur pour les boutons d'un site ?

Il n'y a pas une couleur idéale ; l'important est que le bouton contraste avec le fond et que cette couleur ne serve à rien d'autre sur la page.

Comment appliquer une palette de couleurs à mon site ?

Copiez les codes HEX dans les variables de couleur de votre CSS ou dans les couleurs globales de votre outil, comme WordPress, Wix ou Shopify.

Plus de palettes : design

Continuer l'exploration