Créer un dégradé en 10 étapes entre les couleurs de la marque

1. Auditer les deux couleurs de marque

Commencez par deux couleurs établies plutôt que de choisir des points terminaux attrayants sans contexte. La couleur A pourrait être la couleur principale de la marque, tandis que la couleur B pourrait être une couleur de soutien ou de campagne. Enregistrez où chacune d'elles apparaît actuellement et ce qu'elle communique.

Si les directives de marque existent uniquement dans un ancien PDF et que vous devez travailler avec le texte qui l'accompagne, le convertisseur PDF en Word peut créer un document éditable. Les valeurs converties doivent toujours être comparées avec le fichier de marque original car la conversion ne vérifie pas si un code de couleur est actuel ou correct.

Si un point terminal n'a pas encore été approuvé, utilisez le générateur de palette de couleurs pour explorer les combinaisons avant de commencer l'exercice de mélange. Ne créez pas un dégradé détaillé entre deux couleurs qui sont toujours en débat.

Cet audit empêche un problème courant, la création d'un dégradé poli à partir d'une couleur de logo obsolète, d'une valeur de campagne non approuvée ou d'un code copié à partir d'une capture d'écran compressée.

2. Préparer les points terminaux HEX valides

Le mélangeur de couleurs utilise les valeurs HEX comme points terminaux. Chaque valeur HEX à six chiffres commence par un symbole de hachage et contient des paires représentant le rouge, le vert et le bleu. Par exemple, #2563EB est un bleu fort et #E11D48 est un rouge-rose vivant.

Copiez les valeurs à partir d'un fichier de marque faisant autorité, d'une bibliothèque de système de conception ou du code source. Évitez d'échantillonner une capture d'écran du logo lorsqu'un code officiel est disponible. La compression d'image, les paramètres d'affichage et la gestion des couleurs peuvent légèrement modifier la valeur que vous collectez à partir d'une capture d'écran.

Placez chaque point terminal sur les arrière-plans blanc, gris clair, charbon et noir. Cela ne teste pas encore le dégradé complet, mais cela révèle si un point terminal devient visuellement faible dans un contexte courant.

Donnez aux points terminaux des noms de travail temporaires tels que brand-start et brand-end. Évitez de les nommer "gauche" et "droite" car la direction du dégradé peut changer plus tard. Les couleurs doivent conserver leur identité même lorsque le dégradé devient vertical, diagonal ou radial.

3. Générer un dégradé en dix étapes

Ouvrez le mélangeur de couleurs, entrez la couleur A et la couleur B et réglez le nombre d'étapes sur dix. Générez le résultat et copiez chaque valeur affichée dans un document de travail dans son ordre original.

Avant de nommer les arrêts, regardez la transition complète comme une bande. Est-ce qu'elle se sent continue, ou une région semble-t-elle sauter soudainement? Le milieu devient-il terne? Un point terminal est-il visuellement beaucoup plus fort que l'autre?

Une séquence mathématiquement égale ne paraît pas toujours visuellement égale. Un jaune vif peut paraître plus léger et plus énergique qu'un bleu foncé même lorsque les pourcentages de mélange sont distribués de manière égale. La luminosité perçue, la teinte et la saturation influencent tous comment la séquence se ressent.

L'exemple suivant montre comment dix valeurs pourraient être documentées entre deux points terminaux d'exemple. Vos résultats dépendront des couleurs sélectionnées et de la méthode d'interpolation utilisée par l'outil ou l'application de conception.

4. Inspecter le point médian et le chemin de transition

Le point médian mérite une attention particulière car il révèle comment les deux couleurs de marque interagissent. Lorsque le bleu et le rouge-rose sont mélangés, le centre peut se déplacer à travers le violet. D'autres combinaisons peuvent créer des résultats moins prévisibles. Les couleurs complémentaires, par exemple, peuvent produire des valeurs intermédiaires atténuées.

Ne jugez pas le point médian uniquement en tant que grande nuance isolée. Placez-le entre les arrêts voisins, puis testez-le dans un composant réaliste. Une couleur qui semble inintéressante en elle-même peut fournir exactement la transition nécessaire dans un graphique ou une illustration.

