Skip to content
Design · Color

Générateur de palette de couleurs

Saisissez une couleur HEX, RGB ou HSL et générez instantanément des palettes harmonieuses selon les règles de la théorie des couleurs. Exportez en variables CSS ou config Tailwind — tout s’exécute dans votre navigateur.

In-browser only HSL color model WCAG 2.2 contrast
Harmonie
Palette — Complémentaire · 2 nuances
  • #3C83F6rgb(60, 131, 246)hsl(217, 91%, 60%)
  • #F6AF3Crgb(246, 175, 60)hsl(37, 91%, 60%)
Format de copie:
Aperçu daltonisme:

Pour commencer

Comment générer 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 carré de couleur pour ouvrir le sélecteur natif.

  2. 2
    Choisissez une règle d’harmonie

    Cliquez sur l’un des six boutons d’harmonie. La palette se met à jour instantanément.

  3. 3
    Vérifiez votre palette

    Chaque nuance affiche ses valeurs HEX, RGB et HSL. Activez le panneau de contraste pour voir les notes d’accessibilité WCAG, ou l’aperçu daltonisme.

  4. 4
    Copiez ou exportez

    Cliquez sur une nuance pour copier son code dans le format préféré. Utilisez Exporter pour copier toute la palette en variables CSS, config Tailwind ou texte brut.

  5. 5
    Comparez toutes les harmonies

    Cliquez sur « Comparer tout » pour voir les six harmonies simultanément. 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.

Théorie des couleurs

Référence des règles d’harmonie

Référence des règles d’harmonie
RègleCouleursDécalages de teinteIdéal pour
Complémentaire20°, 180°Contraste maximal ; designs énergiques
Analogue5−60° à +60°Palettes harmonieuses ; scènes naturelles
Triadique30°, 120°, 240°Designs vibrants et équilibrés
Tétradique40°, 60°, 180°, 240°Designs riches ; nécessite un bon équilibre
Split-complémentaire30°, 150°, 210°Fort contraste avec moins de tension
Monochromatique5Même teinte, lumiérance variéePalettes subtiles et cohésives

Accessibilité

Concevoir des palettes de couleurs accessibles

  • Vérifiez les ratios de contraste WCAG

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

  • Prévisualisez pour les daltoniens

    Utilisez les modes d’aperçu daltonisme pour simuler l’apparence de votre palette pour les utilisateurs atteints de déficiences visuelles. Assurez-vous que le contenu clé reste distinguable sans dépendre uniquement de la couleur.

  • Évitez les distinctions uniquement par la teinte

    Ne vous fiez pas uniquement à la teinte pour transmettre des informations. Associez les différences de couleur avec le contraste de lumiérance, des motifs, des formes ou des étiquettes textuelles.

  • Testez avec du contenu réel

    Les ratios de contraste sont calculés par rapport au blanc dans cet outil. Testez toujours votre palette avec du texte réel et des composants UI sur les fonds réels prévus en production.

Questions fréquentes

Où vont mes données de couleur ?
Nulle part. Tous les calculs de couleur se font entièrement dans votre navigateur. Aucune donnée de couleur n’est envoyée vers un serveur. L’outil fonctionne hors ligne une fois chargé.
Les palettes générées sont-elles précises ?
Les règles d’harmonie suivent les mathématiques standard de la théorie des couleurs sur la roue HSL. Les couleurs générées sont correctes pour la règle sélectionnée. La perception des couleurs étant subjective, utilisez les palettes comme point de départ.
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’aperçu daltonisme ?
L’aperçu applique des matrices de transformation colorées établies qui simulent comment la palette apparaît aux personnes atteintes de protanopie, deuteranopie ou tritanopie. Ce sont des approximations à des fins de prévisualisation.
Puis-je utiliser les palettes dans des projets commerciaux ?
Oui. Les palettes sont générées à partir de règles mathématiques de théorie des couleurs. Il n’y a aucune restriction de licence sur les couleurs elles-mêmes.
Pourquoi certaines harmonies produisent-elles des couleurs similaires ?
Quand la couleur de base a une faible saturation (proche du gris), les règles basées sur la teinte produisent des couleurs visuellement proches car il y a peu de teinte à faire pivoter. Pour des palettes plus variées, choisissez une couleur de base saturée.
Quelle est la différence entre complémentaire et split-complémentaire ?
Le complémentaire associe la couleur de base à la couleur opposée sur la roue (180°), créant un contraste maximal. Le split-complémentaire utilise les deux couleurs adjacentes au complément (150° et 210°), offrant un fort contraste avec moins de tension visuelle.
Comment vérifier si ma palette respecte les normes WCAG ?
Activez le panneau de contraste pour voir le ratio de contraste de chaque nuance par rapport à un fond blanc. L’outil indique si chaque paire réussit les seuils WCAG AA et AAA.
Puis-je sauvegarder mes palettes ?
L’outil stocke automatiquement vos 10 dernières 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 à toute taille d’écran. Sur mobile, les nuances s’empilent verticalement et toutes les fonctionnalités restent accessibles.