Accueil
  • #design
  • #palette
  • #outils

Créer une palette de couleurs pour un site web : méthode

Par · · 4 min de lecture

Choisir « un bleu » pour un site est facile. Décider des couleurs de fond, de bordure, de survol, d’erreur et de texte pour que l’ensemble tienne est beaucoup moins simple, et c’est ce qui sépare une palette improvisée d’une palette utilisable.

Voici une méthode pour créer une palette de couleurs pour un site web à partir d’une seule couleur de base : harmonie, répartition, échelle de nuances, couleurs d’état, puis contrastes.

Partir d’une seule couleur de base#

Une palette commence par une couleur de marque, celle d’un logo par exemple. Dans le générateur de palette de couleurs, saisissez-la dans le champ HEX ou avec le sélecteur. Les exemples ci-dessous utilisent un violet, #6155f5.

Choisir une harmonie#

Une harmonie, ce sont des teintes placées à des angles précis sur la roue chromatique. Le générateur en propose six :

  • Complémentaire : la couleur opposée (+180°), ici #e9f555. Fort contraste, à réserver à de petits accents.
  • Analogue : les deux voisines (−30° et +30°), ici #5599f5 et #b155f5. Calme et cohérent.
  • Triade : trois teintes espacées de 120°.
  • Tétrade : quatre teintes espacées de 90°, difficiles à équilibrer sur un site.
  • Complémentaire partagée : la base et les deux voisines de sa complémentaire (+150° et +210°).
  • Monochrome : cinq niveaux de luminosité d’une même teinte, le choix le plus sûr pour un site sobre.

Les teintes sont tournées dans l’espace HSL, mais leur clarté perçue varie : le jaune-vert complémentaire ci-dessus ne fait que 1,2:1 de contraste sur du blanc. Une harmonie donne des idées de teintes, pas des couples prêts pour du texte.

Répartir les couleurs : la règle 60-30-10#

Cette règle, un repère issu de la décoration d’intérieur, aide à doser :

  • 60 % : la couleur dominante, presque toujours un neutre (blanc, gris très clair ou fond sombre) ;
  • 30 % : la couleur secondaire, pour les surfaces, la navigation, les textes ;
  • 10 % : l’accent, pour les boutons principaux et les liens.

Sur un site, votre couleur de marque est le plus souvent l’accent, pas le fond. Le générateur ne calcule pas ces proportions : c’est à vous de les appliquer.

Construire l’échelle de nuances#

Un bouton a besoin d’un fond, d’un survol et d’un texte : une couleur ne suffit pas. Le mode Nuances produit 11 niveaux, de 50 (très clair) à 950 (très foncé), calculés en OKLCH. Votre couleur est reprise telle quelle à l’étape la plus proche de sa luminosité : #6155f5 tombe à 600, et l’échelle va de #f3f4ff (50) à #211f59 (950).

Un usage courant : 50 à 100 pour les fonds, 200 à 300 pour les bordures, 500 à 700 pour les boutons et les liens, 800 à 950 pour les textes et les fonds sombres.

Les contrastes tranchent ensuite. Texte blanc sur le 600 : environ 5,1:1, c’est bon. Texte blanc sur le 500 (#7270ff) : environ 3,8:1, insuffisant pour du texte courant. Texte du 900 (#36318d) sur le 50 : 9,69:1, très confortable.

Ajouter les couleurs d’état#

Un site a aussi besoin de succès, d’avertissement, d’erreur et d’information. Le générateur ne les crée pas : lancez-le une fois par état, avec un vert, un ambre, un rouge et un bleu comme base. À titre d’exemples (choisis à la main, pas produits par l’outil), ces couleurs de texte passent le niveau AA sur fond blanc :

  • succès #15803d : environ 5:1 ;
  • avertissement #b45309 : environ 5:1 (un orange vif comme #ed6c02 tombe à 3,1:1) ;
  • erreur #b91c1c : environ 6,5:1 ;
  • information #0b57d0 : environ 6,4:1.

N’indiquez jamais un état par la couleur seule : ajoutez une icône ou un mot. Les seuils à respecter sont détaillés dans l’article sur les ratios de contraste WCAG.

Exporter, puis vérifier#

  1. Dans le générateur de palette, choisissez le type de palette (Harmonie ou Nuances) et cliquez sur une pastille pour copier son code HEX.
  2. Choisissez le Format d’export : variables CSS, Tailwind v4 (@theme), JSON ou SCSS, et un Nom des variables, par exemple brand.
  3. Copiez le code obtenu dans votre projet.

En Tailwind v4, l’export ressemble à ceci (abrégé : l’outil écrit les 11 nuances) et donne accès à des classes comme bg-brand-600 :

@theme {
  --color-brand-50: #f3f4ff;
  --color-brand-600: #6155f5;
  --color-brand-950: #211f59;
}

Testez ensuite chaque couple de texte et de fond avec le vérificateur de contraste. Pour un autre format que le HEX, le convertisseur de couleurs fait la conversion. Tout est calculé dans votre navigateur : vos couleurs ne sont ni envoyées ni enregistrées.

Outils utilisés dans cet article

À lire aussi