Utiliser un générateur de dégradé sans ressembler à tout le monde

Un générateur de dégradé est un outil qui construit un dégradé pour vous : vous choisissez ou tirez au hasard des couleurs, vous réglez une direction, et il exporte du code CSS ou une image. C’est le moyen le plus rapide d’obtenir un beau mélange. C’est aussi la raison pour laquelle tant de sites, de posts et de présentations partagent les mêmes fonds violet-rose ou bleu-cyan. Le générateur n’est pas le problème. Le problème, c’est de garder sa première réponse.

Ce guide explique pourquoi les résultats des générateurs finissent par converger, puis passe en revue six retouches qui rendent le vôtre unique. Pour certaines, il vous faudra les bases des dégradés linéaires en CSS.

Ce que fait vraiment un générateur de dégradé

La plupart des générateurs font trois choses. Ils choisissent deux couleurs ou plus, avec un sélecteur, un tirage aléatoire ou une bibliothèque de palettes populaires. Ils définissent un type et une direction, en général linéaire selon un angle. Et ils écrivent le code, le plus souvent une seule valeur linear-gradient(), parfois avec un export PNG ou SVG. Quelques outils plus récents produisent des dégradés maillés ou des blobs, et certains acceptent une description écrite.

Pourquoi tous les résultats se ressemblent

• Deux arrêts par défaut. Les mélanges à deux couleurs sont les plus simples à générer et les plus faciles à reconnaître comme génériques.
• Le même angle. 135 degrés, du haut gauche vers le bas droit, est un réglage courant qui ne convient à presque rien en particulier.
• Des palettes populaires. Les bibliothèques mettent en avant les combinaisons les plus copiées, si bien que les dégradés les plus utilisés le sont de plus en plus.
• Une saturation maximale. Les sélecteurs aléatoires et les préréglages penchent vers des couleurs vives, impressionnantes en miniature et agressives derrière du texte.
• Aucune matière. Un dégradé nu est lisse, numérique et plat. Presque tous les dégradés générés ont ce même fini.

Aucun de ces points n’est une erreur pris seul. Ensemble, ils produisent un style qui appartient à tout le monde, soit le contraire de ce dont une marque a besoin. Le dégradé dans l’identité de marque explique pourquoi cela compte au-delà du goût.

Six retouches pour s’approprier un dégradé généré

1. 1

   Partez de vos couleurs

   Collez les couleurs de votre marque, ou des couleurs prélevées sur une photo que vous aimez, plutôt que de tirer des couleurs au hasard. Extraire une palette d’une image est une bonne source.

2. 2

   Ajoutez un troisième arrêt et déplacez-le

   Une couleur intermédiaire proche placée à 40 % ou 60 %, et non à 50 %, donne une forme au mélange. Il penche désormais d’un côté, ce qui se lit comme de la lumière plutôt que comme un aplat.

3. 3

   Changez l’interpolation

   Mélanger en OKLCH garde des couleurs vives au milieu et évite les zones grises. Voir les dégradés OKLCH.

4. 4

   Adaptez la direction à la mise en page

   Dirigez la lumière vers le contenu. Une chute verticale convient à une story, un horizon bas à une bannière, une lueur radiale à une photo de produit.

5. 5

   Ajoutez du grain ou une matière

   Une fine couche de bruit masque le banding et donne du relief à la surface. C’est le moyen le plus rapide de passer du numérique au tactile.

6. 6

   Recadrez, ne vous contentez pas de remplir

   Utilisez une portion d’un dégradé plus grand, ou agrandissez-le pour que seule une transition douce reste visible. Le recadrage change davantage l’effet que le changement de couleurs.

Du résultat du générateur au code de production

Les générateurs exportent souvent plus que nécessaire, ou moins. Vérifiez le code avant de le coller : les navigateurs actuels n’ont plus besoin de préfixes propriétaires pour les dégradés, et il est utile d’ajouter une couleur unie de secours pour le rare cas où le dégradé ne s’afficherait pas.

/* Edited generator output: solid fallback, own colours, OKLCH blend */
.hero {
  background-color: #1e2a5a;
  background-image: linear-gradient(in oklch 170deg, #1e2a5a 0%, #4f46e5 60%, #f0abfc 100%);
}

Si le dégradé sert dans un e-mail, une image pour les réseaux sociaux ou un document imprimé, exportez une image plutôt que du CSS. Pour les images, générez à la taille finale, ajoutez du grain avant l’export et enregistrez en PNG pour éviter les bandes de compression.

Testez avant de publier

La plupart des dégradés échouent sur le contraste, pas sur la couleur. Placez votre vrai titre dessus et vérifiez-le au point le plus clair derrière le texte. Le texte sur un dégradé explique comment faire.

Quand un générateur ne suffit pas

Un générateur vous donne de la couleur. Il ne vous donne pas une surface avec de la matière, de la lumière et du mouvement, et il ne peut pas garantir que personne d’autre n’utilise le même résultat. Si vous voulez un dégradé qui vous appartient, il faut quelque chose qui le compare à ceux de tous les autres.

C’est ainsi que fonctionne la Forge de Gradiently. Décrivez un style en une phrase ou construisez-le réglage par réglage : jusqu’à huit couleurs, jusqu’à trois matières superposées, lumière, grain et mouvement. Avant qu’un nouveau Mark soit publié, il est comparé à tous les autres Marks, et tout ce qui s’en approche trop est refusé. Le résultat s’affiche en direct derrière vos créations, et il peut avoir un seul propriétaire.

GR·M0K1·EJ

Veiled Salon

Voir ce Mark