Générer une palette complète à partir d’une seule couleur de marque

Le rebranding est livré, et la marque arrive sous la forme d’une seule couleur approuvée — disons le bleu #2563eb — plus un logo, une police et un jeu d’images d’ambiance. Puis quelqu’un ouvre le backlog produit : états au survol, boutons désactivés, bordures de champs, rayures de tableau, un toast de succès, un état d’erreur, des séries de graphique, un thème sombre. Dix échelons d’une rampe de marque, dix neutres, quatre couleurs fonctionnelles avec leurs propres rampes, environ dix-sept rôles sémantiques par surface — l’interface a besoin d’une centaine de valeurs liées, et la charte n’en nomme qu’une seule. C’est dans cet écart que la plupart des rebrandings rencontrent leur premier ticket d’ingénierie.

On peut combler cet écart par dérivation : une seule couleur de marque peut générer une palette complète dans un ordre fixe — (1) la couleur de départ devient sa propre rampe de dix échelons, (2) une échelle de neutres est construite sur la même logique de luminosité avec un soupçon de la teinte de marque, (3) des candidats de couleurs complémentaires sont proposés à partir de la géométrie de teinte de la couleur de départ, (4) les quatre couleurs fonctionnelles sont accordées au niveau de saturation de la palette, et (5) les rôles sémantiques sont attribués face à des planchers de contraste. La génération vous amène à un 80 % cohérent — les décisions restantes relèvent du jugement de conception. Cet article parcourt la dérivation dans l’ordre ; la mécanique de rampe qui la sous-tend est détaillée dans notre guide des échelles de couleur.

Comment un seul hex devient-il une rampe ?

Étape un. #2563eb se convertit en oklch(0.546 0.215 262.9), et chaque coordonnée alimente une partie différente de la rampe. La teinte, 262,9°, est maintenue sur les dix échelons. Le chroma, 0,215, devient le pic de saturation de la rampe, la couleur s’estompant vers les extrémités. Les échelons eux-mêmes vont d’un L ≈0,97 quasi blanc (#F1F5FE) jusqu’à L ≈0,25 (#192233) le long d’une courbe de luminosité — et la luminosité propre de la couleur de départ, 0,546, se situe entre les 500 générés (L ≈0,63) et 600 (L ≈0,52). La rampe encadre la couleur de marque plutôt que de nécessairement la reproduire, et lequel de ces deux échelons sert de cœur de travail est l’une des décisions de jugement qui viennent plus tard.

D’où vient l’échelle de neutres ?

Étape deux. Les neutres réutilisent la même machinerie de luminosité à une saturation quasi nulle — quasi nulle, pas nulle : un soupçon de chroma orienté vers la teinte de marque (262,9° ici), car les gris purs à canaux égaux tendent à paraître détachés à côté d’une palette colorée. Le résultat est dix gris qui penchent imperceptiblement vers le bleu, si bien que les pages, les cartes et les bordures — la majorité des pixels d’une interface — appartiennent à la même famille que la rampe de marque. Le neutre hérite de sa structure de la couleur de départ ; sa température reste une décision qu’un concepteur peut outrepasser.

D’où viennent les couleurs complémentaires ?

Étape trois, et le moment où la dérivation devient visible. À partir de la position de la couleur de départ sur la roue des teintes, Scale Composer propose quatre candidats complémentaires — des rotations de la teinte de marque, chacune également atténuée en luminosité ou en chroma pour qu’elle soutienne plutôt qu’elle ne rivalise :

Dériver de la géométrie de la roue est le geste classique du schéma de couleurs — des relations entre angles de teinte tenant lieu de parenté visuelle — et sa limite honnête va de pair : la géométrie garantit que les candidats sont liés à la couleur de marque, pas qu’ils sont justes pour la marque. Ces quatre-là sont des propositions qu’un concepteur doit curer — garder le bronze et écarter le reste, ou n’en garder aucun. Chacune qui survit devient une rampe complète à part entière, sur la même machinerie que celle de la marque.

Ouvrez toute la dérivation à partir de ce bleu dans Scale Composer — la couleur de départ, sa rampe, les neutres teintés, les quatre propositions complémentaires et les couleurs fonctionnelles, toutes générées à partir du hex unique.

Qu’advient-il de succès, avertissement, erreur et info ?

Étape quatre. Les quatre intentions fonctionnelles conservent leurs teintes conventionnelles — les utilisateurs arrivent déjà entraînés au vert, à l’ambre, au rouge et au bleu — mais leur saturation est accordée au niveau de la palette, si bien qu’une marque discrète donne des couleurs fonctionnelles qui murmurent plutôt qu’elles ne crient, et qu’une marque éclatante en donne quatre capables de tenir leur rang. Chacune est générée comme une rampe complète, car un état d’erreur a besoin d’une teinte pâle, d’un cœur de force moyenne et d’un échelon de texte lisible — pas d’un seul rouge.

Où interviennent les rôles et les vérifications de contraste ?

L’étape cinq est celle où les couleurs reçoivent des tâches. Environ dix-sept rôles sémantiques sont dérivés par surface — arrière-plan, niveaux de texte superposés, bordures, couleurs d’action — avec des planchers de contraste WCAG imposés et APCA vérifié en parallèle. Une variante sombre est dérivée plutôt qu’inversée, sur sa propre courbe de luminosité avec un renfort de chroma d’environ 20 %, car un environnement sombre atténue la coloration perçue. Cette étape fait passer la palette d’une image à un artefact : le résultat s’exporte en variables DTCG, CSS, Tailwind ou Figma, avec le hex à côté.

Que faut-il encore confier à un concepteur ?

Les 20 % restants se concentrent dans quelques décisions nommées. Quels candidats complémentaires survivent — aucun générateur ne sait si le produit a besoin d’une teinte d’illustration ou d’une deuxième série de données. Si le cœur de marque de travail est le 500 ou le 600 — le contraste du texte blanc en décide généralement. À quel point les neutres doivent sembler chauds. À quel point les quatre couleurs fonctionnelles peuvent être fortes dans ce produit précis. La dérivation garantit que la palette est cohérente ; seul le jugement peut la rendre juste. Ce que la dérivation apporte au-delà de la vitesse, c’est que tout le système reste une fonction de sa couleur de départ — ce qui le rend ré-exécutable.

Et cette propriété est la chose la plus rapide à tester. Changez la couleur de départ et regardez le système re-dériver — remplacez le bleu par une autre couleur de marque et chaque étape ci-dessus se recalcule : rampe, neutres, propositions complémentaires, relations de contraste. Une palette construite ainsi, c’est une décision plus de la curation, et l’outil rend la première partie instantanée pour que la seconde reçoive l’attention.