Comparez le point médian généré avec une superposition simple à 50 pour cent dans votre logiciel de conception. Les valeurs peuvent différer car les applications peuvent interpoler les couleurs dans différents espaces ou appliquer la transparence différemment. Utilisez le flux de travail qui correspond à l'environnement de production final.

Étiquetez le point médian comme accepté, ajustable ou rejeté. S'il devient trouble, décidez d'abord si cette région atténuée est utile. Un centre atténué peut fournir un repos visuel entre les points terminaux vifs. S'il affaiblit la conception, envisagez d'ajouter un arrêt intermédiaire intentionnel plutôt que de changer les couleurs de marque officielles.

5. Supprimer les arrêts faibles ou troubles

Dix arrêts générés ne signifie pas que tous les dix doivent devenir des jetons de conception permanents. L'exercice utilise dix valeurs pour rendre la transition visible. Le système final ne devrait conserver que les couleurs qui résolvent un problème récurrent.

Comparez chaque arrêt avec celui qui le précède et celui qui le suit. Si deux valeurs sont presque impossibles à distinguer à la taille de composant normal, elles n'auront peut-être pas besoin de noms séparés. Si une valeur intermédiaire perd trop de saturation, décidez si elle fonctionne en tant que couleur de soutien atténuée ou devrait être supprimée.

Testez la séquence en niveaux de gris. Cela révèle la progression de la luminosité sans la distraction de la teinte. Si plusieurs couleurs adjacentes s'effondrent dans le même gris, elles n'offrent peut-être pas une séparation tonale suffisante pour les graphiques ou la visualisation des données.

Ne "réparez" pas chaque transition inhabituelle. L'objectif du mélange de deux couleurs de marque est de découvrir comment elles se rapportent. Parfois, la conclusion correcte est qu'elles ne devraient pas former un dégradé continu. Elles peuvent fonctionner mieux en tant que couleurs solides séparées avec une transition neutre entre elles.

6. Créer un système de nommage prévisible

Une fois que les arrêts ont été examinés, attribuez des noms stables. Le système le plus simple numérote les couleurs selon leur position, telles que blend-01 jusqu'à blend-10. Cela préserve la séquence mais ne décrit pas comment chaque valeur devrait être utilisée.

Un système plus fort sépare les valeurs brutes des rôles sémantiques. Les jetons bruts enregistrent la séquence de couleurs complète. Les jetons sémantiques relient les couleurs sélectionnées à les responsabilités telles que l'arrière-plan de campagne, le début du graphique, le point médian du graphique ou l'accent d'illustration.

:root {
  --blend-01: #2563eb;
  --blend-02: #3a5bd9;
  --blend-03: #4f53c7;
  --blend-04: #644cb5;
  --blend-05: #7944a3;
  --blend-06: #8d3c90;
  --blend-07: #a2347e;
  --blend-08: #b72d6c;
  --blend-09: #cc255a;
  --blend-10: #e11d48;

  --campaign-gradient-start: var(--blend-01);
  --campaign-gradient-middle: var(--blend-06);
  --campaign-gradient-end: var(--blend-10);
}

Si vous maintenez une grande liste de jetons ou d'étiquettes d'utilisation, l' outil d'alphabétisation peut trier la liste de référence et supprimer les lignes en double accidentelles. N'alphabétisez pas la séquence dégradé numérotée elle-même, car son ordre visuel doit rester intact.

7. Attribuer des rôles de conception utiles

Une séquence de dégradé devient précieuse lorsque ses arrêts peuvent être réutilisés de manière cohérente. Attribuez des rôles basés sur le projet plutôt que de chercher une utilisation artificielle pour chaque couleur.

Les points terminaux peuvent rester les couleurs principales de marque. Les valeurs intermédiaires pourraient soutenir une échelle de graphique, une série d'illustrations, un indicateur de progression ou un système de campagne. Un point médian plus doux peut fonctionner comme une grande zone décorative, tandis qu'un arrêt plus fort peut mettre en évidence une statistique importante.

Évitez d'utiliser un dégradé de marque continu pour représenter des données ordonnées à moins que la séquence reste distinguable et significative. Les utilisateurs doivent être en mesure de comprendre les différences entre les valeurs. Lorsque le dégradé est décoratif, il y a plus de liberté, mais lorsqu'il communique des informations, la clarté prend la priorité.

