# Duotonfoton i dina varumärkesfärger: monokrom, duoton, slöja

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

Ojämna foton är det snabbaste sättet att få ett flöde att se lånat ut. Att tona dem i dina egna färger drar arkivbilder, mobilbilder och produktfoton in i en familj.

## The short version

- Ett duotonfoto ersätter en bilds toner med två färger: en för skuggorna och en för högdagrarna.
- I Gradiently kan vilket foto som helst tonas som monokrom, duoton eller färgslöja, och duoton och färgslöja hämtar sina färger från designens Mark.
- Att tona foton i samma färger som bakgrunden får blandade källor, från arkivbilder till mobilbilder, att se ut som en medveten serie.
- Foton kan också justeras i ljus och färg, avslutas med filter som Film eller Noir och beskäras till valv, cirklar och blobbar.
- Varje fotojustering förblir redigerbar, så du kan ändra tonen eller byta Mark senare och fotot följer med.

Ett **duotonfoto** byter ut en bilds naturliga färger mot två valda: en mörk färg för skuggorna och en ljus färg för högdagrarna, med varje ton däremellan blandad av paret. Gjort i dina varumärkesfärger förvandlar det vilket fotografi som helst till något som tydligt hör till dig. I Gradiently kan du tona ett foto på tre sätt, monokrom, duoton eller färgslöja, och duoton och färgslöja hämtar sina färger direkt från designens Mark, så att fotot och bakgrunden alltid stämmer överens.

## Så fungerar ett duotonfoto

Tänk dig fotot som svartvitt först. Varje pixel har en ljusstyrka från 0 till 100 procent. En duoton målar sedan de mörkaste pixlarna i din skuggfärg, de ljusaste i din högdagerfärg och allt annat på motsvarande punkt längs rampen mellan dem. Resultatet behåller all fotots detalj, men inget av dess ursprungliga färg.

- Indigo till rodnad: `linear-gradient(90deg, #1e1b4b 0%, #be185d 55%, #fbcfe8 100%)`
- Djup turkos till sand: `linear-gradient(90deg, #052e2b 0%, #0f766e 50%, #f5d0a9 100%)`
- Oxblod till smör: `linear-gradient(90deg, #2b0a0a 0%, #b45309 55%, #fde68a 100%)`
- Marinblått till is: `linear-gradient(90deg, #0b1020 0%, #2563eb 55%, #e0f2fe 100%)`

Fyra duotonramper. Skuggorna tar färgen till vänster, högdagrarna färgen till höger, och fotots mellantoner hamnar i mitten.

