# Varumärkestextur: materialkänslan som gör en look ägbar

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

Färg och typografi är lätta att sampla. Textur, kornet, skenet och ljuset på en yta, är långt svårare att kopiera och säger förvånansvärt mycket om ett varumärke.

## The short version

- Varumärkestextur är materialkänslan hos ett varumärkes ytor, som korn, papperstextur, glasigt sken eller mjukt ljus.
- Textur ändrar hur en färg känns: samma violett läses som film på korn, som teknik på glas och som lyx på siden.
- En textur är svårare att kopiera än en hexkod, eftersom den är en kombination av material, ljus och skala snarare än ett enda värde.
- En bra varumärkestextur är tyst nog att ligga bakom ord och konsekvent nog att kännas igen i varje format.
- Korn döljer också färgbanding, så det förbättrar kvaliteten lika mycket som karaktären.

**Varumärkestextur** är materialkänslan hos allt ett varumärke lägger på en yta: kornet i en bakgrund, papperets struktur, glasets sken, ljusets riktning och mjukhet. Det är skillnaden mellan en färg på en skärm och en färg på något. Två varumärken kan dela palett och typsnitt, men om det ena ligger på fint filmkorn och det andra på rent glas förväxlar ingen dem.

Textur är också en av de få delar av en look som motstår kopiering. Vem som helst kan läsa dina hexkoder från en skärmdump. Att återskapa ditt exakta korn, dess storlek, dess täthet och hur ljuset faller över det är mycket svårare, vilket gör det till en stark kandidat för signaturen i din [visuella identitet](https://gradiently.design/sv/guide/visual-identity).

## Vad textur gör med ett varumärke

Textur bär associationer som folk uppfattar direkt, långt innan de läst ett ord. Den svarar på frågor som: är det här handgjort eller konstruerat, varmt eller kallt, vardagligt eller speciellt?

| Texturfamilj | Läses som | Passar |
| --- | --- | --- |
| Fint filmkorn | Analogt, redaktionellt, genomtänkt | Studior, förlag, fotografer, musik |
| Papperstextur | Hantverksmässigt, tryckt, lugnt | Tillverkare, bagerier, pappersvaror, välmående |
| Glasigt sken | Precist, digitalt, modernt | Mjukvara, fintech, produktlanseringar |
| Silkes- eller satinljus | Mjukt, dyrt, sensuellt | Skönhet, smycken, mode, hotell |
| Ren platt färg | Direkt, grafiskt, djärvt | Kampanjer, sport, ungdomsvarumärken |

Fem vanliga texturfamiljer och känslan var och en ger. Platt färg är också ett texturval: frånvaron av material säger något.

Ingen av dem är bättre än någon annan. Det som spelar roll är att texturen stämmer med vad du säger om dig själv. Ett varumärke som talar om långsamt hantverk och postar på blankt glas sänder ett blandat budskap. [Varumärkespersonlighet](https://gradiently.design/sv/guide/brand-personality) är ett bra ställe att börja om du inte är säker på vad din ska säga.

## Korn, material och ljus: de tre lagren

De flesta texturer som känns rika är byggda av tre lager. Att tänka på dem var för sig gör textur till något du kan designa med avsikt i stället för ett filter du lägger på på slutet.

1. **Material** Ytans grundbeteende: hur färg flödar över den. Mjuka övergångar, mjuka veck, flytande former eller skarpa fasetter.
2. **Ljus** Varifrån det kommer och hur hårt det är. Ett mjukt ljus från ett hörn ger djup; jämnt ljus ser platt och digitalt ut.
3. **Korn** Det fina bruset ovanpå. Lite får en yta att kännas verklig och döljer banding; för mycket ser smutsigt ut och tävlar med orden.

- Jämnt, ingen ljuskälla: `linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #a5b4fc 100%)`
- Mjukt ljus, uppe till höger: `radial-gradient(circle at 80% 15%, #a5b4fc 0%, #4338ca 30%, #1e1b4b 70%)`
- Varmt ljus, nere till vänster: `radial-gradient(ellipse at 20% 100%, #f9a8d4 0%, #7e22ce 35%, #1e1b4b 75%)`

En färgfamilj under tre sorters ljus. Enbart ljuset ändrar stämningen innan något korn lagts till.

För kornlagret på webben räcker ett litet SVG-brus lagt över bakgrunden. Håll opaciteten låg; du vill känna det mer än se det.

```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");
}
```

En upplyst gradient med ett fint brusslager ovanpå. Höj `baseFrequency` för finare korn, sänk `opacity` för ett lugnare.

[Kornig gradient](https://gradiently.design/sv/guide/grainy-gradients) har fler kornrecept, och [gradientbanding](https://gradiently.design/sv/guide/gradient-banding) förklarar varför brus också är standardlösningen på synliga ränder i mjuka övergångar.

## Så väljer du din varumärkestextur

- **Utgå från ett ord.** Skriv den enda känsla du vill att folk ska få, som ”hantverksmässig” eller ”precis”, och välj familjen som matchar.
- **Testa den bakom ord.** Textur ligger under rubriker, priser och datum. Om den gör dem svårare att läsa i mobilstorlek är den för stark.
- **Kontrollera den i båda ytterligheterna.** Titta på den i en story på 1080×1920 och på ett visitkort på 1050×600. Korn som ser rätt ut stort kan bli sörja litet.
- **Kontrollera den i tryck.** Korn som sjunger på en skärm kan se ut som ett tryckfel på papper. Skriv ut en A5-flyer innan du bestämmer dig.

Ett stående bageriinlägg med texten Surdeg varje morgon, satt på en mjukt texturerad bakgrund

En mjukare yta för ett bageri: materialet kan säga handgjort före orden.

Ett stående fintechinlägg med texten Betalningar klara på sekunder, satt på en annan texturerad bakgrund

En annan Mark för en fintechprodukt. Samma layout, ett helt annat varumärke.

## Misstag som får textur att se billig ut

### Undvik

- Ett stockfoto av papper inklistrat under allt
- Tungt korn som gör text suddig
- En annan textur på varje plattform
- Textur bakom orden, platt överallt annars
- Att skala en texturerad bild till varje storlek

### Gör så här

- En textur byggd av material, ljus och korn
- Korn så fint att det känns, inte att det märks
- En yta över flöde, webbplats och tryck
- Samma yta i varje ruta
- Rendera texturen på nytt i varje storlek

Den sista punkten fångar många varumärken. När en texturerad bild sträcks från ett kvadratiskt inlägg till en bred banner sträcks kornet också och ljuset hamnar märkligt. En textur ska renderas i den storlek den används i, vilket också tas upp i [bakgrundstextur](https://gradiently.design/sv/guide/background-texture).

## Gör en textur till din

Ett gratis brusöverlägg finns för alla, vilket är precis problemet: ju populärare en textur blir, desto mindre säger den om dig. För att göra textur ägbar måste den vara en specifik kombination som ingen annan använder.

Det är vad en Gradiently-Mark är byggd för. Varje Mark är ett recept av färger, upp till tre staplade material, ljus, korn och rörelse, och var och en kontrolleras mot varje annan så att inga två ser likadana ut. Den renderas live i varje storlek du designar i, så att kornet och ljuset alltid hamnar rätt, och den tonar ner sina detaljer bakom dina ord så att rubrikerna förblir läsbara. När du säkrar en Mark kan bara du exportera med den. [Gradientmaterial](https://gradiently.design/sv/guide/mark-materials-explained) förklarar materiallagren mer ingående.

En Mark är textur som varumärkestillgång: material, ljus och korn i ett recept, med en ägare i taget.

## FAQ

### Vad är textur i varumärkesbyggande?

Det är materialkänslan hos ett varumärkes visuella ytor, som korn, papper, sken eller ljus, och den formar hur färger och ord känns.

### Hjälper eller stjälper korntextur läsbarheten?

Fint korn med låg opacitet stjälper oftast inte och hjälper ofta genom att dölja banding. Tungt korn bakom liten text gör bokstäverna suddiga, så håll det diskret där ord ligger.

### Kan textur vara en del av en visuell identitet?

Ja. En konsekvent textur som används på varje yta blir igenkännbar i sig, på samma sätt som en färg eller ett typsnitt.

### Hur lägger jag till korn på en gradient i CSS?

Lägg en liten SVG-brusbild över gradienten med ett pseudoelement, vid cirka 10 till 15 procents opacitet med överläggsblandning.