Aller au contenu
SPCXTools

Générateur de palette de couleurs

Choisissez une couleur et obtenez une palette harmonieuse de cinq couleurs basée sur la théorie des couleurs.

Fonctionne en local — vos fichiers ne quittent pas votre appareil

Chargement de l’outil…

Comment utiliser : Générateur de palette de couleurs

  1. 1Choisissez une couleur de base avec le sélecteur, saisissez une valeur HEX/RGB/HSL, ou cliquez sur Aléatoire.
  2. 2Choisissez un schéma de couleurs tel que complémentaire, analogue ou triadique.
  3. 3Cliquez sur une pastille pour copier son code HEX.
  4. 4Copiez la palette complète sous forme de propriétés personnalisées CSS ou JSON.

Créer une palette de couleurs à partir d'une couleur

Choisir des couleurs qui s'accordent bien est l'une des étapes les plus difficiles lors de la création d'un site web, d'une application, d'une présentation, d'un logo ou d'une affiche. La théorie des couleurs offre des relations éprouvées entre les teintes sur le cercle chromatique, et ce générateur de palette les applique pour vous. Partez d'une couleur que vous aimez — ou de la couleur de votre marque —, choisissez une harmonie, et obtenez cinq couleurs harmonieuses prêtes à être copiées dans votre projet.

Fonctionnalités

  • Sept harmonies : complémentaire, analogue, triadique, complémentaire adjacente, tétradique, monochromatique et nuances.
  • N'importe quelle couleur de départ au format HEX, RGB, HSL ou nom de couleur CSS, ou choisissez-en une au hasard.
  • Cliquez pour copier n'importe quel échantillon.
  • Exportez en propriétés personnalisées CSS ou en tableau JSON.
  • Étiquettes lisibles qui basculent entre le noir et le blanc pour un meilleur contraste.

Quelle harmonie choisir ?

Harmonie Ambiance Idéal pour
Complémentaire Audacieux, fort contraste Boutons d'appel à l'action, sport, promotions
Analogue Calme, harmonieux Nature, bien-être, arrière-plans
Triadique Dynamique, équilibré Produits pour enfants, illustrations
Complémentaire adjacente Vif mais moins agressif Sites web nécessitant un accent fort
Tétradique Riche, coloré Infographies et graphiques
Monochromatique Élégant, minimaliste Sites d'entreprise, portfolios
Nuances Systématique Design systems, états d'interface

De la palette au design

Une fois votre palette définie, vérifiez que le texte est lisible sur tous les fonds avec le Vérificateur de contraste, convertissez les couleurs en RGB, HSL ou CMYK pour l'impression avec le Convertisseur de couleurs, et transformez deux d'entre elles en un arrière-plan harmonieux avec le Générateur de dégradés CSS.

Questions fréquentes

Qu'est-ce qu'une palette de couleurs complémentaires ?
Les couleurs complémentaires sont opposées sur le cercle chromatique, comme le bleu et l'orange. Ce fort contraste fait ressortir les accents et les appels à l'action. Utilisez une couleur comme couleur principale et la complémentaire avec parcimonie.
Quelle est la différence entre les couleurs analogues, triadiques et tétradiques ?
Les couleurs analogues sont voisines sur le cercle chromatique et créent un effet calme et harmonieux. Les couleurs triadiques sont espacées de 120° et offrent un rendu vibrant mais équilibré. Les palettes tétradiques (carré) utilisent quatre teintes espacées de 90° et sont les plus colorées — il est généralement préférable de choisir une couleur dominante.
Comment utiliser une palette de cinq couleurs sur un site web ?
Une approche courante est la règle des 60-30-10 : environ 60 % de fond neutre, 30 % de couleur principale et 10 % d'accent. Utilisez la couleur la plus sombre pour le texte et vérifiez chaque combinaison de texte et de fond avec un vérificateur de contraste.
Puis-je partir de la couleur de ma marque ?
Oui. Entrez le code HEX de votre marque comme couleur de base ; chaque palette sera construite autour de celle-ci. Pour extraire la couleur d'une marque depuis un logo ou une capture d'écran, utilisez le sélecteur de couleur d'image.
Comment les couleurs sont-elles calculées ?
La couleur de base est convertie en HSL (teinte, saturation, luminosité). Les palettes font pivoter la teinte selon des angles fixes sur le cercle chromatique, tandis que les palettes monochromatiques et les nuances conservent la teinte et font varier la luminosité.

Outils similaires

Vérificateur de contraste de couleursVérifiez si votre texte est suffisamment lisible — et obtenez la couleur la plus proche qui respecte les normes WCAG.Convertisseur de couleursConvertissez n'importe quelle couleur entre les formats HEX, RGB, HSL, HSV et CMYK, et vérifiez son contraste.Sélecteur de couleur d'imageCliquez n'importe où sur une image pour obtenir ses codes couleur exacts (HEX, RGB et HSL) — ainsi que sa palette de couleurs principales.Générateur de dégradé CSSCréez visuellement un arrière-plan en dégradé et copiez le code CSS — linéaire, radial ou conique.Générateur de box-shadowAjustez des ombres douces, nettes, superposées ou internes avec un aperçu en direct et copiez le CSS.Simulateur de daltonismePrévisualisez vos images à travers les yeux d'une personne daltonienne pour garantir l'accessibilité de vos designs.