# Texture de marque : la matière qui rend un style appropriable

[Canonical HTML page](https://gradiently.design/fr/guide/brand-texture)

La couleur et la typographie se prélèvent facilement. La texture, c’est-à-dire le grain, le reflet et la lumière d’une surface, est bien plus difficile à copier et en dit étonnamment long sur une marque.

## The short version

- La texture de marque est la qualité matérielle des surfaces d’une marque, comme le grain, le grain du papier, un reflet vitreux ou une lumière douce.
- La texture change le ressenti d’une couleur : le même violet évoque le cinéma sur du grain, la technologie sur du verre et le luxe sur de la soie.
- Une texture est plus difficile à copier qu’un code hex, car c’est une combinaison de matière, de lumière et d’échelle plutôt qu’une valeur unique.
- Une bonne texture de marque est assez discrète pour se placer derrière des mots et assez constante pour être reconnue dans tous les formats.
- Le grain masque aussi les effets d’escalier dans les dégradés, il améliore donc la qualité autant que le caractère.

La **texture de marque** est la qualité matérielle de tout ce qu’une marque pose sur une surface : le grain d’un fond, le grain d’un papier, le reflet du verre, la direction et la douceur de la lumière. C’est la différence entre une couleur sur un écran et une couleur sur quelque chose. Deux marques peuvent partager une palette et une police, mais si l’une repose sur un fin grain de pellicule et l’autre sur un verre net, personne ne les confondra.

La texture est aussi l’une des rares parties d’un style qui résiste à la copie. N’importe qui peut lire vos codes hex sur une capture d’écran. Reproduire votre grain exact, sa taille, sa densité, la façon dont la lumière le traverse, est bien plus difficile, ce qui en fait un excellent candidat pour la signature de votre [identité visuelle](https://gradiently.design/fr/guide/visual-identity).

## Ce que la texture apporte à une marque

La texture porte des associations que l’on saisit instantanément, bien avant de lire un mot. Elle répond à des questions comme : est-ce fait main ou conçu par des ingénieurs, chaleureux ou froid, quotidien ou exceptionnel ?

| Famille de texture | Évoque | Convient à |
| --- | --- | --- |
| Fin grain de pellicule | Argentique, éditorial, réfléchi | Studios, éditeurs, photographes, musique |
| Grain du papier | Artisanal, imprimé, calme | Artisans, boulangeries, papeterie, bien-être |
| Reflet vitreux | Précis, numérique, moderne | Logiciels, fintech, lancements de produits |
| Lumière de soie ou de satin | Doux, luxueux, sensuel | Beauté, joaillerie, mode, hôtels |
| Aplat net | Direct, graphique, audacieux | Campagnes, sport, marques jeunes |

Cinq familles de textures courantes et le ressenti que chacune apporte. L’aplat est aussi un choix de texture : l’absence de matière dit quelque chose.

Aucune n’est meilleure qu’une autre. Ce qui compte, c’est que la texture soit en accord avec ce que vous dites de vous. Une marque qui parle d’artisanat lent et publie sur du verre brillant envoie un message contradictoire. [La personnalité de marque](https://gradiently.design/fr/guide/brand-personality) est un bon point de départ si vous ne savez pas ce que la vôtre doit dire.

## Grain, matière et lumière : les trois couches

La plupart des textures riches sont construites en trois couches. Les penser séparément fait de la texture quelque chose que l’on conçoit délibérément, plutôt qu’un filtre appliqué à la fin.

1. **Matière** Le comportement de base de la surface : la façon dont la couleur y circule. Des fondus lisses, des plis doux, des formes liquides ou des facettes nettes.
2. **Lumière** D’où elle vient et quelle est sa dureté. Une lumière douce venue d’un coin donne de la profondeur ; un éclairage uniforme paraît plat et numérique.
3. **Grain** Le fin bruit par-dessus. Un peu rend une surface réelle et masque les effets d’escalier ; trop paraît sale et gêne les mots.

- Uniforme, sans source de lumière: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Lumière douce, en haut à droite: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Lumière chaude, en bas à gauche: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

Une même famille de couleurs sous trois types de lumière. La lumière seule change l’ambiance avant même l’ajout de grain.

Pour la couche de grain sur le web, un minuscule bruit SVG posé sur le fond suffit. Gardez une opacité faible ; on doit le sentir plus que le voir.

```css
.brand-surface {
  position: relative;
  background: radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%);
}

.brand-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Un dégradé éclairé avec une fine couche de bruit par-dessus. Augmentez `baseFrequency` pour un grain plus fin, baissez `opacity` pour un grain plus discret.

[Les dégradés granuleux](https://gradiently.design/fr/guide/grainy-gradients) propose d’autres recettes de grain, et [l’effet d’escalier dans les dégradés](https://gradiently.design/fr/guide/gradient-banding) explique pourquoi le bruit est aussi la solution standard aux bandes visibles dans les fondus lisses.

## Comment choisir votre texture de marque

- **Partez d’un mot.** Écrivez le ressenti unique que vous voulez transmettre, comme «  artisanal » ou «  précis », et choisissez la famille qui lui correspond.
- **Testez-la derrière des mots.** La texture vit sous les titres, les prix et les dates. Si elle les rend plus difficiles à lire sur téléphone, elle est trop forte.
- **Vérifiez-la aux deux extrêmes.** Regardez-la sur une story 1080×1920 et sur une carte de visite 1050×600. Un grain juste en grand peut tourner à la bouillie en petit.
- **Vérifiez-la à l’impression.** Un grain superbe à l’écran peut ressembler à un défaut d’impression sur papier. Imprimez un flyer A5 avant de vous engager.

Une publication portrait de boulangerie indiquant Du pain au levain, chaque matin, sur un fond doucement texturé

Une surface plus douce pour une boulangerie : la matière peut dire fait main avant les mots.

Une publication portrait de fintech indiquant Paiements réglés en quelques secondes, sur un autre fond texturé

Un autre Mark pour un produit fintech. Même mise en page, une tout autre marque.

## Les erreurs qui donnent un air bon marché à la texture

### À éviter

- Une photo de papier de banque d’images collée sous tout
- Un grain lourd qui rend le texte flou
- Une texture différente sur chaque plateforme
- De la texture derrière les mots, de l’aplat partout ailleurs
- Une seule image texturée redimensionnée à tous les formats

### À faire

- Une texture construite avec matière, lumière et grain
- Un grain assez fin pour être senti, pas remarqué
- Une seule surface pour le fil, le site et l’imprimé
- La même surface sur chaque cadre
- Rendre la texture à neuf pour chaque format

Le dernier point piège beaucoup de marques. Quand une image texturée est étirée d’une publication carrée à une large bannière, le grain s’étire aussi et la lumière tombe à un endroit étrange. Une texture doit être rendue à la taille où elle est utilisée, ce que traite aussi [la texture de fond](https://gradiently.design/fr/guide/background-texture).

## Faire d’une texture la vôtre

Une surcouche de bruit gratuite est à la portée de tous, et c’est justement le problème : plus une texture devient populaire, moins elle parle de vous. Pour qu’une texture soit appropriable, il faut une combinaison précise que personne d’autre n’utilise.

C’est pour cela qu’est conçu un Mark Gradiently. Chaque Mark est une recette de couleurs, jusqu’à trois matières superposées, de lumière, de grain et de mouvement, et chacun est comparé à tous les autres pour que deux ne se ressemblent jamais. Il se dessine en direct à chaque format dans lequel vous créez, si bien que le grain et la lumière sont toujours bien placés, et il atténue ses détails derrière vos mots pour que les titres restent lisibles. Quand vous réservez un Mark, vous seul pouvez exporter avec lui. [Les matières des Marks](https://gradiently.design/fr/guide/mark-materials-explained) explique les couches de matière plus en détail.

Un Mark, c’est la texture devenue actif de marque : matière, lumière et grain dans une seule recette, avec un seul propriétaire à la fois.

## FAQ

### Qu’est-ce que la texture en identité de marque ?

C’est la qualité matérielle des surfaces visuelles d’une marque, comme le grain, le papier, le reflet ou la lumière, qui façonne le ressenti des couleurs et des mots.

### Le grain aide-t-il ou nuit-il à la lisibilité ?

Un grain fin et peu opaque ne gêne généralement pas et aide souvent en masquant les effets d’escalier. Un grain lourd derrière un petit texte rend les lettres floues, alors restez discret là où se trouvent les mots.

### La texture peut-elle faire partie d’une identité de marque ?

Oui. Une texture constante utilisée sur chaque surface devient reconnaissable à elle seule, comme une couleur ou une police.

### Comment ajouter du grain à un dégradé en CSS ?

Superposez une petite image de bruit SVG au dégradé avec un pseudo-élément, à environ 10 à 15 pour cent d’opacité et en mode de fusion overlay.