Hoe kleur uit foto halen?

23 jan 2022 | fotografie, webdesign

jochem oomen webdesign fotografie | hoe kleur uit foto halen | Foto: Sander de Wilde

Als je met graphic of webdesign bezig bent, kom je ook in aanraking met fotografie. Soms kan het gebeuren dat je dan een bepaalde kleurcode uit een foto moet halen. Hoe gaat dat eigenlijk? Dit artikel geeft je antwoord op de vraag “hoe kleur uit een foto halen?” Ook ontdek je welke software je hiervoor kunt gebruiken.

Wanneer je een website of een grafisch ontwerp maakt, dan heb je bepaalde kleuren nodig. Als je die kleuren baseert op een logo of een bestaande huisstijl, dan is dat redelijk eenvoudig, omdat je dan al met een beperkt aantal kleuren werkt. In dit artikel lees je hoe je kleur uit een logo of uit een huisstijl haalt. Maar hoe gaat dat eigenlijk in zijn werk met foto’s? Dat lees je hieronder.

Zodra je met beelden in kleur werkt, dan merk je dat je beeld eigenlijk uit tientallen, zo niet honderden verschillende kleurtinten bestaat. Dat is even iets anders als een logo, wat bijvoorbeeld maar uit vier dominante kleuren bestaat. Kleur uit een kleurenfoto halen, hoe begin je hieraan?

Kleurenpalet uit foto halen

Een aantal kleuren die uit een beeld komen, noem je een kleurenpalet. Mocht je meteen een kant-en-klaar kleurenpalet willen hebben dat uit je foto komt, dan raad ik je aan om de online tool Image Colorpicker te gebruiken. Het werkt heel simpel: je surft naar de website, load je foto up en de software geeft jou automatisch een aantal kleuren waar je mee kan werken.

Misschien vind je die kleuren al helemaal geweldig, maar het kan ook zijn dat je niet meteen tevreden bent. In dat geval kun je ook gewoon de cursor over je foto bewegen en een aantal kleuren uit je beeld kiezen. Het onlineprogramma Image Colorpicker laat je meteen de bijbehorende codes zien.

Image Color Picker is één van mijn favoriete tools. Op zoek naar nog meer tips? Ontdek hier mijn favoriete tools voor zowel webdesign als fotografie.

Wat is HEX? Wat is RGB?

Als je deze tool gebruikt, dan zie je bij iedere kleurtint twee verschillende termen staan: je hebt HEX- en RGB-kleurcodes. Iedere kleurtint heeft namelijk een unieke code om ervoor te zorgen dat een computerscherm deze correct weergeeft. De basiskleuren voor een computerscherm zijn rood, geel en blauw. Iedere basiskleur heeft 255 tinten en al deze tinten kun je met elkaar combineren, wat maar liefst 16 581 375 mogelijkheden oplevert.

De waarde van iedere kleur loopt op van 0 tot 255. Dat zie je vooral in de RGB-waarde terug. RGB komt van de basiskleuren rood, groen en blauw. Een RGB-waarde bestaat uit drie getallen tussen haakjes, waar telkens een komma tussenstaat. Kenmerkend is de afkorting “rgb” voor de code. In plaats van drie getallen met komma’s op te schrijven, kun je ook de HEX-kleurcode overnemen. HEX verwijst naar de hexadecimale waarde van een kleur, en hexadecimaal betekent zestientallig. Deze kleurcodes worden uitgedrukt in waarden van 00 tot FF. HEX-kleurcodes beginnen met een hashtag, RGB-kleurcodes herken je aan de komma’s. Veel thema’s en bouwers, zoals Divi, herkennen beide codes.

Hoe werkt dit in de praktijk?

Na deze theoretische uitleg, zal ik je een voorbeeld geven van hoe dit werkt. Toen ik namelijk deze website aan het bouwen was, merkte ik dat in mijn straatfoto’s de kleur turquoise (of appelblauwzeegroen voor de Vlamingen) regelmatig terugkwam. Soms in spiegelende oppervlakken, soms in het water. Ik besloot om deze foto van het kanaal in Molenbeek up te loaden in Image Picker. Het kleurenpalet wat mij gesuggereerd werd, was niet meteen voldoende voor mij.

