# Duotonebilder i merkevarefargene: Monokrom og Fargeslør

[Canonical HTML page](https://gradiently.design/nb/guide/photo-duotone-in-mark-colours)

Bilder som ikke passer sammen, er den raskeste veien til en strøm som ser lånt ut. Å tone dem i egne farger samler arkivbilder, mobilbilder og produktbilder i én familie.

## The short version

- Et duotonebilde erstatter bildets toner med to farger: én til skyggene og én til høylysene.
- I Gradiently kan alle bilder tones med Monokrom, Duotone eller Fargeslør, og Duotone og Fargeslør henter fargene fra designets Mark.
- Å tone bilder i samme farger som bakgrunnen får ulike kilder, fra arkivbilder til mobilbilder, til å ligne én bevisst serie.
- Bilder kan også justeres for lys og farge, få filtre som Film eller Noir og beskjæres til buer, sirkler og klatter.
- Alle bildejusteringer forblir redigerbare, så du kan endre toningen eller bytte Mark senere, og bildet følger med.

Et **duotonebilde** bytter bildets naturlige farger med to valgte: en mørk farge til skyggene og en lys farge til høylysene, med alle mellomtoner blandet fra paret. Gjort i merkevarefargene gjør det ethvert fotografi til noe som tydelig hører til deg. I Gradiently kan du tone et bilde på tre måter: Monokrom, Duotone eller Fargeslør. Duotone og Fargeslør henter fargene rett fra designets Mark, så bildet og bakgrunnen alltid passer sammen.

## Slik fungerer et duotonebilde

Tenk først på bildet som svart-hvitt. Hver piksel har en lysstyrke fra 0 til 100 prosent. Duotone maler deretter de mørkeste pikslene i skyggefargen, de lyseste i høylysfargen og resten på tilsvarende punkt langs overgangen mellom dem. Resultatet beholder alle detaljer i bildet, men ingen av originalfargene.

- Indigo til blek rosa: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Dyp blågrønn til sand: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Okseblod til smørgul: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Marineblå til is: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Fire duotoneoverganger. Skyggene får fargen til venstre, høylysene fargen til høyre, og bildets mellomtoner havner i midten.

Trikset som gjør duotone vakkert fremfor grumsete, er kontrast mellom endene. En svært mørk skygge og et svært lyst høylys holder ansikter og produkter tydelige. To mellomtoner gir et flatt, dunkelt bilde. For historien og flere bruksområder, se [duotoneeffekten](https://gradiently.design/nb/guide/duotone-effect).

## Monokrom, Duotone og Fargeslør: tre måter å tone på

| Toning | Hva den gjør | Fargene kommer fra | Bruk til |
| --- | --- | --- | --- |
| **Monokrom** | Gjør bildet svart-hvitt | Nøytrale gråtoner | Portretter, sitater og alvorlige eller tidløse uttrykk |
| **Duotone** | Gir skygger og høylys to farger | Marken | Sterke innlegg, arrangementsplakater og teambilder som ikke passer sammen |
| **Fargeslør** | Legger Markens farge over bildet og beholder noe av originalfargen | Marken | Produktbilder og mat, der motivet fortsatt bør se ekte ut |
| Ingen | Beholder bildets farger | Bildet | Hovedbilder av produkter der riktig farge er viktig |

Toningsvalgene i fotoredigering. Duotone og Fargeslør bruker Markens farger, så bildet tones på nytt når du bytter Mark.

Et stående innlegg med tittelen Møt teamet og en detaljlinje om fem mennesker og en espressomaskin på en varm Mark med gradient

Et innlegg duotone kan redde: teambilder tatt på ulike mobiler, samlet i én serie av Markens farger.

Et stående produktinnlegg som annonserer en høstkaffeblanding på samme Mark med gradient

Et produktinnlegg der et mildt fargeslør knytter bildet til bakgrunnen, men lar kaffen se ut som kaffe.

## Slik lager du et duotonebilde i Gradiently

1. **Legg til bildet** Last opp eller lim inn ditt eget, eller velg et gratis arkivbilde i Studio.
2. **Åpne fotoredigering** Velg bildet og åpne redigeringspanelet, der du finner lys, farge, filtre og toning.
3. **Velg Duotone under Mark-farger** Bildet får Markens palett med en gang. Prøv Fargeslør og Monokrom også. Det koster ingenting å sammenligne.
4. **Still inn kontrasten** Øk kontrasten hvis resultatet virker flatt, og lysstyrken hvis ansikter forsvinner i skyggefargen.
5. **Beskjær til en form** Bruk kvadrat, sirkel, bue eller klatt som passer layouten.
6. **Bytt Mark for å teste** Endre designets Mark, så følger toningen med. Du kan prøve flere uttrykk på samme bilde.

> **Alt forblir redigerbart** Toning og filtre brennes aldri inn i bildet. Du kan endre eller tilbakestille dem når som helst, noe som er viktig når en kampanje endrer farge underveis.

## Filtre, lys og farge som avslutning

Toningen bestemmer fargefamilien. De andre justeringene avgjør følelsen. De ligger i tre grupper, og forhåndsinnstillingene er en rask start før finjustering. Er bildet et produktbilde, får du bakgrunnen riktig først. [Bakgrunner for produktbilder](https://gradiently.design/nb/guide/product-photo-backgrounds) dekker det.

| Gruppe | Kontroller | Hva du bør velge |
| --- | --- | --- |
| Lys | Lysstyrke, kontrast | Kontrast først for duotone. Den skiller de to fargene |
| Farge | Metning, temperatur, grønn til magenta, fargetone | Temperatur for å varme eller kjøle Fargeslør. La metningen være i Duotone |
| Finish | Uskarphet, vignettering | Lett vignettering trekker blikket innover i portretter |
| Forhåndsinnstillinger | Original, Livlig, Myk, Varm, Kald, Falmet, Noir, Film | Film eller Falmet under Fargeslør gir et enkelt trykt preg |

Kontrollene i fotoredigering. Start med en forhåndsinnstilling og juster deretter lys før farge.

## Beskjæringsformer: buer, sirkler og klatter

Et tonet bilde i en myk form virker utformet fremfor bare lagt inn. Buer er arkitektoniske og rolige, fine til interiør, blomsterbutikker og bryllup, og passer naturlig med [merkevarebygging for fotografer](https://gradiently.design/nb/guide/photographer-branding). Sirkler passer mennesker: teamsider, foredragsholdere og kundeuttalelser. Klatter er lekne og passer mat, barnemerker og alt uformelt. Hold deg til én form per design, så serien blir helhetlig.

### Unngå

- To mellomtoner som gjør bildet grått
- Duotone på bildet der ekte farge selger, som en kjole
- Ulik toning på hvert bilde i en karusell
- Ord over bildets mest urolige del

### Gjør heller dette

- En dyp skyggefarge og et blekt høylys
- Fargeslør til produkter, Duotone til mennesker og steder
- Én toning på alle bilder i en serie
- Ord i det rolige området, med Auto-tekstfarge som velger fargen

Ligger teksten på selve bildet, dekker [lesbar tekst på bilder](https://gradiently.design/nb/guide/readable-text-on-photos) plasseringen. Konsekvent toning er en av de enkleste vanene bak [et konsekvent merkevareuttrykk](https://gradiently.design/nb/guide/brand-consistency).

## Duotone i CSS

På en nettside kan du bygge samme effekt med blandingsmoduser: Gjør bildet til gråtoner, multipliser det over høylysfargen og bruk deretter lysnende blanding med skyggefargen.

```css
.duotone {
  position: relative;
  background: #fbcfe8; /* highlight colour */
}

.duotone img {
  display: block;
  width: 100%;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e1b4b; /* shadow colour */
  mix-blend-mode: lighten;
  pointer-events: none;
}
```

Indigoskygger og blekrosa høylys. Se [mix-blend-mode på MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) for nettleserstøtte.

## FAQ

### Hva er et duotonebilde?

Et bilde der fargene erstattes av to: én til skyggene og én til høylysene, med mellomtonene blandet fra paret.

### Hvordan lager jeg et duotonebilde i merkevarefargene?

I Gradiently velger du bildet, åpner fotoredigering og velger Duotone. Det bruker fargene fra designets Mark. I CSS kombinerer du et gråtonebilde med blandingsmoduser.

### Hva er forskjellen på duotone og fargeslør?

Duotone erstatter alle fargene i bildet med to farger. Et fargeslør legger en farge over bildet og beholder noe av originalfargen, så motivet fortsatt ser naturlig ut.

### Hvilke farger gir en god duotone?

En svært mørk skyggefarge og en svært lys høylysfarge. To mellomtoner får bildet til å virke flatt og grumsete.

### Kan jeg beskjære bilder til former i Gradiently?

Ja. Bilder kan rammes inn som kvadrater, sirkler, buer eller klatter.