Sélecteur de couleurs et générateur de palettes

Une couleur à l'écran peut se décrire de trois façons, et cet outil les garde toutes synchronisées : le HEX est la notation abrégée utilisée en CSS et dans les outils de design ; le RGB indique combien de lumière rouge, verte et bleue se combinent pour produire la couleur ; et le HSL (teinte, saturation, luminosité) la décrit comme on la pense naturellement : quelle nuance, avec quelle intensité, plus ou moins claire. Faites glisser le sélecteur natif, saisissez un code HEX ou ajustez directement un champ R/V/B ou T/S/L : tous les autres champs se mettent à jour instantanément, et vous passez d'une manière de penser la couleur à l'autre sans faire le moindre calcul.

Le cercle chromatique est à la base de six règles d'harmonie classiques, toutes générées automatiquement à partir de la couleur de base choisie. La complémentaire associe une couleur à son opposée pour un contraste maximal ; l'analogue retient les voisines sur le cercle pour un rendu calme et cohérent ; la triadique et la tétradique répartissent trois ou quatre couleurs à égale distance pour une palette vivante mais équilibrée ; la complémentaire divisée adoucit le duo complémentaire en utilisant les deux couleurs voisines de l'opposée plutôt que l'opposée elle-même ; enfin la monochromatique reste sur une seule teinte en ne faisant varier que la luminosité, souvent le choix le plus sûr pour une interface qui a besoin d'une couleur de marque déclinée en plusieurs nuances.

Toutes les bonnes palettes ne partent pas de la théorie des couleurs : parfois, on veut simplement voir ce qui sort. Le générateur aléatoire (barre d'espace ou bouton Générer) produit cinq couleurs à la fois, avec des teintes et des luminosités réglées pour éviter les résultats ternes ou trop pastel. Cliquez sur le cadenas d'une pastille à conserver, puis régénérez : seules les couleurs non verrouillées changent, ce qui permet de construire une palette pas à pas, à la manière d'outils comme Coolors. Cliquez sur une pastille pour copier son code HEX, ou utilisez les boutons sous la palette pour copier l'ensemble en propriétés CSS personnalisées, variables SCSS, extrait de config Tailwind ou tableau JSON, ou exporter un fichier de nuancier Adobe .ase pour Illustrator et Photoshop. Vous pouvez aussi extraire une palette de n'importe quelle image (traitée localement, jamais envoyée) et enregistrer vos palettes favorites dans votre navigateur pour plus tard.

Choisir une belle couleur ne revient pas à choisir une couleur utilisable : un texte dont la luminosité est trop proche de celle de son arrière-plan peut devenir illisible, et les Web Content Accessibility Guidelines (WCAG) fixent des seuils précis : un rapport de contraste d'au moins 4,5:1 pour un texte normal afin d'atteindre le niveau AA, et 7:1 pour le niveau AAA, plus strict. Le vérificateur de contraste calcule le rapport exact entre la couleur choisie et un texte blanc ou noir, avec la même formule de luminance relative que celle définie par les WCAG, et indique si chaque combinaison est conforme : vous repérez ainsi un bouton ou un titre peu contrasté avant sa mise en ligne plutôt qu'après.