Générateur de palettes de couleurs — outil gratuit

Exemple détaillé

Ouvrez la page et le champ « Couleur de base » contient déjà #14b8a6, avec « Palette de marque » sélectionnée. Sept pastilles apparaissent sous « Palette de marque · 7 couleurs » : #14B8A6 (Base), #EE66BA (Accent), #E5FAF8 (Teinte claire), #14524A (Nuance foncée) et trois neutres teintés de la même nuance, #F3F6F6, #63837F et #1A2322. La carte Base indique « Sur blanc 2.5 » avec « Échec », et « Sur noir 8.4 » avec « AAA ». Appuyez sur « Complémentaire » et la bande tombe à deux couleurs, #14B8A6 et #EF7381. Sous « Format de copie », choisissez RGB, puis appuyez sur « Tout copier ». Un message indique « 2 couleurs copiées » et le presse-papiers contient rgb(20, 184, 166), rgb(239, 115, 129). Dans « Vérification texte et fond », la couleur du texte démarre à #000000 sur le fond #14B8A6 et indique 8.44:1, « Texte normal AAA », « Grand texte AAA ».

Quels réglages utiliser, et les limites

• Saisissez la couleur sous la forme dont vous disposez. Le champ « Couleur de base » accepte un code hex avec ou sans le #, en 3 ou 6 chiffres, un nom CSS comme teal ou tomato, une valeur rgb() ou hsl() (tout alpha est ignoré), ou des nombres seuls comme 20 184 166. Les espaces dans les noms sont ignorés : « rebecca purple » fonctionne donc. Un hex complet de 6 chiffres s'applique pendant la saisie. Tout le reste s'applique quand vous appuyez sur Entrée ou quittez le champ. Les hex à 8 chiffres et oklch() ne sont pas lus. Les points ronds règlent l'une des huit couleurs de départ, et le carré ouvre le sélecteur de couleur de votre système.
• Choisissez le type de palette selon le besoin. « Palette de marque » donne 7 couleurs avec des rôles : Base, Accent, Teinte claire, Nuance foncée et trois neutres. « Complémentaire » en donne 2, « Analogue » 4, « Triadique » 3, « Complémentaire scindée » 3, « Tétradique » 4, « Monochromatique » 5 et « Nuances » 7. Monochromatique garde votre couleur et fait varier la luminosité par pas. Nuances est une échelle fixe de 10 à 90 pour cent de luminosité à votre teinte et à votre saturation, et elle n'inclut pas votre couleur exacte. Les types qui font tourner la teinte (Complémentaire, Analogue, Triadique, Complémentaire scindée, Tétradique) visent une luminosité perçue similaire, maintenue dans une plage moyenne.
• Verrouillez ce que vous aimez, puis mélangez à nouveau. Appuyez sur « Verrouiller cette couleur » sur une pastille, puis sur « Mélanger » ou choisissez une nouvelle base. Les pastilles verrouillées gardent leur couleur et les autres changent. « Mélanger » choisit une base aléatoire avec une saturation HSL de 50 à 84 et une luminosité de 40 à 57, et tombe donc sur des tons moyens. Les verrous suivent la position de la pastille, pas la couleur : verrouillez la pastille 1, changez la base, et la pastille 1 garde l'ancienne couleur. « Modifier cette couleur » ouvre un sélecteur de couleur pour une pastille et ajoute « (modifiée) » à l'en-tête. Une pastille modifiée que vous n'avez pas verrouillée est remplacée à la prochaine régénération de la palette.
• Vérifiez le contraste avant de publier. Chaque carte affiche les rapports « Sur blanc » et « Sur noir » avec un badge : « AAA » à partir de 7:1, « AA » à partir de 4.5:1, « AA grand texte » à partir de 3:1, sinon « Échec ». Les rapports utilisent la formule de luminance relative des WCAG. Dans « Vérification texte et fond », vous choisissez une couleur de texte et un fond parmi la palette plus le blanc et le noir. La ligne « Texte normal » donne AAA à 7 et AA à 4.5. La ligne « Grand texte » donne AAA à 4.5 et AA à 3. Testez les paires exactes que vous comptez utiliser, car une palette n'est pas lisible du seul fait que chaque couleur l'est.
• Choisissez le format de copie, puis l'export. « Format de copie » définit ce que copie un clic sur une pastille, sur une puce de teinte ou de nuance, et sur « Tout copier » : hex, rgb, hsl ou oklch. Pour la base, cela donne #14B8A6, rgb(20, 184, 166), hsl(173, 80%, 40%) et oklch(70.4% 0.123 182.5). Sous « Exporter : », les boutons enregistrent palette.css, palette.scss, tailwind-colors.js, tailwind-scales.js (« Tailwind 50-950 »), palette.json, palette.png, palette.svg, palette.gpl, palette.ase et palette.aco. Les fichiers texte contiennent des valeurs hex, et JSON ajoute des chaînes rgb, hsl et oklch. Le PNG fait 200 px de large par pastille, le SVG 160 px. « Codes hex sur PNG/SVG » est coché par défaut.
• Partagez le lien, ou partez d'un préréglage. « Partager le résultat » construit un lien qui conserve la couleur de base, le type, les modifications et les verrous après le # dans l'adresse ; sur un appareil tactile qui le permet, il ouvre la feuille de partage. Une palette partagée peut contenir de 1 à 12 couleurs. Sous « Essayez ceux-ci », « Pastel », « Tons terre », « Néon » et « Adaptée aux marques (AA) » chargent chacun 5 couleurs comme palette « Personnalisée », et changer ensuite la base repasse à « Palette de marque ». « Pipette sur l'écran » n'apparaît que dans les navigateurs qui disposent de la fonction EyeDropper, principalement ceux basés sur Chromium.