Knepet som får en duoton att se bra ut i stället för lerig är kontrasten mellan de två ändarna. En mycket mörk skugga och en mycket ljus högdager håller ansikten och produkter läsbara. Två mellantoner ger en platt, grumlig bild. För historien och bredare användning av utseendet, se [duotoneffekten](https://gradiently.design/sv/guide/duotone-effect).

## Monokrom, duoton och färgslöja: tre sätt att tona

| Ton | Vad den gör | Färger från | Använd den till |
| --- | --- | --- | --- |
| **Monokrom** | Gör fotot svartvitt | Neutrala grå toner | Porträtt, citat, allt allvarligt eller tidlöst |
| **Duoton** | Mappar skuggor och högdagrar till två färger | Marken | Djärva inlägg, eventaffischer, teamfoton som inte matchar |
| **Färgslöja** | Lägger Markens färg över fotot och behåller en del av dess egen | Marken | Produktbilder och mat, där motivet fortfarande ska se verkligt ut |
| Ingen | Lämnar fotots färg orörd | Fotot | Produktfoton i huvudrollen där korrekt färg spelar roll |

Tonalternativen i fotoredigeringen. Duoton och Färgslöja använder färgerna i din Mark, så att byta Mark ger fotot en ny ton.

Ett stående inlägg med titeln Möt teamet och detaljraden om fem personer och en espressomaskin, på en varm gradient-Mark

Den sortens inlägg en duoton räddar: teamfoton tagna med olika mobiler, dragna in i en serie av Markens färger.

Ett stående produktinlägg som aviserar en kaffeblandning för hösten på samma gradient-Mark

Ett produktinlägg: där en mild färgslöja binder fotot till bakgrunden men låter kaffet se ut som kaffe.

## Så gör du ett duotonfoto i Gradiently

1. **Lägg till fotot** Ladda upp eller klistra in ditt eget, eller välj ett av de gratis arkivfotona i Studio.
2. **Öppna fotoredigeringen** Markera fotot och öppna dess redigeringspanel, där ljus, färg, filter och ton finns.
3. **Välj Duoton under Mark-färger** Fotot mappas om till Markens palett direkt. Prova Färgslöja och Monokrom också; det kostar inget att jämföra.
4. **Ställ in kontrasten** Höj kontrasten om resultatet ser platt ut, och ljusstyrkan om ansikten faller in i skuggfärgen.
5. **Beskär till en form** Rama in det som en kvadrat, en cirkel, ett valv eller en blob som passar layouten.
6. **Byt Mark för att testa** Ändra designens Mark så följer tonen med, så att du kan prova flera utseenden på samma foto.

> **Allt förblir redigerbart** Toner och filter bränns aldrig in i fotot. Du kan ändra eller återställa dem när som helst, vilket spelar roll när en kampanj byter färg halvvägs.

## Filter, ljus och färg för finishen

Tonen bestämmer färgfamiljen; de andra justeringarna avgör känslan. De ligger i tre grupper, och förinställningarna är ett snabbt sätt att börja före finjustering. Är fotot en produktbild, få bakgrunden rätt först: [bakgrunder för produktfoton](https://gradiently.design/sv/guide/product-photo-backgrounds) tar upp det.

| Grupp | Reglage | Vad du ska ta till |
| --- | --- | --- |
| Ljus | Ljusstyrka, kontrast | Kontrast först för alla duotoner; den skiljer de två färgerna åt |
| Färg | Mättnad, temperatur, grön till magenta, nyans | Temperatur för att värma eller kyla en färgslöja; lämna mättnaden i fred på en duoton |
| Finish | Oskärpa, vinjettering | En lätt vinjettering drar ögat inåt på porträtt |
| Förinställningar | Original, Livfull, Mjuk, Varm, Kall, Blek, Noir, Film | Film eller Blek under en färgslöja ger en enkel tryckt känsla |

Reglagen i fotoredigeringen. Börja med en förinställning och justera sedan ljus före färg.

## Beskärningsformer: valv, cirklar och blobbar

Ett tonat foto i en mjuk form läses som designat snarare än nedplockat. Valv känns arkitektoniska och lugna, härliga för inredning, blomsterbutiker och bröllopsarbete, och en naturlig passform för [fotografens varumärke](https://gradiently.design/sv/guide/photographer-branding). Cirklar passar människor: teamsidor, talare, vittnesmål. Blobbar är lekfulla och passar mat, barnvarumärken och allt informellt. Håll dig till en form per design så att serien ser konsekvent ut.

### Undvik

- Två mellantonsfärger som gör fotot grått
- En duoton på det enda fotot där äkta färg säljer, som en klänning
- En annan ton på varje foto i en karusell
- Text över den stökigaste delen av fotot

### Gör så här

- En djup skuggfärg och en blek högdager
- En färgslöja för produkter, duoton för människor och platser
- En ton över varje foto i en serie
- Text i det lugna området, med Auto-bläck som väljer färgen

Om text ligger på själva fotot går [göra text läsbar på foton](https://gradiently.design/sv/guide/readable-text-on-photos) igenom placering, och en konsekvent ton är en av de enklaste vanorna bakom [konsekvent varumärke](https://gradiently.design/sv/guide/brand-consistency).

## En duoton i CSS

På en webbplats kan du bygga samma effekt med blandlägen: gör fotot gråskaligt, multiplicera det över högdagerfärgen och ljusna sedan med skuggfärgen.

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

Indigoskuggor och rodnande högdagrar. Se [mix-blend-mode på MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) för webbläsarstöd.

## FAQ

### Vad är ett duotonfoto?

Ett foto vars färger ersätts av två: en för skuggorna och en för högdagrarna, med tonerna däremellan blandade av paret.

### Hur gör jag ett duotonfoto i mina varumärkesfärger?

I Gradiently markerar du fotot, öppnar fotoredigeringen och väljer Duoton; den använder färgerna i designens Mark. I CSS kombinerar du en gråskalebild med blandlägen.

### Vad är skillnaden mellan duoton och färgslöja?

En duoton ersätter all fotots färg med två färger. En färgslöja lägger en färg över fotot och behåller en del av dess egen, så att motiven fortfarande ser naturliga ut.

### Vilka färger ger en bra duoton?

En mycket mörk skuggfärg och en mycket ljus högdagerfärg. Två mellantoner gör fotot platt och grumligt.

### Kan jag beskära foton till former i Gradiently?

Ja. Foton kan ramas in som kvadrater, cirklar, valv eller blobbar.