8. Tester la direction du dégradé et la typographie

Les mêmes couleurs peuvent créer des impressions différentes lorsque la direction change. Un dégradé horizontal peut suggérer un mouvement dans une page. Un dégradé vertical peut créer de la profondeur. Une direction diagonale se sent souvent plus énergique, tandis qu'un dégradé radial attire l'attention vers un point central.

Le guide officiel de Figma sur l'utilisation des dégradés comme remplissages ou traits décrit les types de dégradés linéaires, radiaux, angulaires et en losange. Testez plus d'un type, mais choisissez la version qui soutient la composition plutôt que l'option la plus visuellement dramatique.

Ajoutez un vrai titre, un paragraphe et un bouton au dégradé. Testez le blanc, le charbon et d'autres couleurs de texte approuvées à plusieurs positions. Une couleur de texte peut être lisible sur la couleur A et échouer à mesure que l'arrière-plan se rapproche de la couleur B.

Les expériences de texte décoratives peuvent être explorées avec le générateur de texte fantaisiste, mais le texte stylisé Unicode ne devrait pas remplacer la véritable typographie dans les titres importants, la navigation ou le contenu web accessible. Utilisez-le seulement pour l'exploration créative limitée et gardez le message final lisible.

Lorsqu'une seule couleur de texte ne peut pas fonctionner sur le dégradé entier, n'arrêtez pas de changer la couleur du texte de mot en mot. Ajoutez un panneau solide, repositionnez le contenu ou réservez le dégradé pour une zone sans texte essentiel.

9. Implémenter le dégradé en CSS

Une fois que la direction et les arrêts sont approuvés, créez la version web en utilisant CSS. MDN définit linear-gradient() en tant que fonction CSS qui produit une transition progressive entre deux ou plusieurs couleurs le long d'une ligne droite.

.brand-gradient {
  background-color: #2563eb;
  background-image: linear-gradient(
    135deg,
    #2563eb 0%,
    #4f53c7 22%,
    #7944a3 44%,
    #a2347e 66%,
    #cc255a 84%,
    #e11d48 100%
  );
}

La background-color solide fournit un repli. Les arrêts de dégradé sélectionnés sont placés délibérément plutôt que d'ajouter automatiquement les dix valeurs. L'utilisation de moins d'arrêts en CSS ne rend pas la exploration en dix étapes invalide, elle montre que le processus d'examen a identifié les valeurs nécessaires pour l'effet final.

CSS-Tricks propose un guide détaillé sur les dégradés CSS couvrant les directions, les arrêts de couleur, les dégradés radiaux, les dégradés répétés et les modèles d'implémentation connexes.

Testez l'implémentation dans les navigateurs et appareils pertinents pour le projet. Comparez le résultat CSS en direct avec le fichier de conception approuvé. De légères différences peuvent devenir visibles en raison des paramètres d'affichage, des profils de couleurs, du rendu du navigateur et des méthodes d'exportation.

10. Tester, documenter et exporter le système

Un dégradé n'est pas fini quand il a l'air attrayant sur un écran. Testez-le aux tailles grande et petite, avec et sans texte, sur les surfaces claires et sombres environnantes et sur les écrans de qualité inférieure.

Recherchez le banding visible, le contraste faible, les régions troubles inattendues et les couleurs intermédiaires qui semblent sans rapport avec les points terminaux. Testez également une image statique exportée car les plateformes sociales et les logiciels de présentation peuvent la compresser ou la traiter différemment d'un arrière-plan CSS en direct.

Créez une spécification de dégradé d'une page contenant les deux points terminaux, tous les dix arrêts générés, les arrêts de production conservés, la direction approuvée, les utilisations approuvées et les utilisations interdites. Ajoutez des exemples montrant le dégradé avec la vraie typographie et le contenu des composants.

Si chaque page de spécification est préparée en JPG, le convertisseur JPG en PDF peut les combiner en un seul document ordonné. Ouvrez le PDF exporté et comparez les couleurs avec la conception originale avant de la partager avec un client ou une équipe de développement.