# Gradient map: alles opnieuw inkleuren in seconden [Canonical HTML page](https://gradiently.design/nl/guide/gradient-map) Een gradient map neemt elk beeld, foto, textuur of illustratie, en schildert het opnieuw in de kleuren die jij kiest, met behoud van al het licht en de schaduw. Sneller inkleuren kan niet. ## The short version - Een gradient map vervangt elke toon in een beeld, van de donkerste tot de lichtste, door de kleur op het overeenkomende punt van een kleurverloop. - Het linkeruiteinde van het kleurverloop kleurt de schaduwen, het rechteruiteinde de hooglichten, en alles ertussen kleurt de middentonen. - Een goed verloop voor een gradient map wordt van links naar rechts gestaag lichter: springt de helderheid heen en weer, dan oogt het beeld gesolariseerd. - Een gradient map is ideaal om reeksen foto’s consistent te maken, texturen en illustraties om te kleuren naar merkkleuren en voor color grading. - Een duotone is gewoon een gradient map met twee kleuren. Drie of meer stops geven veel fijnere controle over de middentonen. Een **gradient map** kleurt een beeld opnieuw in door elke toon te vervangen door een kleur uit een kleurverloop. Het beeld wordt eerst alleen als helderheid gelezen, van zwart naar wit, en daarna wordt elke helderheid geruild voor de kleur op hetzelfde punt van het kleurverloop: het linkeruiteinde schildert de schaduwen, het rechteruiteinde de hooglichten. De vormen, het licht en de details van het beeld blijven precies gelijk. Alleen de kleuren veranderen, en jij kiest ze allemaal. ## Hoe een gradient map werkt Zie het kleurverloop als een opzoektabel. Een pixel met 0% helderheid krijgt de kleur helemaal links, een pixel met 50% helderheid de kleur in het midden en een pixel met 100% de kleur helemaal rechts. Omdat het opzoeken alleen van de helderheid afhangt, krijgen twee heel verschillende oorspronkelijke kleuren met dezelfde helderheid, zoals een rode trui en een groene heg, dezelfde kleur. Daarom is een gradient map zo goed in het samenbrengen van beelden. | Toon in het beeld | Positie op het verloop | Kleur in Merkviolet | | --- | --- | --- | | Diepste schaduw | 0% | Inkt `#120b1f` | | Donkere tonen | 25% | Amethist `#3b1d6e` | | Middentonen | 50% | Violet `#7c3aed` | | Lichte tonen | 75% | Orchidee `#f0abfc` | | Helderste hooglicht | 100% | Lilawit `#fdf4ff` | Zo schildert het verloop Merkviolet hieronder een beeld opnieuw. Bij de meeste foto’s zitten de meeste pixels in de middelste drie rijen. ## Verlopen voor een gradient map die werken De allerbelangrijkste regel: het verloop moet van links naar rechts gestaag lichter worden. Dan blijft donker donker en licht licht, en houdt het beeld zijn gevoel van diepte. De tint mag je onderweg zoveel verschuiven als je wilt. Klassieke fotografische looks, zoals sepia en cyanotypie, zijn gewoon zulke verlopen. - Merkviolet: `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%)` - Cyanotypie: `linear-gradient(90deg, #0a1f3c 0%, #1f4e8c 40%, #6fa3d6 70%, #eef5fb 100%)` - Hitte: `linear-gradient(90deg, #000004 0%, #3b0f70 25%, #b63679 50%, #fb8761 75%, #fcfdbf 100%)` - Gouden film: `linear-gradient(90deg, #0d0d1a 0%, #2b2a4c 30%, #b3746a 60%, #f2c38b 85%, #fff4e0 100%)` - Diep petrol: `linear-gradient(90deg, #04151a 0%, #0f4c5c 35%, #2a9d8f 65%, #e9f5db 100%)` Zes verlopen die allemaal van links naar rechts lichter worden. Elk kleurt een foto overtuigend om: de tint mag dwalen, de helderheid niet. ### Verloop dat het beeld breekt - Helderheid die langs het verloop op en neer gaat - Een bleke kleur helemaal links, waardoor schaduwen licht worden - Tegenovergestelde tinten naast elkaar, waardoor middentonen grijs worden - Maar twee stops die ver uit elkaar liggen in tint ### Verloop dat het beeld draagt - Helderheid die van links naar rechts gestaag stijgt - Bijna zwart links, bijna wit of een bleke tint rechts - Naburige tinten, of een heldere brug tussen verre tinten - Drie tot vijf stops om de middentonen te sturen Breek je de helderheidsregel met opzet, dan krijg je een gesolariseerde, psychedelische look, en dat kan leuk zijn voor posters. Voor alles wat nog op een foto moet lijken, houd je het verloop gestaag. Wordt een middentoon grijs, dan is de oplossing dezelfde als bij elk kleurverloop: zie [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients). ## Waar je een gradient map voor gebruikt - **Consistente fotoreeksen:** stockfoto’s, telefoonfoto’s en oude archiefbeelden komen allemaal in één palet uit, zie [merkconsistentie](https://gradiently.design/nl/guide/brand-consistency) - **Merktexturen:** maak van elke textuur in grijstinten, zoals wolken, beton, stof of ruis, een achtergrond in je merkkleuren, zie [achtergrondtextuur](https://gradiently.design/nl/guide/background-texture) - **Illustraties en iconen:** kleur een hele set in één keer om door de grijzen toe te wijzen - **Color grading:** zet een laag met een gradient map op Zwak licht of Kleur met lage dekking voor een subtiele filmlook over de oorspronkelijke kleuren - **Data en wetenschap:** heatmaps en beelden in valse kleuren zijn gradient maps van metingen - **Duotone en tritone:** twee of drie stops voor krachtige posterbewerkingen, zie [het duotone-effect](https://gradiently.design/nl/guide/duotone-effect) ## Een gradient map toepassen in een beeldbewerker 1. **Voeg een aanpassing met een gradient map toe** Photoshop (daar heet het Verloop toewijzen), Affinity Photo en GIMP hebben er allemaal een. Gebruik waar het kan een aanpassingslaag, zodat het origineel onaangeroerd blijft. 2. **Stel eerst de uiteinden in** Zet links een bijna zwarte versie van je donkerste merkkleur en rechts een bleke tint. Controleer of het beeld nog leesbaar is. 3. **Voeg stops voor de middentonen toe** Zet je belangrijkste merkkleur rond 50% en verschuif hem tot huid, luchten of belangrijke objecten er goed uitzien. 4. **Meng het terug als dat nodig is** Wil je graden in plaats van volledig omkleuren, zet de overvloeimodus van de laag dan op Zwak licht of Kleur en verlaag de dekking. 5. **Bewaar het verloop** Sla het kleurverloop op als preset en gebruik het op elk beeld in de reeks, zodat ze allemaal bij elkaar passen. ## Een gradient map in CSS Browsers kunnen een gradient map toepassen met een SVG-filter. `feColorMatrix` zet het beeld om naar grijstinten, en `feComponentTransfer` leidt het per kanaal door een tabel met waarden. Elke lijst hieronder is het verloop Merkviolet: de rode, groene en blauwe waarden van de vijf stopkleuren gedeeld door 255, op gelijkmatig verdeelde posities. ```html ``` Een gradient map met vijf stops als SVG-filter. Verander de tabelwaarden om het verloop te veranderen. Met een gradient map kom je van elk beeld bij een palet dat van jou is. Begin je liever bij het beeld, dan vindt [een afbeelding matchen](https://gradiently.design/nl/guide/match-a-picture) het palet en de Marks die er het dichtst bij liggen. In Gradiently kun je in de Studio ook elke foto tinten in de kleuren van de Mark die je gebruikt, als mono, duotone of een zachtere waas, en dat is een gradient map die voor je is gebouwd. ## FAQ ### Wat is een gradient map? Een gradient map kleurt een beeld opnieuw in door elke toon, van donkerst tot lichtst, te vervangen door de kleur op het overeenkomende punt van een kleurverloop. ### Wat is het verschil tussen een gradient map en een duotone? Een duotone is een gradient map met maar twee kleuren. Een gradient map kan drie of meer stops hebben voor fijnere controle over de middentonen. ### Waarom ziet mijn gradient map er vreemd uit? De helderheid van het verloop gaat waarschijnlijk op en neer. Laat het van links naar rechts gestaag lichter worden, zodat schaduwen donker en hooglichten licht blijven. ### Hoe gebruik ik een gradient map voor color grading? Voeg de gradient map toe als aanpassingslaag, zet de overvloeimodus op Zwak licht of Kleur en verlaag de dekking. ### Kan ik een gradient map in CSS gebruiken? Ja, met een SVG-filter dat omzet naar grijstinten en daarna elk kanaal door tabelwaarden van `feComponentTransfer` leidt.