Skip to content

Generateur de palette de couleurs

In-browser only HSL color model WCAG 2.2 contrast
←/→ Changer harmonie⌘/Ctrl+C Copier⌘/Ctrl+E Exporter
Harmonie
Format de copie:
Apercu daltonisme:
Palette - Complementaire · 2 nuances
  • #3C83F6rgb(60, 131, 246)hsl(217, 91%, 60%)
  • #F6AF3Crgb(246, 175, 60)hsl(37, 91%, 60%)
Generateur de palette de couleurs

Palette · Complementaire · 2

#3C83F6
#F6AF3C

Gauche/Droite changer d'harmonie · Echap quitter
Outils associes Voir tout

Apercu

Creez des palettes de couleurs harmonieuses dans votre navigateur

Que vous construisiez une palette de marque, un theme d'interface ou un ensemble de tokens de design, choisissez une couleur de base et explorez six harmonies de theorie des couleurs — puis verifiez le contraste WCAG et la securite daltonisme, et exportez en variables CSS ou config Tailwind.

  • Six regles d'harmonie : complementaire, analogue, triadique, tetradique, split-complementaire, monochromatique
  • Saisie HEX, RGB et HSL avec validation en temps reel
  • Copie en un clic par nuance ou export de la palette complete
  • Export en variables CSS et config Tailwind
  • Verificateur de contraste WCAG 2.2 et apercu daltonisme
  • S'execute entierement dans votre navigateur
  • S'execute entierement dans votre navigateur — rien n'est envoye
  • Aucune donnee de couleur n'est envoyee a un serveur
  • Fonctionne hors ligne une fois charge
  • Les palettes recentes sont stockees uniquement dans le stockage local du navigateur
  • Creer une palette de couleurs pour une marque ou une interface depuis une couleur de base
  • Explorer les harmonies de la theorie des couleurs : complementaire, analogue, triadique
  • Exporter les tokens de palette en variables CSS ou config Tailwind
  • Fixer une couleur de base et generer des variations avec differentes regles d'harmonie
  • Presenter une palette en plein ecran pour la revue

Pour commencer

Comment generer une palette de couleurs

  1. 1
    Saisissez votre couleur de base

    Tapez un code hex (ex. #E85D04), une valeur RGB ou HSL. Ou cliquez sur le carre de couleur pour ouvrir le selecteur natif.

  2. 2
    Choisissez une regle d'harmonie

    Cliquez sur l'un des six boutons d'harmonie. La palette se met a jour instantanement.

  3. 3
    Verifiez votre palette

    Chaque nuance affiche ses valeurs HEX, RGB et HSL. Activez le panneau de contraste pour voir les notes d'accessibilite WCAG, ou l'apercu daltonisme.

  4. 4
    Copiez ou exportez

    Cliquez sur l icone de copie d une nuance pour copier son code couleur dans le format choisi (HEX, RGB ou HSL). Utilisez le bouton Exporter pour copier toute la palette en variables CSS, configuration Tailwind ou texte brut.

  5. 5
    Comparez toutes les harmonies

    Cliquez sur « Comparer tout » pour voir les six harmonies simultanement. Cliquez sur « Utiliser » sur n'importe quelle ligne pour basculer vers cette harmonie.

  6. 6
    Partagez votre palette

    Cliquez sur « Partager » pour copier une URL qui restaure la palette exacte.

Theorie des couleurs

Reference des regles d'harmonie

Reference des regles d'harmonie
RegleCouleursDecalages de teinteIdeal pour
Complementaire20°, 180°Contraste maximal ; designs energiques
Analogue5-60° a +60°Palettes harmonieuses ; scenes naturelles
Triadique30°, 120°, 240°Designs vibrants et equilibres
Tetradique40°, 60°, 180°, 240°Designs riches ; necessite un bon equilibre
Split-complementaire30°, 150°, 210°Fort contraste avec moins de tension
Monochromatique5Meme teinte, luminance varieePalettes subtiles et cohesives

Accessibilite

Concevoir des palettes de couleurs accessibles

  • Verifiez les ratios de contraste WCAG

    Activez le panneau de contraste pour voir le ratio WCAG 2.2 de chaque nuance par rapport a un fond blanc. Visez AA (4,5:1 texte normal, 3:1 grand texte) ou AAA (7:1) autant que possible.

  • Previsualisez pour les daltoniens

    Utilisez les modes d'apercu daltonisme pour simuler l'apparence de votre palette pour les utilisateurs atteints de deficiences visuelles. Assurez-vous que le contenu cle reste distinguable sans dependre uniquement de la couleur.

  • Evitez les distinctions uniquement par la teinte

    Ne vous fiez pas uniquement a la teinte pour transmettre des informations. Associez les differences de couleur avec le contraste de luminance, des motifs, des formes ou des etiquettes textuelles.

  • Testez avec du contenu reel

    Les ratios de contraste sont calcules par rapport au blanc dans cet outil. Testez toujours votre palette avec du texte reel et des composants UI sur les fonds reels prevus en production.

Questions frequentes

Ou vont mes donnees de couleur ?
Nulle part. Tous les calculs de couleur se font entierement dans votre navigateur. Aucune donnee de couleur n'est envoyee vers un serveur. L'outil fonctionne hors ligne une fois charge.
Les palettes generees sont-elles precises ?
Les regles d'harmonie suivent les mathematiques standard de la theorie des couleurs sur la roue HSL. Les couleurs generees sont correctes pour la regle selectionnee. La perception des couleurs etant subjective, utilisez les palettes comme point de depart.
Quels formats de couleur sont pris en charge ?
Vous pouvez saisir des couleurs en HEX (3 ou 6 chiffres), RGB ou HSL. La sortie est disponible dans ces trois formats, plus les variables CSS, la config Tailwind et le texte brut.
Comment fonctionne l'apercu daltonisme ?
L'apercu applique des matrices de transformation etablies qui simulent comment la palette apparait aux personnes atteintes de protanopie, deuteranopie ou tritanopie. Ce sont des approximations a des fins de previsualisation.
Puis-je utiliser les palettes dans des projets commerciaux ?
Oui. Les palettes sont generees a partir de regles mathematiques de theorie des couleurs. Il n'y a aucune restriction de licence sur les couleurs elles-memes.
Pourquoi certaines harmonies produisent-elles des couleurs similaires ?
Quand la couleur de base a une faible saturation (proche du gris), les regles basees sur la teinte produisent des couleurs visuellement proches car il y a peu de teinte a faire pivoter. Pour des palettes plus variees, choisissez une couleur de base saturee.
Quelle est la difference entre complementaire et split-complementaire ?
Le complementaire associe la couleur de base a la couleur opposee sur la roue (180°), creant un contraste maximal. Le split-complementaire utilise les deux couleurs adjacentes au complement (150° et 210°), offrant un fort contraste avec moins de tension visuelle.
Comment verifier si ma palette respecte les normes WCAG ?
Activez le panneau de contraste pour voir le ratio de contraste de chaque nuance par rapport a un fond blanc. L'outil indique si chaque paire reussit les seuils WCAG AA et AAA.
Puis-je sauvegarder mes palettes ?
L'outil stocke automatiquement vos 10 dernieres palettes dans le stockage local du navigateur. Vous pouvez aussi partager n'importe quelle palette via un lien URL.
L'outil fonctionne-t-il sur mobile ?
Oui. La mise en page s'adapte a toute taille d'ecran. Sur mobile, les nuances s'empilent verticalement et toutes les fonctionnalites restent accessibles.