Le Générateur de Palette de Couleurs transforme une teinte de départ en un ensemble terminé de couleurs harmonieuses. Vous choisissez un mode d’harmonie et une teinte de base, et le générateur place les couleurs compagnes pour vous : la vue par défaut est un couple complémentaire, le bleu #428CD7 et l’orange #D78C42, calculé dès le chargement de la page. Tout se passe dans le navigateur, donc les palettes que vous construisez restent sur votre appareil.
Cinq modes d’harmonie, un curseur
Les cinq boutons de mode sont le cœur de l’outil. Le complémentaire donne 2 couleurs, la teinte de base et la teinte à 180 degrés. L’analogue donne 4, à 30 et 60 degrés d’un côté et 30 degrés de l’autre. Le triadique donne 3, espacées de 120 degrés. Le tétradique donne 4, à 90, 180 et 270 degrés. Le complémentaire divisé donne 3, à 150 et 210 degrés. Le curseur de teinte va de 0 à 360 et est par défaut à 210, un bleu moyen, et tous les décalages tournent autour de la roue, donc une base de 340 en mode analogue produit des teintes à 340, 10, 40 et 310.
Saturation et luminosité fixes, 65 et 55
Il n’y a pas de curseurs de saturation ni de luminosité, car les deux sont des constantes : chaque couleur que l’outil produit est calculée à 65% de saturation et 55% de luminosité, et seule la teinte change, d’un mode à l’autre et en faisant glisser le curseur. Cela garde toutes les couleurs de la palette au même poids visuel, donc le set se lit comme une famille et non comme un assortiment au hasard. La conversion elle-même est l’algorithme standard du HSL vers l’hexadécimal, et le résultat est toujours un code hex de 7 caractères en majuscules, comme #428CD7.
La palette se met à jour en direct
Il n’y a pas de bouton générer. La palette est recalculée à chaque fois que vous cliquez sur un bouton de mode ou que vous déplacez le curseur, donc les échantillons suivent votre saisie sans étape intermédiaire. Cliquez sur tétradique et vous avez immédiatement quatre échantillons au lieu de deux ; décalez la teinte de quelques degrés et tous les échantillons bougent dans le même sens. Cela rend l’exploration rapide : vous pouvez balayer toute la roue en quelques secondes et vous arrêter là où le set a l’air juste.
Le bouton d’aléa
Le bouton dé choisit une teinte entière entre 0 et 359, fait sauter le curseur dessus et conserve le mode déjà choisi, puis la palette se recalcule exactement comme si vous aviez glissé le curseur là vous-même. C’est un moyen rapide de secouer une couleur vers laquelle vous ne cessez de revenir : lancez quelques fois jusqu’à ce qu’une teinte de base accroche, puis affinez à la main avec le curseur.
Copier les couleurs, une à une ou toutes d’un coup
Un clic sur un échantillon copie cette seule valeur hex dans votre presse-papiers, par exemple #8C42D7 du set analogue à la teinte 210. Le bouton tout copier copie à la place toute la palette en liste séparée par des virgules, comme #428CD7, #D78C42 pour le couple complémentaire par défaut. Les valeurs sont toujours des hex de six chiffres en majuscules, qui se collent directement dans CSS, dans des fichiers de design ou dans un message, sans aucune remise en forme.
Pourquoi l’étiquette d’un échantillon bascule entre blanc et sombre
Chaque échantillon affiche sa valeur hex au survol, en texte blanc ou presque noir selon la clarté du fond. La vérification est un score de luminance simple : les canaux rouge, vert et bleu sont pondérés 0.299, 0.587 et 0.114, et si le score est strictement supérieur à 186 l’étiquette utilise un texte sombre, sinon blanc. C’est une heuristique de brillance rapide, pas un ratio de contraste WCAG : elle garde l’étiquette lisible, mais elle ne dit pas si du texte sur cette couleur passerait les seuils d’accessibilité.
Ce que l’outil garde, et où aller ensuite
Rien n’est stocké et rien ne quitte votre navigateur ; le mode et la teinte ne vivent que sur la page, et un rechargement ramène l’outil au mode complémentaire à la teinte 210. Quand vous avez une palette qui vous plaît, mettez-la au travail : utilisez le Convertisseur de Couleurs pour transformer les valeurs hex en rgb() ou hsl() dans votre feuille de style, passez les combinaisons premier plan et fond au Vérificateur de Contraste de Couleur WCAG avant de les figer en texte, et confiez le set au Générateur de Dégradé CSS si vous voulez l’étirer en bannière. Pour la méthode complète derrière ces vérifications, le guide du vérificateur de contraste détaille les quatre seuils pas à pas.