256 Tools

Générateur de Palette de Couleurs — Schémas Harmonieux depuis un HEX (Gratuit, CSS/Tailwind)

#7C3BEDAa AA : réussi 5.67:1
#3BACEDAa AA : réussi 8.31:1
#3B53EDAa AA : réussi 5.76:1
#D53BEDAa AA : réussi 5.68:1
#ED3BACAa AA : réussi 5.82:1
38
La barre d'espace régénère aussi (hors champ de saisie)

Ajuster la couleur sélectionnée

#7C3BED

Exporter la palette

:root {
  --color-1: #7C3BED;
  --color-2: #3BACED;
  --color-3: #3B53ED;
  --color-4: #D53BED;
  --color-5: #ED3BAC;
}

Outils externes associés

Certains liens sont des liens d'affiliation.

Adobe ColorRoue chromatique et thèmesCanvaDesign graphique facile

Outils associés

Convertisseur de CouleurConvertissez n'importe quelle couleur entre HEX, RGB, HSL, HSV et RGBA à la fois. Modifiez une valeur, copiez en un clic, avec alpha et contraste WCAG.Générateur de DégradéCréez des dégradés CSS linéaires, radiaux et coniques avec plusieurs points de couleur. Ajustez l'angle, la forme et le centre, puis copiez le CSS background ou la valeur Tailwind en un clic.Extracteur de Couleurs d'ImageExtrayez la palette de couleurs dominantes de n'importe quelle image dans votre navigateur, sans rien envoyer. Obtenez HEX, RGB et pourcentage (%) de chaque couleur, choisissez le nombre et exportez en CSS/JSON.Outil d'association de policesTrouvez les meilleures combinaisons Google Fonts titre × corps, prévisualisez-les en temps réel et copiez le CSS en un clic.

Ce générateur de palette de couleurs gratuit crée des combinaisons chromatiques harmonieuses à partir d'une couleur de base, selon la théorie des couleurs. Entrez un code HEX, choisissez une couleur avec le sélecteur ou cliquez sur Aléatoire — puis sélectionnez un schéma comme complémentaire, analogue, triadique, tétradique ou monochromatique pour générer instantanément une palette équilibrée. Verrouillez les couleurs que vous aimez et régénérez le reste, affinez la luminosité et la saturation avec les curseurs, copiez n'importe quel HEX en un clic ou exportez toute la palette en variables CSS, couleurs Tailwind ou JSON. Tout fonctionne dans votre navigateur — vos couleurs ne sont jamais envoyées à un serveur.

