Générateur de palette de couleurs

Appuyez sur la barre d'espace pour générer des palettes de couleurs harmonieuses, verrouillez celles qui vous plaisent, puis copiez les codes HEX ou exportez des variables CSS, du Tailwind et du JSON. Tout est créé dans votre navigateur et rien n'est envoyé.

Les palettes sont générées et vérifiées dans votre navigateur et rien n'est envoyé. Un lien de partage ne contient que les codes de couleur, dans la partie après le #, et vos choix de mode, de style et de taille ne sont mémorisés que sur cet appareil.

Créez des échelles de nuances complètes avec le Générateur de couleurs Tailwind

À propos de Générateur de palette de couleurs

Le Générateur de palette de couleurs compose un ensemble de couleurs qui vont bien ensemble. Appuyez sur la barre d'espace ou sur le bouton Generate et une nouvelle palette de deux à dix couleurs apparaît, des tirages entièrement aléatoires aussi espacés que possible aux harmonies classiques autour d'une couleur de base : analogues, complémentaires, complémentaires divisées, triadiques, tétradiques, monochromatiques, tons foncés et tons clairs. Verrouillez toute couleur qui vous plaît et les autres continuent de changer autour d'elle, remontez dans vos trente dernières palettes avec l'annulation, et faites glisser les pastilles pour les réordonner. Chaque couleur affiche ses valeurs HEX, RGB et HSL, la couleur nommée la plus proche et son contraste WCAG exact avec du texte blanc et noir. Quand la palette est prête, copiez-la en codes HEX, variables CSS, SCSS, extrait Tailwind ou JSON, ou partagez un lien qui ne contient que les codes de couleur.

Fonctionnalités

  • Neuf modes de génération : aléatoire, analogue, complémentaire, complémentaire divisée, triadique, tétradique, monochromatique, tons foncés et tons clairs
  • Des palettes aléatoires dans un style choisi (tous, vif, pastel, atténué, sombre ou clair), les couleurs restant toujours bien distinctes
  • Un champ de couleur de base qui construit chaque harmonie autour de la couleur de votre marque ou d'une nuance favorite
  • Des boutons de verrouillage qui maintiennent les couleurs choisies en place pendant que les autres sont régénérées, pour affiner une palette pas à pas
  • De deux à dix couleurs, un réordonnancement par glisser-déposer ou avec des boutons fléchés, et annuler et rétablir sur les 30 dernières palettes
  • Les valeurs HEX, RGB et HSL, la couleur nommée la plus proche et le contraste WCAG exact du texte blanc et noir sur chaque pastille
  • Un vérificateur de contraste qui évalue n'importe quelle paire texte et fond de votre palette selon AA et AAA
  • Un export en liste HEX, variables CSS, SCSS, extrait Tailwind ou JSON, plus un lien de partage qui ne contient que les codes de couleur

Comment utiliser Générateur de palette de couleurs

  1. Choisissez un mode et, pour Random, un style ; ajoutez une couleur de base si vous voulez que la palette soit construite autour d'elle
  2. Appuyez sur la barre d'espace ou sur Generate jusqu'à ce qu'une couleur vous plaise, puis verrouillez-la pour qu'elle reste pendant que les autres changent
  3. Cliquez sur une pastille pour copier son code HEX, ouvrez ses détails pour le RGB, le HSL et le contraste, et faites glisser les pastilles dans l'ordre voulu
  4. Vérifiez le contraste du texte sur n'importe quelle paire, puis ouvrez Export et copiez la palette en variables CSS, SCSS, Tailwind ou JSON

Exemple

Entrée

Mode: Analogous · base color #2a9d8f · 5 colors

Sortie

#3d4dc3  #2b668a  #2a9d8f  #69d391  #5aca4b
White text: AA on #3d4dc3 (6.89) and #2b668a (6.23) · black text: AA or better on the other three

Les couleurs analogues sont voisines sur le cercle chromatique, à 30 degrés d'écart au plus. Les rapports de contraste utilisent la formule WCAG : chaque pastille indique donc quelle couleur de texte y placer.

