Aller au contenu
Tout en local

Générateur de palette de couleurs

Convertissez une couleur de base en une palette complète à l'aide de règles d'harmonie des couleurs.

Entrée
0
0
Sortie

Générateur de palette de couleurs

Collez une couleur de base sous forme de code hex, valeur rgb() ou hsl() et cet outil construit une palette complète autour d'elle en utilisant les règles d'harmonie des couleurs, et non une simple rampe de luminosité de la même teinte. Choisissez complémentaire pour une seule couleur opposée, complémentaire divisé ou triadique pour un contraste équilibré, tétradique pour un rectangle de quatre couleurs, analogique pour les teintes voisines qui vont naturellement bien ensemble, ou monochromatique pour les tons et les nuances d'une seule teinte.

L'option d'harmonie décide du nombre de couleurs générées : complémentaire en retourne toujours deux, triadique et complémentaire divisé en retournent trois, tétradique en retourne quatre, tandis que le nombre de couleurs et l'angle d'incrément de teinte s'appliquent uniquement à analogique et monochromatique, où vous choisissez le nombre de couleurs et leur espacement. Calculez en HSL pour la roue chromatique mathématique classique, ou passez à OKLCH, qui maintient la même luminosité perçue sur toutes les teintes pour que la palette ne sorte pas avec une nuance qui semble étrangement sombre ou délavée par rapport au reste. Les curseurs d'ajustement de saturation et de luminosité affinent la palette entière après la construction de l'harmonie, et l'option de format de couleur imprime chaque résultat en hex, rgb(), hsl() ou oklch().

Chaque nuance est vérifiée par rapport à WCAG AA (4.5:1) comme texte sur fond blanc et noir, marquée avec une coche ou une croix à côté de chaque ratio : utile pour choisir les couleurs d'une palette générée qui sont sûres pour le texte du corps plutôt que pour la décoration uniquement. Exportez le résultat sous forme de liste simple, un bloc de propriétés personnalisées CSS prêt à coller dans une feuille de style, ou un objet de couleur de configuration Tailwind.

Tout fonctionne localement dans votre navigateur : la couleur que vous entrez n'est jamais envoyée nulle part. Copiez le résultat, téléchargez-le en tant que fichier .txt ou envoyez-le à l'entrée d'un autre outil pour continuer à travailler avec lui.

FAQ

Quels formats d'entrée accepte-t-il pour la couleur de base ?
Codes hex (#3b82f6, #38f, avec ou sans le #), rgb()/rgba() et hsl()/hsla(). Collez l'un de ceux-ci et la palette se met à jour instantanément.
Quelle est la différence entre HSL et OKLCH pour le calcul ?
HSL est la roue chromatique mathématique classique et est rapide et prévisible. OKLCH est un espace perceptuellement uniforme, donc une palette construite en lui maintient une luminosité perçue plus uniforme sur toutes les teintes au lieu que certaines couleurs ne paraissent accidentellement plus sombres ou plus claires que les autres.
Pourquoi modifier « couleurs dans la palette » n'affecte-t-il que certaines harmonies ?
Complémentaire, complémentaire divisé, triadique et tétradique sont définis par défaut : deux, trois, trois et quatre couleurs respectivement. Le nombre ne contrôle que analogique et monochromatique, qui peuvent raisonnablement avoir n'importe quel nombre de couleurs.
Que signifie la coche ou la croix AA à côté de chaque couleur ?
C'est le rapport de contraste WCAG de cette couleur utilisée comme texte sur un fond blanc et sur un fond noir, avec une coche lorsqu'il dépasse le seuil AA de 4.5:1 et une croix lorsqu'il ne le dépasse pas.
Ma couleur est-elle téléchargée quelque part ?
Non. La palette est générée entièrement dans votre navigateur : rien de ce que vous tapez n'est envoyé à un serveur.