Comment l'utiliser

  1. Entrez un code HEX (ex. : #7C3AED) ou un nom de couleur CSS (ex. : rebeccapurple) dans le champ Couleur de base, utilisez le sélecteur de couleur ou cliquez sur Aléatoire pour partir d'une couleur aléatoire.
  2. Choisissez un schéma — Complémentaire, Analogue, Triadique, Tétradique, Complémentaire divisé ou Monochromatique — et la palette se met à jour instantanément.
  3. Définissez le nombre de couleurs (3–8) avec le curseur.
  4. Cliquez sur l'icône de cadenas de n'importe quelle couleur pour la fixer. Cliquez sur Régénérer (ou appuyez sur Espace hors d'un champ) pour mélanger uniquement les couleurs déverrouillées.
  5. Sélectionnez un échantillon et utilisez les curseurs Luminosité / Saturation pour l'ajuster. Passez en mode 'Toutes les couleurs' pour modifier toute la palette de façon relative.
  6. Copiez un HEX avec l'icône de copie, ou utilisez 'Copier tous les HEX'. Dans l'onglet Exporter, choisissez le format et copiez ou téléchargez.
  7. Utilisez 'Copier l'URL de la palette' pour partager cette combinaison exacte.

Les schémas de couleurs (harmonie chromatique)

Un schéma de couleurs est une règle pour choisir des couleurs qui semblent harmonieuses ensemble, basée sur leurs positions sur le cercle chromatique. Les relations de teinte sont la colonne vertébrale ; les variations de luminosité et de saturation ajoutent de la vie.

Cercle chromatique avec 12 teintes à intervalles de 30 degrésCercle chromatique

Complémentaire

Deux couleurs directement opposées sur le cercle (+180°). Contraste élevé et accrocheur. Idéal pour des accents qui ressortent.

Complémentaire divisé

La couleur de base plus les deux voisins de son complémentaire (+150°/+210°). Tension plus douce que le complémentaire, plus facile à équilibrer.

Analogue

Teintes adjacentes (±30°). Cohésif et calme, parfait pour les arrière-plans et les harmonies naturelles.

Triadique

Trois teintes également réparties autour du cercle (+120°/+240°). Équilibré et vibrant — fort et polyvalent.

Tétradique

Quatre teintes à 90° formant un rectangle. Riche et varié ; nécessite d'équilibrer soigneusement les tons chauds et froids.

Monochromatique

Plusieurs variations de luminosité et saturation d'une seule teinte. Le schéma le plus sûr — toujours cohésif et sans risque.

Conseil : si vous hésitez, commencez par Analogue ou Monochromatique — ce sont les plus difficiles à rater.

Fonctionnalités

Générer depuis une couleur de base ou aléatoirement

Entrez n'importe quel HEX, nom CSS ou utilisez le sélecteur pour définir une couleur de base, et laissez le schéma générer le reste. Ou cliquez sur Aléatoire pour un point de départ entièrement nouveau.

Verrouiller des couleurs et régénérer le reste

Vous avez trouvé une couleur que vous aimez ? Cliquez sur le cadenas pour la fixer. Régénérer (ou espace) mélange uniquement les emplacements déverrouillés — rapide pour explorer les variations.

Ajustement fin de la luminosité et de la saturation

Sélectionnez un échantillon et faites glisser les curseurs Luminosité ou Saturation pour l'affiner avec précision, sans toucher à l'harmonie des teintes. Utilisez 'Toutes les couleurs' pour déplacer toute la palette.

Copier le HEX en un clic

Cliquez sur l'icône de copie d'un échantillon pour copier instantanément son HEX dans le presse-papiers. Utilisez 'Copier tous les HEX' pour récupérer toutes les couleurs en une fois.

Exporter en variables CSS, Tailwind ou JSON

Ouvrez l'onglet Exporter et choisissez votre format. Variables CSS génère un bloc :root (--color-1, --color-2…). Tailwind génère un bloc theme.extend.colors prêt à coller. JSON génère un simple tableau. Les valeurs de couleur sont toujours en HEX majuscule, jamais formatées localement.

Conseils de contraste et de lisibilité

Chaque échantillon indique si le texte blanc ou noir est plus lisible sur lui, le rapport de contraste WCAG et un badge de réussite/échec pour AA — affiché avec couleur et texte, pas seulement avec couleur.

Cas d'utilisation

Définir les couleurs de marque depuis un HEX de logo

Collez le HEX principal de votre marque, choisissez Analogue ou Complémentaire et obtenez instantanément des candidats pour les couleurs d'accent, d'arrière-plan et de texte qui s'harmonisent avec votre logo.

Coller directement dans CSS / Tailwind

Exportez en variables CSS (:root { --color-1: ... }) ou en bloc theme.extend.colors Tailwind et collez directement dans votre code — sans conversion manuelle.

Vérifier l'accessibilité des couleurs

Utilisez les conseils de lisibilité de chaque échantillon pour vérifier que le texte répond au WCAG AA (4.5:1 de contraste). Repérez les couleurs problématiques avant de développer.

Notes et conseils

  • Les schémas fournissent un point de départ harmonieux, pas un résultat garanti. La bonne palette dépend toujours du contexte, des proportions et des teintes spécifiques utilisées.
  • Le contraste est un guide : le calcul WCAG est précis, mais la lisibilité réelle dépend aussi de la taille et du poids de la police et des couleurs environnantes.
  • Les palettes monochromatiques peuvent sembler désaturées à des valeurs de luminosité extrêmes — c'est attendu. Maintenir une saturation de base modérément élevée aide.
  • Vos données de couleur ne sont jamais envoyées à un serveur. Le partage fonctionne en encodant la palette dans l'URL — seul ce que vous copiez délibérément quitte votre appareil.

Foire aux questions

Puis-je générer une palette de couleurs à partir d'un code HEX ?
Oui. Entrez n'importe quel code HEX (avec ou sans #) dans le champ Couleur de base et l'outil génère instantanément une palette harmonieuse avec le schéma sélectionné. Les noms de couleur CSS comme 'rebeccapurple' fonctionnent aussi.
Quels schémas de couleurs puis-je choisir ?
Six : Complémentaire (+180°), Complémentaire divisé (+150°/+210°), Analogue (±30°), Triadique (+120°/+240°), Tétradique (+90° chacun) et Monochromatique (une seule teinte avec luminosité variable). Tous suivent la théorie des couleurs standard.
Puis-je verrouiller une couleur et régénérer uniquement le reste ?
Oui. Cliquez sur l'icône de cadenas de n'importe quel échantillon pour le fixer. Cliquer sur Régénérer ou appuyer sur Espace mélange uniquement les emplacements déverrouillés.
Puis-je exporter en variables CSS, Tailwind ou JSON ?
Oui. Dans l'onglet Exporter, choisissez le format : variables CSS (:root { --color-1: #...; }), configuration Tailwind (theme.extend.colors → palette: { 1: '#...', ... }) ou JSON ({ "palette": ["#...", ...] }). Chacun peut être copié ou téléchargé.
Combien de couleurs la palette peut-elle avoir ?
De 3 à 8. Utilisez le curseur pour choisir. Quand le schéma a moins de teintes clés que demandé, les emplacements supplémentaires sont remplis avec des variations de luminosité (teintes et nuances).
Puis-je vérifier si le texte est lisible sur chaque couleur ?
Oui. Chaque échantillon indique la couleur de texte recommandée (blanc ou noir), le rapport de contraste WCAG et une étiquette de réussite/échec pour AA — en texte, pas seulement en couleur.
Mes couleurs sont-elles envoyées à un serveur ?
Non. Toute génération de palette, ajustement, calcul de contraste et exportation se déroule entièrement dans votre navigateur. Vos couleurs ne sont jamais envoyées ni stockées.

Nous utilisons des cookies pour la publicité et l’analyse.