Erreurs courantes et dépannage

  • La barre d'espace ne crée pas de nouvelle palette. — La barre d'espace ne génère que lorsqu'aucun bouton, lien ou champ de texte n'a le focus du clavier, car ceux-ci gardent la barre d'espace pour eux. Appuyez sur Tab jusqu'à ce que plus rien ne soit mis en évidence, ou cliquez sur le bouton Generate.
  • Le bouton Generate est grisé. — Toutes les couleurs sont verrouillées : il n'y a donc plus rien à changer. Déverrouillez au moins une couleur avec son bouton de verrouillage ou avec la touche L.
  • Un lien de palette partagé ouvre une palette vide ou différente. — Les couleurs se trouvent dans la partie de l'adresse après le signe #. Si une appli de messagerie a tronqué le lien, copiez à nouveau l'adresse entière ; un hash qui n'est pas composé de deux à dix codes HEX valides à six chiffres est ignoré.
  • L'extrait Tailwind ne modifie pas mes couleurs existantes. — Il ajoute un groupe de palette sous theme.extend.colors. Collez-le dans l'objet colors de votre configuration et utilisez des classes comme bg-palette-1 ou text-palette-3.

Foire aux questions

Comment fonctionnent les modes d'harmonie du Générateur de palette de couleurs ?
Chaque mode choisit des teintes à des distances fixes sur le cercle chromatique à partir d'une teinte de base : les couleurs analogues sont espacées de 30 degrés au plus, le mode complémentaire utilise la teinte opposée, le complémentaire divisé les deux teintes voisines de la teinte opposée, le triadique espace trois teintes de 120 degrés et le tétradique quatre teintes de 90 degrés. Les modes monochromatique, tons foncés et tons clairs gardent une seule teinte et font varier sa luminosité et sa saturation, et Random espace les couleurs autant qu'il le peut.
Comment générer une palette de couleurs autour de la couleur de ma marque ?
Saisissez ou choisissez la couleur de votre marque comme couleur de base, puis choisissez un mode d'harmonie. La couleur de base est placée dans la palette et reste fixe, et les autres couleurs sont construites autour d'elle à chaque appui sur la barre d'espace. Passez de l'analogue au complémentaire puis au triadique pour voir jusqu'où vous voulez que la palette s'éloigne de la couleur de la marque.
Comment garder certaines couleurs et changer les autres dans le Générateur de palette de couleurs ?
Verrouillez les couleurs qui vous plaisent avec le bouton de verrouillage d'une pastille ou avec la touche L. Une couleur verrouillée reste à sa place pendant qu'une nouvelle palette est générée autour d'elle, et l'annulation revient à la palette précédente si la nouvelle est moins bonne. Verrouiller toutes les couleurs désactive Generate.
Comment le Générateur de palette de couleurs vérifie-t-il le contraste du texte ?
Il utilise la formule WCAG, qui compare la luminance relative de deux couleurs. Le texte normal exige un rapport d'au moins 4,5 pour 1 pour le niveau AA et 7 pour 1 pour le niveau AAA ; le grand texte exige 3 pour 1 et 4,5 pour 1. Chaque pastille indique le rapport pour du texte blanc et noir, et le vérificateur de contraste évalue n'importe quelle paire texte et fond de la palette.
Comment exporter une palette en variables CSS ou en Tailwind ?
Ouvrez le panneau Export et choisissez un format. CSS variables donne un bloc :root avec --color-1 à --color-5, SCSS donne des variables $color, Tailwind donne un groupe de palette à coller dans theme.extend.colors, et JSON ainsi que la liste HEX donnent de simples tableaux. Chacun a son bouton de copie.
Puis-je partager une palette créée avec le Générateur de palette de couleurs ?
Oui. L'adresse dans votre navigateur contient toujours les couleurs actuelles après un signe #, par exemple #264653-2a9d8f-e9c46a, et Copy link la copie. Toute personne qui l'ouvre voit la même palette. La partie après le # n'est jamais envoyée à un serveur, et seuls vos choix de mode, de style et de taille sont mémorisés sur cet appareil.

Outils associés

Plus d’outils Web et DevOps

Voir tous les outils Web et DevOps (27) · Tous les outils