# Gradient map: farg om hva som helst på sekunder [Canonical HTML page](https://gradiently.design/nb/guide/gradient-map) Et gradient map tar et hvilket som helst bilde, foto, tekstur eller illustrasjon, og maler det om i fargene du velger, mens alt lys og all skygge beholdes. Det er det raskeste verktøyet for omfarging som finnes. ## The short version - Et gradient map bytter ut hver tone i et bilde, fra den mørkeste til den lyseste, med fargen på det tilsvarende punktet på en gradient. - Venstre ende av gradienten farger skyggene, høyre ende farger høylysene, og alt imellom farger mellomtonene. - En god rampe for et gradient map blir jevnt lysere fra venstre mot høyre; hvis lysheten hopper fram og tilbake, ser bildet solarisert ut. - Gradient maps er ideelle for å gjøre bildesett enhetlige, farge teksturer og illustrasjoner om til merkevarefarger, og til fargegradering. - En duotone er ganske enkelt et gradient map med to farger; tre eller flere stopp gir mye finere kontroll over mellomtonene. Et **gradient map** farger om et bilde ved å bytte ut hver av tonene med en farge fra en gradient. Bildet leses først som ren lysstyrke, fra svart til hvitt, og så byttes hver lysstyrke ut med fargen på samme punkt langs gradienten: venstre ende maler skyggene, høyre ende maler høylysene. Formene, lyset og detaljene i bildet forblir nøyaktig de samme. Bare fargene endres, og du velger alle sammen. ## Slik fungerer et gradient map Tenk på gradienten som en oppslagstabell. En piksel med 0 % lysstyrke får fargen helt til venstre; en piksel med 50 % lysstyrke får fargen på midten; en piksel med 100 % får fargen helt til høyre. Fordi oppslaget bare avhenger av lysstyrke, ender to svært ulike originalfarger med samme lysstyrke, som en rød genser og en grønn hekk, opp med samme farge. Det er det som gjør gradient maps så gode til å samle bilder. | Tone i bildet | Posisjon på rampen | Farge i Merkevarefiolett | | --- | --- | --- | | Dypeste skygge | 0 % | Blekk `#120b1f` | | Mørke toner | 25 % | Ametyst `#3b1d6e` | | Mellomtoner | 50 % | Fiolett `#7c3aed` | | Lyse toner | 75 % | Orkidé `#f0abfc` | | Lyseste høylys | 100 % | Lillahvit `#fdf4ff` | Slik maler rampen Merkevarefiolett nedenfor om et bilde. De fleste bilder har mesteparten av pikslene sine i de tre midterste radene. ## Ramper for gradient map som fungerer Den aller viktigste regelen: rampen bør bli jevnt lysere fra venstre mot høyre. Da forblir mørke ting mørke og lyse ting lyse, og bildet beholder dybdefølelsen. Du kan skifte fargetone så mye du vil underveis. Klassiske fotografiske uttrykk, som sepia og cyanotypi, er bare slike ramper. - Merkevarefiolett: `linear-gradient(90deg, #120b1f 0%, #3b1d6e 25%, #7c3aed 50%, #f0abfc 75%, #fdf4ff 100%)` - Sepia: `linear-gradient(90deg, #1a120b 0%, #5c3d24 35%, #a67c52 65%, #f3e3c7 100%)` - Cyanotypi: `linear-gradient(90deg, #0a1f3c 0%, #1f4e8c 40%, #6fa3d6 70%, #eef5fb 100%)` - Hete: `linear-gradient(90deg, #000004 0%, #3b0f70 25%, #b63679 50%, #fb8761 75%, #fcfdbf 100%)` - Gyllen film: `linear-gradient(90deg, #0d0d1a 0%, #2b2a4c 30%, #b3746a 60%, #f2c38b 85%, #fff4e0 100%)` - Dyp blågrønn: `linear-gradient(90deg, #04151a 0%, #0f4c5c 35%, #2a9d8f 65%, #e9f5db 100%)` Seks ramper som alle blir lysere fra venstre mot høyre. Hver av dem ville farget om et bilde overbevisende; fargetonen kan vandre, lysheten bør ikke gjøre det. ### Rampe som ødelegger bildet - Lyshet som går opp og ned langs rampen - En blek farge helt til venstre, så skyggene blir lyse - Motsatte fargetoner side om side, så mellomtonene blir grå - Bare to stopp langt fra hverandre i fargetone ### Rampe som holder bildet - Lyshet som stiger jevnt fra venstre mot høyre - En nesten svart til venstre, en nesten hvit eller blek tone til høyre - Nabofargetoner, eller en lysende bro mellom fjerne - Tre til fem stopp for å styre mellomtonene Å bryte lyshetsregelen med vilje gir et solarisert, psykedelisk uttrykk, som kan være gøy på plakater. For alt som fortsatt skal se ut som et foto, holder du rampen jevn. Blir en mellomtone grå, er løsningen den samme som for enhver gradient: se [grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients). ## Hva du kan bruke gradient maps til - **Enhetlige bildesett:** arkivbilder, mobilbilder og gamle bilder fra skuffen kommer alle ut i én palett; se [konsekvent merkevare](https://gradiently.design/nb/guide/brand-consistency) - **Merkevareteksturer:** gjør en hvilken som helst gråtonetekstur, som skyer, betong, stoff eller støy, til en bakgrunn i merkevarefargene dine; se [bakgrunnstekstur](https://gradiently.design/nb/guide/background-texture) - **Illustrasjoner og ikoner:** farg om et helt sett på én gang ved å tilordne gråtonene - **Fargegradering:** sett et lag med gradient map til Soft Light eller Color med lav opasitet for et diskret filmuttrykk over originalfargene - **Data og vitenskap:** varmekart og bilder i falske farger er gradient maps av målinger - **Duotone og tritone:** to eller tre stopp for dristige plakatuttrykk; se [duotone-effekten](https://gradiently.design/nb/guide/duotone-effect) ## Slik bruker du et gradient map i et bildeprogram 1. **Legg til en justering med gradient map** Photoshop, Affinity Photo og GIMP har alle en. Bruk et justeringslag der du kan, så originalen forblir urørt. 2. **Sett endene først** Legg en nesten svart versjon av den mørkeste merkevarefargen din til venstre og en blek tone til høyre. Sjekk at bildet fortsatt leses. 3. **Legg til stopp for mellomtonene** Plasser hovedfargen i merkevaren rundt 50 %, og juster posisjonen til hud, himmel eller viktige gjenstander ser riktige ut. 4. **Bland det tilbake om nødvendig** For gradering i stedet for full omfarging endrer du lagets blandingsmodus til Soft Light eller Color og senker opasiteten. 5. **Lagre rampen** Lagre gradienten som en forhåndsinnstilling, og bruk den på hvert bilde i settet, så alle stemmer overens. ## Et gradient map i CSS Nettlesere kan bruke et gradient map med et SVG-filter. `feColorMatrix` gjør bildet til gråtoner, og `feComponentTransfer` tilordner det gjennom en tabell med verdier for hver kanal. Hver liste nedenfor er rampen Merkevarefiolett: verdiene for rødt, grønt og blått i de fem stoppfargene delt på 255, i jevnt fordelte posisjoner. ```html ``` Et gradient map med fem stopp som SVG-filter. Endre tabellverdiene for å endre rampen. Gradient maps er måten du kommer deg fra et hvilket som helst bilde til en palett du eier. Vil du heller starte fra bildet, finner [match et bilde](https://gradiently.design/nb/guide/match-a-picture) paletten og de nærmeste Marks. I Gradiently kan du også tone ethvert bilde i Studio i fargene til den Mark du bruker, som mono, duotone eller en mykere lasur, og det er et gradient map bygget for deg. ## FAQ ### Hva er et gradient map? Et gradient map farger om et bilde ved å bytte ut hver tone, fra mørkest til lysest, med fargen på det tilsvarende punktet på en gradient. ### Hva er forskjellen på et gradient map og en duotone? En duotone er et gradient map med bare to farger. Gradient maps kan ha tre eller flere stopp for finere kontroll over mellomtonene. ### Hvorfor ser gradient mappet mitt rart ut? Lysheten i rampen går sannsynligvis opp og ned. La den bli jevnt lysere fra venstre mot høyre, så skyggene forblir mørke og høylysene lyse. ### Hvordan bruker jeg et gradient map til fargegradering? Legg til gradient mappet som et justeringslag, sett blandingsmodusen til Soft Light eller Color, og senk opasiteten. ### Kan jeg bruke et gradient map i CSS? Ja, med et SVG-filter som konverterer til gråtoner og deretter tilordner hver kanal gjennom tabellverdier i `feComponentTransfer`.