Wanneer iemand voor het eerst op je website komt, bepaalt kleur voor een groot deel wat deze persoon over je site denkt. De eerste indruk die een consument van je site heeft, wordt voor 62-90% bepaald door de kleurkeuze, wijst onderzoek uit.
Het kiezen van kleuren die bij je merk passen – en wat je wil dat consumenten denken over jouw bedrijf en producten – kan een krachtige branding- en marketingtool zijn.
In dit artikel behandelen we meer dan 25 fantastische websitekleurenschema’s voor landingspagina’s, e-commerce, en persoonlijke sites, zodat je zonder tijd te verspillen je eigen kleurenschema kan kiezen.
Zo kies je kleurenschema’s voor je website
De ogen van een gemiddelde volwassene kunnen onderscheid maken tussen meer dan 1.000.000 verschillende kleuren. Hoe kies je uit al deze kleuren snel en efficiënt het juiste kleurenschema? Dat is precies de uitdaging voor degenen die graag een uniek kleurenschema of -palet willen maken voor hun ontwerp.
Met zoveel keuzes kan je natuurlijk niet elke mogelijke kleurentint bekijken en zonder referentiepunt de meest geschikte kiezen. Je moet je hoeveelheid opties beperken. De beste manier om te beginnen is door een primaire kleur te zoeken die je als uitgangspunt neemt.
Een goede manier om dit te doen is door te kijken naar wat per industrie de meest populaire keuzes zijn. Wat ook kan helpen is om jezelf wat te verdiepen in de psychologie achter kleuren en welke primaire kleuren goed zouden kunnen werken voor jouw bedrijf of product.
Kleurkeuze per industrie
Bedrijven en producten gebruiken verschillende kleuren om hun merk eruit te laten springen. Maar waarom? Kleur is niet alleen maar een efficiëntere manier om de aandacht van (potentiële) klanten te trekken. Het is een manier om op emotioneel, bijna onbewust niveau met ze te communiceren.
In zekere zin is het een manier om je merk in het onbewuste van de consument te plaatsen, nog voordat je ook maar een enkel woord of een enkele zin aan ze hebt voorgelegd. Geen enkele kleur vertelt hetzelfde verhaal aan de consument. Dit betekent ook dat de meest populaire primaire merkkleuren per branche verschillen.
Welke emotie wil je dat potentiële klanten associëren met je merk, product of dienst?
Dat zou de belangrijkste vraag moeten zijn in je zoektocht naar het identificeren van de primaire kleuren voor je palet.
Blauw draagt uit:
In industrieën waar het vertrouwen van de klant een belangrijkere factor is dan welke andere dan ook, en waar professionaliteit en betrouwbaarheid belangrijke verkoopargumenten zijn, wordt blauw vaak gebruikt als primaire merkkleur.
Het roept geen spontaniteit of emotie op. In plaats daarvan brengt het een rustig en logisch besluitvormingsproces op gang.
Meest voorkomend in de volgende branches:
- Bankieren
- Luchtvaartmaatschappijen
- Communicatie
- Consumentenkrediet
- Energiebedrijven
- Zwaar materieel
- Aannemers
- Hotels
- Geneesmiddelen
Rood draagt uit:
Industrieën die afhankelijk zijn van emoties en impulsieve beslissingen (zoals restaurants en fastfood), gebruiken vaak rood als primaire kleur. Van rood wordt gedacht dat het een hongergevoel opwekt, dus is het een favoriete kleur onder internationale voedselmerken.
Meest voorkomend in de volgende branches:
- Restaurants
- Dranken
- Detailhandel levensmiddelen
- Onroerend goed
- Kleding
Groen draagt uit:
De meeste mensen associëren de kleur groen met de natuur, planten en levendige, herstellende omgevingen. Industrieën die vertrouwen op een belofte van beter welzijn of producten met volledig natuurlijke ingrediënten, kiezen vaak voor groen.
Meest voorkomend in de volgende branches:
- Eten & drinken
- Warenhuizen
- Onroerend goed
- Chemicaliën
Zwart: zelfvertrouwen, verfijning
Hoewel sommige bedrijven standaard zwart kiezen in plaats van een specifieke kleurkeuze te maken, omdat het veilig aanvoelt, is het ook een veelgemaakte keuze in bedrijfstakken waar het zelfvertrouwen of de verfijning van de consument een sleutelfactor is.
Meest voorkomend in de volgende branches:
- Kleding
- Style-items (horloges, sieraden, etc.)
- Internet- en mobiele serviceproviders
- Warenhuizen
- Hotels
Volg bij het maken van je kleurkeuze niet je instinct en/of eigen smaak, maar houd rekening met kleurentheorie en kleurentheorie bij het maken van je beslissing.
Hoeveel kleurenschema’s moet je gebruiken op een enkele site?
Voor een standaard kleurenschema voor een website kun je drie tot zeven afzonderlijke kleuren binnen één schema of palet samenbrengen.
Maar hoeveel verschillende kleurenschema’s moet je op een enkele site gebruiken?
Dat hangt af van de individuele omstandigheden en de doelen die je met je website hebt. Als je website een bedrijfswebsite of blog is die aan één merk, product of bedrijf is gewijd, dan wil je je aan één kleurenschema houden.
Als je website daarentegen een e-commerce winkel is, dan kan je verschillende kleurenschema’s gebruiken voor verschillende productcategorieën om bij elke categorie een andere emotionele reactie op de roepen.
Het probleem met het gebruik van meerdere paletten is dat je dingen ingewikkelder maakt voor interne of externe contentcreators, wat de kans op menselijke fouten en complicaties vergroot.
Wanneer je een kleurenschema kiest voor je site, dan is het belangrijk om hier niet weken aan te besteden. Het is zeker een belangrijke keuze, maar het kiezen van de juiste kleuren alleen helpt je niet om meer bezoekers naar je site te leiden of om conversies op productpagina’s te stimuleren.
Zo krijg je de exacte kleurenschema’s op een website
Om elke kleur die op een website wordt gebruikt te identificeren, tot aan de exacte kleurtint en hexcode, kan je een Google Chrome extensie of Firefox add-on als ColorZilla gebruiken.
Wanneer je ColorZilla hebt geïnstalleerd, kan je eenvoudig je muisaanwijzer over elk designelement slepen – denk aan een site, logo of afbeelding – en het laat je vervolgens de exacte HTML hex- of RGB kleurcodes voor die pixel zien. Als je geen zin hebt om de kleuren een voor een te identificeren, kan je ook een kleurenpaletgenerator gebruiken die gebruik maakt van een volledige afbeelding, zoals Colormind’s afbeeldingskleur extractietool.
Dit lijkt misschien een perfecte oplossing, maar schijn bedriegt (enigszins). Je moet nog steeds een screenshot maken van de website en deze uploaden. Ook is het gegenereerde palet niet per se 100% nauwkeurig in het bepalen van de daadwerkelijke tinten die in het ontwerp zijn gebruikt. Als de website bijvoorbeeld een gradient/verloop gebruikt of een afbeelding bevat die niet in het hoofdkleurenschema van de site passen, dan is het gegenereerde palet meestal onnauwkeurig.
Dus voorlopig is de beste manier om de exacte kleuren te identificeren die in webdesign worden gebruikt, nog steeds door een kleuridentificerende plugin of extensie te gebruiken. Ook kan je voor de handmatige route kiezen door een screenshot te maken en deze in een fotobewerkingstool als Photoshop te bekijken.
Welke website kleurenschema gebruiken we bij Kinsta?
Zoals de meeste websites, volgen we bij Kinsta een standaard driekleuren- of triadisch schema voor al onze content. Omdat ons bedrijf zich richt op managed WordPress hosting, hoeven we niet meerdere paletten op onze website te implementeren.
We gebruiken donkerpaars (#5333ed) als primaire kleur, turquoise (#2cd4d9) om evenwichtige maar toch pakkende gradients te plaatsen en een ingetogen grijs (#6E7076) voor tekst.
Maar wat doen andere bedrijven?
Tijd om daarachter te komen!
26 beste voorbeelden van kleurenschema’s voor websites
We hebben het web afgezocht naar de beste voorbeelden van pakkende kleurenschema’s en hebben de sites op categorie ingedeeld, zodat je makkelijk en snel inspiratie kan opdoen van de voor jou relevante websites.
Geweldige kleurenschema’s voor e-commerce websites
Hieronder bespreken we uitstekende e-commerce voorbeelden van kleurenschema’s die passen bij hun merk en branche.
1. Huidverzorgingsproduct: helder en speels
Bliss heeft wat branding betreft een hele goede kleurenkeuze gemaakt. De kleuren zijn helder en speels, wat perfect aansluit bij de boodschap die het merk uitdraagt, namelijk positiviteit en innerlijk geluk.
2. Kledingmerk: duidelijk en beknopt
Le Bonnet is een kledingbedrijf dat zich richt op duidelijkheid wat betreft het kleurenpalet van haar website. Een paar intense kleuren, samen met een ondoorzichtige beige achtergrondkleur om producten te onderscheiden, helpen de eenvoud van het ontwerp over te brengen.
3. Kledingwinkel: eenvoud
Revise Concept is de site van een kledingmerk die gebruik maakt van eenvoudige kleuren in combinatie met witruimte – in plaats van te vertrouwen op veel kleuren binnen een kleurenpalet – zodat ze de kleuren en designs van de kleding zelf kunnen highlighten.
Deze aanpak kan een uitstekend alternatief zijn voor e-commerce sites waar je het product zelf wil laten spreken, in plaats van dat je een pittig ontwerp het verhaal laat vertellen.
4. Serviesgoed: betrouwbaarheid en professionaliteit
My Tableware is een Duitse e-commerce site voor serviesgoed op maat.
De site gebruikt een eenvoudig kleurenschema van donkerblauw, lichtbruin en grijs om een gevoel van professionaliteit en betrouwbaarheid over te brengen, met tonen van verfijning.
5. Kauwgom: natuurlijk en impulsief
Neuro is een merk dat kauwgom en pepermuntjes met cafeïne levert, waarmee mensen zich beter kunnen concentreren. Het maakt gebruik van een mix van zachtere kleuren als turquoise, lichtblauw en beige om een gevoel van natuurlijke ingrediënten te creëren.
Er wordt ook een beroep gedaan op emotie en impulsieve beslissingen met rood en oranje, een uitstekend gebruik van accentkleur.
6. Horloges: verfijning en luxe
Prime Ambassador is een Zweeds merk dat uurwerken maakt en heeft een stijlvolle e-commerce site die is ontworpen om de producten onder de aandacht te brengen. De kleurencombinaties van een bijna gouden lichtbruine tint op een donkergrijze achtergrond en houten accenten op de foto geven de bezoeker een gevoel van verfijning en luxe.
De kleuren zijn perfect voor het promoten van een high-end product zoals een op maat gemaakt horloge, maar zouden misplaatst aanvoelen als je gewone consumptiegoederen zou verkopen.
7. Broeken: creatief & toegankelijk
Alday is een merk dat comfortabele broeken maakt die zijn ontworpen om beter te passen dan de massaal geproduceerde jeans en chino’s die tegen lage(re) prijzen worden verkocht.
De website is creatief en speels en bevat levendige kleurencombinaties die het toegankelijk maken voor de bezoeker en potentiële klanten.
8. Fruitsnacks: elegante en accentuerende kleuren
Madies biedt een lijn van gevriesdroogde fruitsnacks en richt zich op de meer modebewuste consument dan merkloos gedroogd fruit dat in bulk wordt verkocht.
De zwarte achtergrond en de gele personificatie van rijpe mango accentueren de eenvoud van het ontwerp, wat leidt tot een elegant eindproduct.
9. Denims op maat: levendig
Unspun gebruikt fel rood en oranje om de website tot leven te brengen. Dit is perfect om te communiceren met een publiek dat een actieve en opgewekte levensstijl leidt.
Kleurenschema’s voor persoonlijke en reiswebsites
Hieronder vind je de selectie van de beste voordelen van kleurenschema’s voor websites voor persoonlijke en reissites.
10. Creatieve eenvoud
Madeleine Dalla is een in New York gevestigde fotografe met een scherp gevoel voor website-ontwerp (en een indrukwekkend portfolio).
Door kleuren volledig te negeren in de rest van haar design, benadrukt ze de levendige kleuren van de zorgvuldig uitgekozen uitgelichte afbeeldingen bij elk van haar projecten. Met andere woorden, ze gebruikt de afwezigheid van kleur net zo goed als de aanwezigheid ervan.
11. Grijstinten met een extraatje
Ali Rifai is een creative art director en dat zie je terug in het concept van de website. Door alleen grijstinten te gebruiken, met hier en daar een vleugje kleur, wordt je aandacht getrokken naar de juiste trefwoorden en de belangrijkste delen van het ontwerp, het woord “original” en de charmante glimlach.
12. Een met de natuur
iFly 50 is een online magazine dat door KLM is uitgebracht ter gelegenheid van haar 50-jarig jubileum.
Door de blauwe kleuren van de lucht en het water, en het groen van het gras en bos te benadrukken, voelt elke bezoeker zich één met de natuur – een perfecte benadering voor de website van elke natuur- of landschappelijke fotograaf.
13. Strak en professioneel
De site van Benediktas Gylys geeft een masterclass in strak design. Er is geen rommel en dat geldt ook voor de kleurkeuzes.
De primaire paarse kleur benadrukt professionaliteit, en hoewel er maar een paar kleuren gebruikt worden, dienen ze allemaal om de belangrijkste elementen, de illustraties, te benadrukken.
14. Pragmatische kleuren
BucketListly gebruikt kleuren pragmatisch en gebruikt geel om trefwoorden, CTA’s en de tot nu toe bezochte landen te markeren.
Het laat zien hoeveel je kan halen uit slechts een kleur binnen een ontwerpt wanneer je deze gebruikt in combinatie met witruimte en de juiste concepten.
15. Elegante eenvoud
De uitgelichte afbeelding van de site van Lars Franzen gebruikt een donkere achtergrond om de kleur en individualiteit van de mensen in het portret naar voren te brengen.
16. Futuristische overlay
De persoonlijke site van Dot Lung is prachtig en dat komt met name door het gebruik van het eenvoudige kleurenpalet met overlays en de strakke achtergrondafbeeldingen te maximaliseren. Het paars op de achtergrond zorgt voor samenhang bij het scrollen van pagina tot pagina.
17. Licht en donker
Love for Iceland is een goed voorbeeld van hoe kleuren in een uitgelichte foto de sfeer kunnen bepalen. Met het lichte blauw van helder ijs – verlicht door zonlicht – dat je linksboven vindt, tot de grotachtige duisternis die je onderin vindt, creëer je een onheilspellende en avontuurlijke sfeer voor de bezoeker.
Kleurenschema’s voor landingspagina’s
Hieronder hebben we verschillende landingspagina’s geplaatst met unieke of effectieve kleurenschema’s.
18. Scherp contrast
Zenly gebruikt sterk contrasterende kleuren om de functionaliteit van de live kaart-app te benadrukken (trouwens, zó sluit je Google Maps in op WordPress sites). Door de ruimte op de achtergrond valt het bolvormige app-ontwerp op en krijgt het een futuristisch tintje.
19. Kleur om te highlighten
Slack gebruikt een beproefde tactiek wat betreft het kleurenschema van landingspagina’s, waarbij kleuren meestal worden gebruikt om belangrijke call-to-actions en andere belangrijke elementen te highlighten. Voor een landingspagina hoef je het ontwerp niet nodeloos ingewikkeld te maken, en kleuren vallen hier zeker ook onder.
Zorg ervoor dat je ook onze uitgebreide vergelijking tussen Microsoft Teams vs Slack bekijkt.
20. Levendige kleuren wekken emoties op
Spotify gebruikt levendige kleuren om emoties op te wekken bij een publiek op zijn buitengewoon eenvoudige nieuwe landingspagina. Het zijn de kleuren die hier meer een verhaal neerzetten dan de subkop dat doet voor de CTA knop. Bekijk onze handleiding als je erover denkt om binnenkort een podcast te lanceren.
21. Kleurcontrasten zorgen voor orde in de chaos
Autonomy gebruikt kleuren en contrast om orde te scheppen in een anders chaotisch, geanimeerd ontwerp. Het levendige geel komt bijna je scherm uit en scheidt zich af van de achtergrond en andere objecten.
22. Futuristisch kleurenensemble
Bugsnag gebruikt een gevarieerde kleurencollectie om een futuristisch, hightech gevoel te geven met zijn platte ontwerp. De combinatie van kleuren en vormen geeft de bezoeker het gevoel dat het bedrijf bij de tijd is en dat hij erop kan vertrouwen dat het bedrijf een toonaangevende rol speelt.
23. Levend van kleur
De landingspagina van Connect Homes wordt tot leven gebracht door heldere doch zachte kleuren. Het kleurenpalet zorgt voor een opwindende balans die een moderne uitstraling geeft.
24. Conservatieve kleuren, speels design
Plink’s landingspagina is gebaseerd op een relatief conservatieve donkerblauw, maar balanceert dit met een speelse animatie en een vrolijk algemeen ontwerp.
25. Natuurlijke vitaliteit
Travelshift vertrouwt sterk op de kleur groen om een gevoel van natuur en vitaliteit over te brengen. In plaats van CTA’s of belangrijke inhoud te highlighten met een opvallende kleur zoals rood of oranje, fungeert het groen als een belofte van verjonging.
26. Lichte kleuren van hoop
Swab the World gebruikt een kleurenschema van heldere, contrasterende kleuren om een gevoel van hoop over te brengen. Dit is een perfecte match met een landingspagina van een non-profitorganisatie. De conflicterende kleuren werken samen met de gebruikte vormen om de moderne/futuristische benadering te benadrukken die ze gebruiken om te laten zien dat ze de uitdaging aan willen gaan.
Website kleurenschema generatoren
Als je niet zelf handmatig aangrenzende kleuren, gradients of tinten voor je schema of palet wil kiezen, dan kan je online tools gebruiken om je te helpen. Er zijn een aantal gratis kleurenschema’s of paletgeneratoren online beschikbaar. Hieronder nemen we de beste hiervan onder de loep.
Colormind
Colormind is een door AI aangedreven kleurengenerator die je kan gebruiken om razendsnel kleuren voor websites, sjablonen en andere toepassingen te genereren. Het enige probleem is dat je geen primaire kleur kunt instellen om een palet van te extrapoleren, je moet het elke keer willekeurig genereren. Ook kan uit elke gewenste afbeelding kleurenpaletten genereren.
Coolors.co
Coolors.co is een web- en mobiele app waarmee je vanaf niks paletten kan genereren. Het biedt tint-alternatieven voor elke kleuroptie en heeft andere geavanceerde tools die je helpen bij het nemen van efficiënte beslissingen over je kleurenschema’s.
Paletton
In plaats van willekeurige schema’s te genereren, geeft Paletton je volledige controle over je palet en welke kleur je als basis-/primaire kleur wil gebruiken. Je kan het gewenste type palet kiezen: aangrenzende kleuren, een triadisch kleurenschema, of iets anders. Je kan elke kleur van het kleurenwiel selecteren.
ColorSpace
ColorSpace genereert kleurenpaletten op basis van een primaire kleur die je invoert. Het biedt een breed scala aan stijlopties dat meer flexibiliteit geeft.
Kleurenblindheid: zo kies je een kleurenblindvriendelijk palet voor je website
Waar je idealiter ook rekening mee wil houden bij het maken van een kleurenschema voor een website, is hoe verschillende mensen de kleuren zullen zien.
Niet iedereen ziet het “standaard” kleurengamma. Er zijn drie verschillende hoofdtypen kleurenblindheid, deuteranopie, protanopie en tritanopie.
Roodgroene kleurenblindheid (deuteranopie en protanopie) is de meest voorkomende vorm van kleurenblindheid. Het treft ongeveer 1 op de 12 van Noord-Europese afkomst. Dat is een groot deel van de bevolking, waardoor het de moeite waard is om hier rekening mee te houden bij het ontwerpen of kiezen van een WordPress thema.
Blauwgele kleurenblindheid is veel zeldzamer en treft mannen en vrouwen in gelijke mate.
Zo kies je een kleurenblindvriendelijk palet voor je website
Aangezien het aantal rood-groene kleurenblinde mensen veel hoger is dan elke andere vorm van kleurenblindheid, zou deze groep je eerste prioriteit moeten zijn bij het aanpassen van je design. Omdat ze rood, groen en paars niet kunnen onderscheiden, maar ze deze zien als verschillende tinten geel en blauw, wil je vermijden dat je contrasterende kleuren gebruikt die er uiteindelijk te veel op lijken.
- Maak dus geen contrasten tussen groen en geel of andersom.
- Zet geel niet af tegen rood of oranje.
- Contrasteer paars niet met vergelijkbare blauwtinten.
Wanneer je zelfstandige primaire kleuren kiest voor je logo of ontwerp, kijk dan of het nog steeds on-brand voor mensen die kleurenblind zijn. De paars van Kinsta is bijvoorbeeld voor rood-groene kleurenblinde consumenten nog steeds een donkerblauwe, wat (nog steeds) een boodschap van betrouwbaarheid overbrengt. Wat ons betreft is dat nog steeds 100% on-brand, omdat de boodschap die wij willen overbrengen ook aan deze groep wordt overgebracht.
Samenvatting
Het menselijk oog is in staat om miljoenen verschillende kleurtinten te onderscheiden, maar dat betekent niet meteen dat je ze ook allemaal stuk voor stuk moet bekijken om een kleurenschema te vinden die bij jouw site past.
Door je te concentreren op je merk en de “ideale klant”, kan je al snel je keuze wat je primaire kleuren betreft beperken. Zodra je eenmaal een keuze hebt gemaakt, kan je gebruik maken van online paletgeneratoren om je eigen kleurenpalet te maken, of bijpassende kleuren kiezen op basis van voorbeelden en je eigen voorkeuren.
Met de juiste aanpak kan een website kleurenschema worden gemaakt dat kan worden gebruikt als startpunt van je ontwerpproces, hoewel het wel vaak nodig blijft om de juiste webdeveloper/designer in te schakelen om de juiste professionele uitstraling te krijgen die je merk nodig heeft.
Nu is het tijd om de lettertypes te kiezen, is het niet?
Hoofdredacteur bij Kinsta en content marketing consultant voor WordPress plugin-ontwikkelaars. Verbind met <a href="">Matteo op Twitter.
Laat een reactie achter