# Duotone-effekt: gi alle bilder merkevarens to farger [Canonical HTML page](https://gradiently.design/nb/guide/duotone-effect) Duotone gjør alle bilder om til to valgfrie farger: én til skyggene, én til lyset. Det er den raskeste måten å få ulike bilder til å se ut som én merkevare. ## The short version - Duotone-effekt fargelegger et foto med to farger, ved å gi de mørkeste tonene én farge og de lyseste en annen. - Duotone fungerer ved å gjøre bildet om til gråtoner og erstatte hver gråtone med det tilsvarende punktet på en tofarget gradient. - Skyggefargen må være mye mørkere enn høylysfargen, ellers mister bildet formen. - Duotone er ideelt for å få bilder fra ulike kilder til å virke helhetlige og følge merkevaren, og for å legge tekst over bilder. - I CSS gir et SVG-filter med feColorMatrix og feComponentTransfer ekte duotone på ethvert bilde. En **duotone-effekt** fargelegger et foto med bare to farger: skyggene får én farge og høylysene en annen, mens alle toner imellom blandes fra de to. Et portrett i dyp indigo og varmt gull, en by i skoggrønt og mint. Fordi alle bildene ender opp i de samme to fargene, er duotone den raskeste måten å få bilder fra ulike kameraer, årstider og kilder til å høre til én merkevare. ## Slik fungerer duotone-effekten Duotone er et gradientkart med to stopp. Først reduseres bildet til gråtoner, slik at hver piksel bare er en lysstyrke fra svart til hvitt. Så erstattes hver lysstyrke med fargen på samme punkt langs en tofarget gradient: svart blir skyggefargen, hvitt blir høylysfargen, og mellomgrått blir fargen halvveis mellom. Bildet beholder formene og lyset, men alle de opprinnelige fargene er borte. - Midnattsblått og gull: `linear-gradient(90deg, #1b134f 0%, #fad084 100%)` - Marineblått og korall: `linear-gradient(90deg, #0f1b3d 0%, #ff8a70 100%)` - Skoggrønt og mint: `linear-gradient(90deg, #0b3d2e 0%, #b8f2d0 100%)` - Plomme og fersken: `linear-gradient(90deg, #3b0a45 0%, #ffc9a3 100%)` - Espresso og sitron: `linear-gradient(90deg, #3b1f0a 0%, #fde047 100%)` - Okseblod og blekrosa: `linear-gradient(90deg, #3f0d12 0%, #fbcfe8 100%)` - Blågrønt og krem: `linear-gradient(90deg, #073b4c 0%, #f6ecd9 100%)` - Fiolett og cyan: `linear-gradient(90deg, #2e1065 0%, #67e8f9 100%)` Hver stripe er duotone lest fra venstre mot høyre: bildets skygger får venstre farge, høylysene den høyre, og alt annet fargen imellom. Å lese duotone som gradienter gjør det enkelt å vurdere fargene før du rører et bilde. Hvis midten av stripen ser grumsete ut, vil bildets mellomtoner også gjøre det. Den bredere teknikken med tre eller flere farger forklares i [gradientkart](https://gradiently.design/nb/guide/gradient-map). ## Slik velger du et duotone-fargepar 1. **Gjør skyggefargen mørk** Skyggefargen bærer bildets struktur. Den bør være nær svart i lyshet, som dyp marineblå, plomme eller skoggrønn, ellers blir ansikter og detaljer flate. 2. **Gjør høylysfargen lys** Høylysfargen bærer lyset. Blek gull, rosa, mint eller krem holder bildet lysende. En stor forskjell i lyshet holder bildet leselig. 3. **Sjekk midten** Det meste av et bilde er mellomtoner, så fargen halvveis mellom paret er viktigst. Blir den grå eller olivengrønn, velg en høylysfarge med fargetone nærmere skyggen. Se [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients). 4. **Hent én farge fra merkevaren** Bruk merkevarefargen som enten skygge eller høylys, og velg den andre slik at den passer. Det er det som får duotone til å følge merkevaren fremfor bare å virke stilisert. 5. **Test på et ansikt og et landskap** Hud og himmel avslører et dårlig par først. Hvis begge fortsatt ser bra ut, fungerer paret på nesten alt. ### Svake par - To farger med lik lyshet, som rødt og blått - En lys skyggefarge som vasker ut bildet - Motsatte fargetoner som gjør mellomtonene grå - Neonfargede høylys som får huden til å se syk ut ### Sterke par - En nesten svart skygge og et blekt høylys - Fargetoner som beholder fargen i midtpunktet - Én farge hentet fra merkevarepaletten - Varme høylys for mennesker, kjølige for steder | Stemning | Skygge | Høylys | | --- | --- | --- | | Varm og redaksjonell | Plomme `#3b0a45` | Fersken `#ffc9a3` | | Klassisk og eksklusiv | Midnattsblått `#1b134f` | Gull `#fad084` | | Frisk og naturlig | Skoggrønt `#0b3d2e` | Mint `#b8f2d0` | | Rolig og litterær | Blågrønt `#073b4c` | Krem `#f6ecd9` | | Høylytt og elektrisk | Fiolett `#2e1065` | Cyan `#67e8f9` | Utgangspar etter stemning. Bytt den ene siden med din egen merkevarefarge og behold forskjellen i lyshet. ## Når duotone hjelper - **Bilder som ikke passer sammen:** arkivbilder, mobilbilder og gamle fotografier ser ut som én serie - **Tekst over bilder:** når bildet reduseres til to rolige farger, er det mye lettere å plassere ord oppå; se [tekst over bilde](https://gradiently.design/nb/guide/text-over-image) - **Merkevarehelhet:** hvert bilde gjentar fargene dine og bygger gjenkjenning; se [merkevarehelhet](https://gradiently.design/nb/guide/brand-consistency) - **Plakater og omslag:** en sterk duotone kan leses på avstand og gir et rent trykk - **Svake bilder:** dårlig lys og kjedelige farger betyr langt mindre når fargene erstattes Det hjelper mindre der ekte farger er viktige: mat, mote, produkter og eiendom, der folk trenger å se hva de får. Da gjør en lettere toning eller et fargeslør over en del av bildet jobben uten å skjule de virkelige fargene. ## Slik lager du duotone i CSS Den mest nøyaktige metoden er et SVG-filter. `feColorMatrix` gjør bildet om til gråtoner med standardvekter for luminans, og `feComponentTransfer` tilordner hver kanal verdier fra skyggefargen til høylysfargen. Tabellverdiene er hver farges røde, grønne og blå verdi delt på 255. ```html Portrait ``` Midnattsblått og gull som SVG-filter. `color-interpolation-filters="sRGB"` holder fargene nøyaktig som angitt. Legg til en tredje verdi i hver `tableValues`-liste, så får du tritone med en valgt mellomtonefarge. Det er den enkleste måten å redde et par som blir grumsete i midten. For filtre og CSS-effekter generelt er [MDNs guide til filtereffekter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) en god referanse. ## Duotone i designverktøy Bilderedigeringsverktøy lager vanligvis duotone med et gradientkart: legg til en gradientkartjustering, sett venstre stopp til skyggefargen og høyre stopp til høylysfargen, og juster midtpunktet til hud og himmel ser riktige ut. Noen verktøy har også en egen duotone-modus for trykk som klargjør to faktiske trykkfarger i stedet for et RGB-bilde. I Gradiently kan alle foto i Studio tones i fargene til Marken du designer med: som mono, duotone eller et mykere fargeslør. Endrer du Marken, følger bildet med, slik at en hel serie design holder seg i én palett. ## FAQ ### Hva er duotone-effekt? Duotone-effekt fargelegger et bilde med to farger: skyggene får én farge og høylysene en annen, mens mellomtonene blandes mellom dem. ### Hvilke farger fungerer best til duotone? En svært mørk skyggefarge og en svært lys høylysfarge, med fargetoner som beholder fargen i midtpunktet, som marineblått og korall eller plomme og fersken. ### Hvordan lager jeg et duotone-bilde i CSS? Bruk et SVG-filter: `feColorMatrix` for å konvertere til gråtoner, deretter `feComponentTransfer` med tabellverdier for skygge- og høylysfargene. ### Hva er forskjellen på duotone og et gradientkart? Duotone er et gradientkart med nøyaktig to farger. Et gradientkart kan bruke tre eller flere farger langs det samme toneområdet. ### Hvorfor ser duotone-bildet mitt flatt ut? De to fargene er for like i lyshet. Gjør skyggefargen mørkere eller høylysfargen lysere.