# Duotone-effekt: giv ethvert foto dit brands to farver [Canonical HTML page](https://gradiently.design/da/guide/duotone-effect) Duotone giver ethvert foto to farver, du vælger: én til skyggerne og én til lyset. Det er den hurtigste måde at få forskellige billeder til at ligne ét brand. ## The short version - Duotone-effekten omfarver et foto med to farver, så de mørkeste toner får den ene farve og de lyseste den anden. - Duotone virker ved at gøre fotoet til gråtoner og erstatte hver gråtone med det tilsvarende punkt på en gradient med to farver. - Skyggefarven skal være langt mørkere end højlysfarven, ellers mister fotoet sin form. - Duotone er ideelt til at få fotos fra forskellige kilder til at se ensartede ud i brandets stil og til at lægge tekst over billeder. - I CSS giver et SVG-filter med feColorMatrix og feComponentTransfer en ægte duotone på ethvert billede. En **duotone-effekt** omfarver et foto med kun to farver: skyggerne bliver til én farve og højlysene til en anden, mens alle toner derimellem blandes af de to. Et portræt i dyb indigo og varmt guld, en by i skovgrøn og mint. Fordi hvert billede ender i de samme to farver, er duotone den hurtigste måde at få fotos fra forskellige kameraer, årstider og kilder til at høre til ét brand. ## Sådan virker duotone-effekten Duotone er en gradientmapping med to farvestop. Først omdannes fotoet til gråtoner, så hver pixel kun er en lysstyrke fra sort til hvid. Derefter erstattes hver lysstyrke med farven på samme punkt langs en gradient med to farver: sort bliver skyggefarven, hvid bliver højlysfarven, og mellemgrå bliver farven midt imellem. Fotoet bevarer former og lys, men alle oprindelige farver forsvinder. - Midnatsblå og guld: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Marineblå og koral: `linear-gradient(90deg, #0f1b3d 0%, #ff8a70 100%)` - Skovgrøn og mint: `linear-gradient(90deg, #0b3d2e 0%, #b8f2d0 100%)` - Blomme og fersken: `linear-gradient(90deg, #3b0a45 0%, #ffc9a3 100%)` - Espresso og citron: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Oksblodsrød og sart rosa: `linear-gradient(90deg, #3f0d12 0%, #fbcfe8 100%)` - Blågrøn og creme: `linear-gradient(90deg, #073b4c 0%, #f6ecd9 100%)` - Violet og cyan: `linear-gradient(90deg, #2e1065 0%, #67e8f9 100%)` Hver stribe er en duotone læst fra venstre mod højre: fotoets skygger får farven til venstre, højlysene den til højre, og alt andet en farve derimellem. Når du ser duotone som gradienter, er de lette at vurdere, før du rører et foto. Ser midten af farvestriben mudret ud, vil fotoets mellemtoner også gøre det. Den bredere teknik med tre eller flere farver gennemgås i [gradientmapping](https://gradiently.design/da/guide/gradient-map). ## Sådan vælger du to farver til duotone 1. **Gør skyggefarven mørk** Skyggefarven bærer fotoets struktur. Den bør ligge tæt på sort i lyshed, som en dyb marineblå, blomme eller skovgrøn. Ellers bliver ansigter og detaljer flade. 2. **Gør højlysfarven lys** Højlysfarven bærer lyset. En lys guld, sart rosa, mint eller creme holder billedet lysende. En stor forskel i lyshed gør, at fotoet stadig er tydeligt. 3. **Tjek midten** Det meste af et foto er mellemtoner, så farven midt imellem de to betyder mest. Hvis den bliver grå eller olivengrøn, så vælg en højlysfarve tættere på skyggens kulør. Se [mudrede gradienter](https://gradiently.design/da/guide/muddy-gradients). 4. **Tag én farve fra dit brand** Brug din brandfarve som enten skygge eller højlys, og vælg den anden, så den passer. Det får duotone til at føles som dit brand frem for bare stiliseret. 5. **Test på et ansigt og et landskab** Hud og himmel afslører et dårligt farvepar først. Hvis begge stadig ser godt ud, vil parret fungere på næsten alt. ### Svage farvepar - To farver med omtrent samme lyshed, som rød og blå - En lys skyggefarve, der udvasker fotoet - Modsatte kulører, der gør mellemtonerne grå - Neonhøjlys, der får hud til at se syg ud ### Stærke farvepar - En næsten sort skygge og et lyst højlys - Kulører, der bevarer farven i midtpunktet - Én farve hentet fra brandets palet - Varme højlys til mennesker, kølige til steder | Stemning | Skygge | Højlys | | --- | --- | --- | | Varm og redaktionel | Blomme `#3b0a45` | Fersken `#ffc9a3` | | Klassisk og eksklusiv | Midnatsblå `#1b134f` | Guld `#fad084` | | Frisk og naturlig | Skovgrøn `#0b3d2e` | Mint `#b8f2d0` | | Stille og litterær | Blågrøn `#073b4c` | Creme `#f6ecd9` | | Larmende og elektrisk | Violet `#2e1065` | Cyan `#67e8f9` | Farvepar som udgangspunkt efter stemning. Skift den ene farve ud med din brandfarve, og bevar forskellen i lyshed. ## Hvornår duotone hjælper - **Forskellige fotos:** stockbilleder, mobilfotos og gamle arkivbilleder ligner én serie - **Tekst over fotos:** når fotoet reduceres til to rolige farver, er det langt lettere at lægge ord på. Se [tekst over billeder](https://gradiently.design/da/guide/text-over-image) - **Ensartet branding:** hvert billede gentager dine farver og opbygger genkendelighed. Se [ensartet branding](https://gradiently.design/da/guide/brand-consistency) - **Plakater og forsider:** en stærk duotone kan aflæses på afstand og står skarpt på tryk - **Svage fotos:** dårlig belysning og matte farver betyder langt mindre, når farverne først er erstattet Det hjælper mindre, når de rigtige farver er vigtige: mad, mode, produkter og boliger, hvor folk skal kunne se, hvad de får. Her klarer en lettere toning eller et farveslør over en del af billedet opgaven uden at skjule de oprindelige farver. ## Sådan laver du duotone i CSS Den mest præcise metode er et SVG-filter. `feColorMatrix` omdanner billedet til gråtoner med standardvægte for luminans, og `feComponentTransfer` mapper hver kanal fra skyggefarven til højlysfarven. Tabelværdierne er hver farves røde, grønne og blå værdi divideret med 255. ```html Portrait ``` Midnatsblå og guld som SVG-filter. `color-interpolation-filters="sRGB"` bevarer farverne præcis som angivet. Tilføj en tredje værdi til hver `tableValues`-liste, så har du en tritone med en valgt mellemtonefarve. Det er den letteste måde at redde et farvepar med en mudret midte. [MDN’s guide til filtereffekter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) er en god reference til filtre og CSS-effekter generelt. ## Duotone i designværktøjer Billedredigeringsprogrammer laver normalt duotone med gradientmapping: tilføj en gradientmapping-justering, sæt venstre stop til skyggefarven og højre stop til højlysfarven, og justér midtpunktet, til hud og himmel ser rigtige ud. Nogle værktøjer har også en særlig duotone-tilstand til tryk, som forbereder to rigtige trykfarver frem for et RGB-billede. I Gradiently kan ethvert foto i studiet tones i farverne fra den Mark, du designer med: som mono, duotone eller et blødere farveslør. Skift Marken, og fotoet følger med, så en hel designserie holder sig til én palet. ## FAQ ### Hvad er en duotone-effekt? Duotone-effekten omfarver et foto med to farver: skyggerne bliver én farve og højlysene en anden, mens mellemtonerne blandes af de to. ### Hvilke farver er bedst til duotone? En meget mørk skyggefarve og en meget lys højlysfarve med kulører, der bevarer farven i midtpunktet, som marineblå og koral eller blomme og fersken. ### Hvordan laver jeg et duotone-billede i CSS? Brug et SVG-filter: `feColorMatrix` til at omdanne til gråtoner og derefter `feComponentTransfer` med tabelværdier for skygge- og højlysfarverne. ### Hvad er forskellen på duotone og gradientmapping? Duotone er gradientmapping med præcis to farver. Gradientmapping kan bruge tre eller flere farver langs det samme toneomfang. ### Hvorfor ser min duotone flad ud? De to farver ligger for tæt i lyshed. Gør skyggefarven mørkere eller højlysfarven lysere.