Dus ben ik met de cursor net zo lang door het water gegaan tot ik twee goede tinten turquoise (of, jawel, appelblauwzeegroen) te pakken kreeg. Eén voor de knoppen over mijn website, en één om te laten zien dat je met de cursor over een knop schuift. De basiskleurwaarde van mijn knoppen is in HEX #609C9D (let op de hashtag) en in RGB rgb(96,156,157) (let op de kleine letters rgb, haakjes en komma’s). Als je over knoppen schuift met je cursor, dan zie je een andere appelblauwzeegroen- of turquoisetint, namelijk 4D7171 en rgb(77,113,113). De eerste is een HEX-code, de tweede een RGB.

Kleur toevoegen aan website

Indien je dit moet doen voor graphic design, dan kun je deze kleur toevoegen aan je standaarddesignprogramma. Houd je het eenvoudiger, dan kun je deze ook toevoegen in Canva. Wanneer je een website gaat bouwen, dan kun je deze in WordPress in de theme customizer of via je je thema in het dashboard aanpassen.

Zelf werk ik als fotograaf en webdesigner meestal in Divi. Het geweldige hieraan is dat het zowel een thema als een bouwer is, waar kleur erg belangrijk is. Je kan je kleurenpalet zelfs meteen invoeren, nog voor je aan het effectief bouwen van de site begint. Als je Divi geïnstalleerd hebt, kun je bij theme options je kleurenpalet invoeren. Eens het daar staat, dan duikt het steeds op als je iets nieuws gaat construeren.

Meer tools om kleuren uit een foto te halen

Image Colorpicker vind ik een hele fijne tool omdat deze zo snel online werkt. En mocht je bang zijn voor je privacy: deze website bewaart je foto niet! Als fotograaf zou ik ook Photoshop kunnen gebruiken om de kleur uit de foto te halen. Nu is Photoshop echt geweldige software, maar niet altijd de snelste. Zeker niet als ik tegelijkertijd Divi in Chrome heb openstaan. Is Colorpicker niet je ding en heb je geen geduld voor Photoshop, dank kun je ook nog Color Palette Generator van Canva gebruiken. Kan ook heel handig zijn. Een laatste optie is de Chrome-extensie ColorPick Eyedropper, maar die werkt eigenlijk enkel online. Dus als je foto al op het web staat, dan kun je dat prima gebruiken.

Welke colorpicker gebruik jij het liefst om kleur uit een foto te halen?

Over Jochem

Ik ben Jochem Oomen, webdesigner en fotograaf. Het is mijn doel om duurzame ondernemers, organisaties en scholen te helpen aan meer klanten, deelnemers of leerlingen. Dat doe ik door middel van duurzaam webdesign en minimalistische fotografie. Lees hier meer over mij.

Vond je dit artikel interessant? Deel het via de knoppen op social media!

Op de hoogte blijven? Schrijf je in en ontvang telkens mijn nieuwste blogs in je mailbox!

Lees hier meer

Hoe kan ik mijn WordPress-website vertalen?

Woon je in een meertalige omgeving? Werk je in verschillende talen? Dan kan het een goed idee zijn om je WordPress-website te vertalen. Maar waarom zou je dat eigenlijk doen? En hoe kun je daaraan beginnen? En hoe groot is de ecologische voetafdruk van een vertaalde website? Je leest het in...

Op naar een duurzamer internet

Onlangs tekende ik als webdesigner het Sustainable Web Manifesto. Daarmee verklaarde ik mij in te zetten voor een duurzamer internet. Waarom is dat nodig? En hoe doe ik dat als webdesigner? Je leest het in dit artikel.Waarom is het internet niet duurzaam?“Als het internet een land was, dan...

Tweedehands of niet?

Steeds meer mensen kiezen voor tweedehands fotoapparatuur of laptop. Niet alleen vanwege het budget, maar ook vanwege het duurzaamheidsaspect. Maar is het nu verstandig om voor tweedehands materiaal te gaan? Dit artikel helpt je met het dilemma “tweedehands of niet”. Spoiler alert: het...

error: Content is protected !!

Pin It on Pinterest

Share This