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.

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?

Op de hoogte blijven van mijn nieuwste blogs? Schrijf je nu in voor mijn nieuwsbrief!

Op zoek naar gratis website tips? Boek nu een gratis webdesign sessie!