Problèmes courants et comment les résoudre

Le message affiché est « Couleur non reconnue. Essayez #14b8a6, teal ou rgb(20, 184, 166). »

Le texte n'a pas pu être lu comme une couleur, et le champ revient à la base actuelle. Les causes courantes sont un hex à 4 ou 8 chiffres comme #14b8a680, une valeur oklch(), un nom de couleur qui n'est pas un nom CSS, et des nombres hors plage comme rgb(300, 0, 0) ou hsl(10, 120%, 50%). Saisissez-la de nouveau en hex à 3 ou 6 chiffres, en nom CSS, ou en rgb() ou hsl() avec des valeurs dans la plage, puis appuyez sur Entrée.

Vous avez choisi une nouvelle couleur de base, mais une pastille a gardé l'ancienne couleur.

Cette pastille est verrouillée. Le bouton de verrou sur la carte devient sarcelle, et son info-bulle indique « Déverrouiller cette couleur ». Les pastilles verrouillées sont conservées à chaque régénération de la palette, y compris après une nouvelle base, un nouveau type ou « Mélanger ». Appuyez de nouveau sur le verrou pour le libérer. Les verrous sont liés à la position de la pastille : un verrou sur la pastille 1 tient donc encore après le passage de « Palette de marque » à « Triadique ».

Un message indique « Copie impossible ».

Les deux voies du presse-papiers ont échoué : l'API de presse-papiers du navigateur, puis un champ de texte caché avec une commande de copie. L'API du presse-papiers est absente sur les pages non sécurisées et dans certains cadres isolés, et un navigateur peut aussi la refuser quand la page n'a pas le focus. Cliquez une fois sur la page et réessayez, ou ouvrez la page dans un onglet normal du navigateur. Si la copie reste bloquée, utilisez les boutons d'export CSS, JSON ou Tailwind pour enregistrer un fichier à la place.

Il n'y a pas de bouton « Pipette sur l'écran ».

Le bouton n'est ajouté que lorsque le navigateur dispose de la fonction EyeDropper, et la FAQ de la page indique qu'il s'agit surtout des navigateurs basés sur Chromium. Là où il manque, utilisez le carré de couleur à côté du champ de texte, ou saisissez le code hex lu dans une autre application. Appuyer sur Échap pendant un choix l'annule discrètement, et un choix qui échoue pour une autre raison n'affiche aucun message sur la page.

Le PNG ou le SVG enregistré n'a aucun code hex sur les pastilles.

La case « Codes hex sur PNG/SVG » est décochée. Elle est cochée à l'ouverture de la page : quelqu'un l'a donc décochée. Cochée, chaque pastille porte son code hex en majuscules, dans une encre sombre ou claire choisie pour le contraste. La case n'affecte que les fichiers PNG et SVG. Les autres exports contiennent les valeurs de couleur elles-mêmes et n'ont pas d'étiquettes. Cochez la case, puis appuyez de nouveau sur PNG ou SVG.

Comment il se compare

Cette page construit une palette à partir d'une couleur selon des règles fixes du cercle chromatique, évalue le contraste avec les rapports WCAG, et exporte vers des fichiers de code et de design. Elle ne tire pas de couleurs d'une photo (la page renvoie vers l'extracteur de couleurs d'image pour cela), ne simule pas le daltonisme, ne nomme pas les couleurs et ne conserve pas les palettes dans un compte. Votre travail est conservé dans la barre d'adresse après le # : un rechargement ou un favori le ramène. Les règles d'harmonie donnent un point de départ, pas une marque achevée. Une application de design ou une charte de marque reste l'endroit où décider des rôles et tester la palette sur de vraies mises en page.