# Gradient map: färglägg om vad som helst på några sekunder [Canonical HTML page](https://gradiently.design/sv/guide/gradient-map) En gradient map tar vilken bild som helst, ett foto, en textur eller en illustration, och målar om den i de färger du väljer men behåller allt ljus och all skugga. Det är det snabbaste omfärgningsverktyget som finns. ## The short version - En gradient map ersätter varje ton i en bild, från den mörkaste till den ljusaste, med färgen på motsvarande punkt i en gradient. - Gradientens vänstra ände färgar skuggorna, den högra änden färgar högdagrarna och allt däremellan färgar mellantonerna. - En bra skala för en gradient map blir stadigt ljusare från vänster till höger; om ljusheten hoppar omkring ser bilden solariserad ut. - Gradient maps är idealiska för att göra fotoserier enhetliga, färglägga om texturer och illustrationer i varumärkesfärger och för färgkorrigering. - En duoton är helt enkelt en gradient map med två färger; tre eller fler stopp ger mycket finare kontroll över mellantonerna. En **gradient map** färglägger om en bild genom att ersätta var och en av dess toner med en färg ur en gradient. Bilden läses först som enbart ljushet, från svart till vitt, och sedan byts varje ljushet mot färgen på samma punkt längs gradienten: vänstra änden målar skuggorna, högra änden målar högdagrarna. Bildens former, ljus och detaljer förblir exakt desamma. Bara färgerna ändras, och du väljer alla. ## Så fungerar en gradient map Tänk på gradienten som en uppslagstabell. En pixel med 0 % ljushet får färgen längst till vänster; en pixel med 50 % ljushet får färgen i mitten; en pixel med 100 % får den längst till höger. Eftersom uppslagningen bara beror på ljushet blir två mycket olika ursprungsfärger med samma ljushet, till exempel en röd tröja och en grön häck, samma färg. Det är det som gör gradient maps så bra på att göra bilder enhetliga. | Ton i bilden | Position på skalan | Färg i Varumärkesviolett | | --- | --- | --- | | Djupaste skugga | 0 % | Bläck `#120b1f` | | Mörka toner | 25 % | Ametist `#3b1d6e` | | Mellantoner | 50 % | Violett `#7c3aed` | | Ljusa toner | 75 % | Orkidé `#f0abfc` | | Ljusaste högdager | 100 % | Lilavit `#fdf4ff` | Så målar skalan Varumärkesviolett nedan om en bild. De flesta foton har de flesta av sina pixlar i de tre mittersta raderna. ## Skalor för gradient maps som fungerar Den enskilt viktigaste regeln: skalan ska bli stadigt ljusare från vänster till höger. Då förblir mörka saker mörka och ljusa saker ljusa, och bilden behåller sin känsla av djup. Du kan skifta nyans hur mycket du vill på vägen. Klassiska fotografiska looks, som sepia och cyanotypi, är bara skalor som den här. - Varumärkesviolett: `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%)` - Hetta: `linear-gradient(90deg, #000004 0%, #3b0f70 25%, #b63679 50%, #fb8761 75%, #fcfdbf 100%)` - Gyllene film: `linear-gradient(90deg, #0d0d1a 0%, #2b2a4c 30%, #b3746a 60%, #f2c38b 85%, #fff4e0 100%)` - Djup turkos: `linear-gradient(90deg, #04151a 0%, #0f4c5c 35%, #2a9d8f 65%, #e9f5db 100%)` Sex skalor som alla blir ljusare från vänster till höger. Var och en skulle färglägga om ett foto på ett övertygande sätt; nyansen får vandra, ljusheten ska inte. ### Skala som förstör bilden - Ljushet som går upp och ner längs skalan - En blek färg längst till vänster, så att skuggorna blir ljusa - Motsatta nyanser bredvid varandra, så att mellantonerna blir grå - Bara två stopp långt ifrån varandra i nyans ### Skala som håller bilden - Ljushet som stiger stadigt från vänster till höger - Ett nästan svart till vänster, ett nästan vitt eller en blek ton till höger - Angränsande nyanser, eller en stark brygga mellan avlägsna - Tre till fem stopp för att styra mellantonerna Att bryta ljushetsregeln med avsikt ger en solariserad, psykedelisk look, vilket kan vara roligt för affischer. För allt som fortfarande ska se ut som ett foto, håll skalan jämn. Om en mellanton blir grå är lösningen densamma som för vilken gradient som helst: se [grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients). ## Vad du använder gradient maps till - **Enhetliga fotoserier:** arkivfoton, telefonbilder och gamla bilder ur arkivet kommer alla ut i en palett; se [varumärkeskonsekvens](https://gradiently.design/sv/guide/brand-consistency) - **Varumärkestexturer:** gör vilken gråskaletextur som helst, som moln, betong, tyg eller brus, till en bakgrund i dina varumärkesfärger; se [bakgrundstextur](https://gradiently.design/sv/guide/background-texture) - **Illustrationer och ikoner:** färglägg om en hel uppsättning på en gång genom att mappa dess gråtoner - **Färgkorrigering:** sätt ett gradient map-lager i Soft Light eller Color på låg opacitet för en subtil filmlook över originalfärgerna - **Data och vetenskap:** värmekartor och falskfärgsbilder är gradient maps av mätvärden - **Duoton och tritoner:** två eller tre stopp för djärva affischbehandlingar; se [duotoneffekten](https://gradiently.design/sv/guide/duotone-effect) ## Så använder du en gradient map i en bildredigerare 1. **Lägg till en justering med gradient map** Photoshop, Affinity Photo och GIMP har alla en. Använd ett justeringslager där du kan, så att originalet förblir orört. 2. **Ställ in ändarna först** Lägg en nästan svart version av din mörkaste varumärkesfärg till vänster och en blek ton till höger. Kontrollera att bilden fortfarande går att läsa. 3. **Lägg till stopp för mellantonerna** Placera din huvudsakliga varumärkesfärg runt 50 % och justera dess position tills hud, himmel eller nyckelobjekt ser rätt ut. 4. **Blanda tillbaka den vid behov** För korrigering snarare än full omfärgning, ändra lagrets blandningsläge till Soft Light eller Color och sänk opaciteten. 5. **Spara skalan** Spara gradienten som en förinställning och använd den på varje bild i serien, så att de alla matchar. ## En gradient map i CSS Webbläsare kan tillämpa en gradient map med ett SVG-filter. `feColorMatrix` gör om bilden till gråskala, och `feComponentTransfer` mappar den genom en tabell med värden för varje kanal. Varje lista nedan är skalan Varumärkesviolett: de fem stoppfärgernas röda, gröna och blå värden delade med 255, i jämnt fördelade positioner. ```html ``` En gradient map med fem stopp som SVG-filter. Ändra tabellvärdena för att ändra skalan. Gradient maps är sättet att ta sig från vilken bild som helst till en palett du äger. Om du hellre vill börja från bilden hittar [matcha en bild](https://gradiently.design/sv/guide/match-a-picture) dess palett och de närmaste Marks. I Gradiently kan du också tona vilket foto som helst i Studion i färgerna hos den Mark du använder, som enfärgat, duoton eller en mjukare tvätt, vilket är en gradient map byggd åt dig. ## FAQ ### Vad är en gradient map? En gradient map färglägger om en bild genom att ersätta varje ton, från den mörkaste till den ljusaste, med färgen på motsvarande punkt i en gradient. ### Vad är skillnaden mellan en gradient map och en duoton? En duoton är en gradient map med bara två färger. Gradient maps kan ha tre eller fler stopp för finare kontroll över mellantonerna. ### Varför ser min gradient map konstig ut? Skalans ljushet går troligen upp och ner. Låt den bli stadigt ljusare från vänster till höger så att skuggorna förblir mörka och högdagrarna ljusa. ### Hur använder jag en gradient map för färgkorrigering? Lägg till gradient mapen som ett justeringslager, ställ sedan in dess blandningsläge på Soft Light eller Color och sänk opaciteten. ### Kan jag använda en gradient map i CSS? Ja, med ett SVG-filter som konverterar till gråskala och sedan mappar varje kanal genom tabellvärden i `feComponentTransfer`.