Hoe u een goed kleurenschema kiest voor uw website

hoe kleur voor website te kiezenHet kiezen van een goed kleurenschema voor uw website kan eng zijn, vooral als u dat doet’heb geen vertrouwen in uw kleurcoördinatievermogen, of voel dat u’ben geen bekwame ontwerper.


Mijn man is een beetje kleurenblind, wat hem erg nerveus maakt wanneer hij ergens een kleur voor probeert te kiezen!

En jij dan?

  1. Welke kleur moet je gebruiken voor je logo of kop?
  2. Weet je hoe je complementaire kleuren kiest die goed combineren?
  3. Welk deel van uw website moet u kleur gebruiken?

Kleur kiezen en mengen kan een lastig spel zijn.

Het resultaat kan harmonieus lijken, of als een scène rechtstreeks uit een horrorfilm!

Als u kleuren vermijdt, kan uw website er ongeïnspireerd en vergeetbaar uitzien. Als u te veel kleur op uw website gebruikt, loopt u het risico dat deze er plakkerig uitziet.

Naast het niet begrijpen van het kiezen van het juiste sjabloonontwerp, is het leren hoe kleur op uw website te gebruiken een van de grootste uitdagingen waarmee elke DIY-website-eigenaar kan worden geconfronteerd. Dit geldt vooral als je dat niet doet’t hebben een natuurlijke aanleg voor kleur en design.

Als u een blanco tekent over wat en hoe u kleur op uw website op de juiste manier kunt gebruiken, kan dit bericht u helpen.

Het gebruik van kleur kan worden vereenvoudigd als u eenmaal weet wat u moet doen.

Zodat we’We hebben deze handleiding samengesteld om u stap voor stap te laten zien hoe u:

  1. Kies de juiste dominante kleur voor uw website en merk.
  2. Combineer complementaire kleuren om uw perfecte kleurenschema te creëren.
  3. Kies een achtergrondkleur die voor jou werkt.
  4. Gebruik kleur op de juiste plaatsen op uw website – als een professional.

Laat’s aan de slag!

Of kijk eens snel naar onze favoriete website-bouwers in deze eenvoudige tabel hieronder:

Hoe kleur uw website en merkidentiteit kan verbeteren

Als ik je vraag om aan Coca-Cola te denken, wat is het eerste dat in je opkomt?

Nou, misschien wil je een ijskoude fles Coca-Cola.

Dan kan een afbeelding van het iconische rode cola-logo in je opkomen.

hoe website kleur te kiezen - colaBron: www.coca-colacompany.com

Het’Het is best moeilijk om aan Coca-Cola te denken zonder de kleur rood te zien. De kleur rood maakt net zo goed deel uit van Coca-Cola als zijn beroemde frisdrank.

Wist u dat Coca-Cola heeft besloten om rood te gebruiken omdat hun merkkleur niet toevallig was??

De kleur rood heeft twee cruciale doelen:

# 1 Dankzij de brandweerauto rood kan Coca-Cola zich onderscheiden van hun concurrenten in de winkelschappen; en

# 2 Elke kleur heeft verschillende gevoelens of emoties. Wanneer mensen de kleur rood zien, veroorzaakt dit emotionele reacties zoals opwinding, durf, liefde en passie. Dit zijn precies de gevoelens die Coca-Cola wil dat je associeert met zijn frisdrank.

website kleurplukken - coca colaBron: us.coca-cola.com

Wanneer u de juiste kleur voor uw website kiest, doet u zoveel meer dan alleen dat het er aantrekkelijk uitziet – Je creëert een gedenkwaardig merk.

85% van de klanten plaatst kleur als belangrijkste reden waarom ze een bepaald product kopen. 80% toename van merkherkenning bij gebruik van kleur. Merkherkenning houdt rechtstreeks verband met het consumentenvertrouwen.

Bron: Kissmetrics

Je zou nu moeten denken “Wow, kleur is als magie! Waarom niet’t meer mensen gebruiken het in hun voordeel?”

Nou, omdat de meeste mensen dat doen’t weet hoe.

Dus in het volgende gedeelte laten we u drie eenvoudige stappen zien die u kunt volgen om kleur in uw voordeel te gebruiken op uw website.

3 stappen om kleur op uw website te gebruiken – op de juiste manier

Er zijn 3 hoofdkleuren waarmee u rekening moet houden bij het ontwerpen van uw website:

  1. Een dominante kleur kiezen als uw merkkleur
  2. Het kiezen van 1 tot 2 accentkleuren om een ​​kleurenschema voor uw website te creëren
  3. Een achtergrondkleur kiezen om uw ontwerp te voltooien

Dat’het is zo ongeveer! Don’maak je geen zorgen, wij’Ik zal je laten zien hoe je ze kunt kiezen, samen met enkele voorbeelden – laat’s blijven vooruitgaan!

# 1 Kies je dominante kleur

De dominante kleur is uw merkkleur – zoals de brandweerauto rood voor Coca-Cola.

Deze kleur helpt bepaalde emoties of gevoelens naar boven te halen wanneer mensen op uw website komen – net als passie, opwinding, moed en liefde voor cola.

Dit is de kleur waarvan u wilt dat uw publiek ze onthoudt wanneer ze aan u denken.

Als je al een logo hebt, zorg er dan voor dat een van de primaire kleuren van je logo je dominante kleur gebruikt (als je dat doet’Weet u niet zeker hoe u een goed logo moet maken, zie deze handleiding).

Maar als je dat niet doet’Nog geen dominante merkkleur in gedachten, hier’s hoe je er een kiest:

Betekenis van kleuren: hoe u de juiste kleur voor u kiest

Grote bedrijven don’Kies niet per ongeluk hun dominante / merkkleuren. Het’s strategisch gekozen om te worden gebruikt als onderdeel van hun branding- en marketinginitiatieven.

Verschillende kleuren kunnen specifieke soorten klanten aantrekken en kunnen zelfs het gedrag van de consument veranderen.

kleurpsychologie voor websitesKlik om te vergroten

Bron: Kissmetrics

U kunt ook verschillende kleuren in uw voordeel gebruiken, zodat u het gewenste type klant kunt aantrekken.

Wij’We hebben een handige infographic gemaakt om u te helpen bij het kiezen van uw perfecte dominante kleur. Kijk of u de kleur kunt vinden die het beste overeenkomt met waar u voor staat!

persoonlijkheid van kleur voor websites

Nu u een goed idee heeft van wat bepaalde kleuren betekenen, welke het beste bij uw bedrijf past, of hoe u wilt dat uw websitebezoekers zich voelen wanneer ze uw merk zien?

als jij’Weet u het nog niet precies, dan betekent dat dat u even de tijd moet nemen om na te denken over uw merk en het type klanten dat u wilt aantrekken.

Probeert u jongere, meer energieke klanten aan te trekken? Of verfijnde individuen met meer besteedbaar inkomen? Zijn uw producten / diensten gericht op mannen of vrouwen? Zijn ze geschikter voor een bepaalde leeftijdsgroep?

Niet alle kleuren zijn geschikt voor uw bedrijf. Als je bijvoorbeeld yogamatten verkoopt, is het gebruik van paars (rijkdom, royalty) of zwart (macht, luxe) misschien niet de beste keuze. Je zou kunnen overwegen om groen (gezondheid, rust), grijs (eenvoud, kalm), blauw (vrede, kalm) of zelfs rood (passie, energie) te gebruiken.

Ga je gang en neem een ​​paar minuten de tijd om wat ideeën op te schrijven.

De verschillen tussen jongens & Girls – Hun kleurvoorkeuren

Oké, verschillende kleuren spreken verschillende soorten mensen aan, maar wist je dat mannen en vrouwen over het algemeen ook de voorkeur geven aan verschillende kleuren?

Op welk geslacht richt uw bedrijf of website zich? – Zijn het vrouwen? mannen? of allebei?

kleur invloed op geslachtKlik om de afbeelding te vergroten

Bron: Infographic: hoe kleuren conversies beïnvloeden & Geslacht en kleur

U kunt een zeer krachtige en gerichte merkkleur creëren door de bovenstaande tabel te bestuderen.

Door kleurencombinaties te gebruiken die de voorkeur genieten van mannen, vrouwen of beide, kunt u hun perceptie van uw merk veranderen – onbewust.

Aan de hand van onderzoeken kun je bijvoorbeeld zien dat zowel mannen als vrouwen van blauw en groen houden. Beide geslachten houden ook niet van oranje en bruin. Dus als u beide geslachten target, zegt het onderzoek dat het voordeliger zou zijn om blauw of groen te gebruiken als uw dominante kleur (of op zijn minst accentkleur – meer hieronder).

Dit is nuttige informatie om te hebben!

Laat’s nog een stap verder gaan.

Hoe u kleur gebruikt voor uw merk of producten / diensten, kan ook worden beïnvloed door welke emoties uw doelgroep trekt.

Laat het me uitleggen.

kleur-van-merk-trekt-verschillende-klant aanVaak kopen mensen specifieke producten / diensten omdat ze onbewust een bepaalde persoonlijkheid op anderen willen projecteren.

Gezien worden op straat met een nieuwe dure portemonnee, rondhangen in een hipster-coffeeshop of gezien worden in een trendy nieuwe lounge, communiceren allemaal stilletjes bepaalde kenmerken over een persoon.

Begrijp je mijn punt? Veel persoonlijke beslissingen weerspiegelen wie ze voelen dat ze zijn en wat ze willen dat anderen zien. Het’is een identiteit waar mensen mee associëren en die anderen willen laten weten.

Dus, als je mensen wilt aantrekken die zich identificeren met de natuur en rust, gebruik dan groen. Als je mensen wilt aantrekken die als jong of optimistisch willen worden gezien, probeer dan geel. Als je doelgroep als krachtig of luxueus wil worden gezien, probeer dan zwart.

Snap je?

Neem een ​​paar minuten de tijd om na te denken over je ideale publiek en waar ze zich mee willen identificeren. Wat willen ze en hoe willen ze gezien worden?

Veel psychologie hier, maar het’Het is belangrijk om te overwegen bij het opbouwen van uw merk.

Hoe u uw dominante kleur op uw website kunt gebruiken

Nu je een dominante kleur hebt, wil je kleur op de juiste plekken op je website gebruiken.

Kleur trekt veel aandacht, dus dat doe je niet’t wil het overal plaatsen.

Hier’s een algemene vuistregel:

Gebruik uw dominante kleur alleen op een beperkt aantal plaatsen waar u wilt dat uw websitebezoekers aandacht aan besteden, of als u wilt dat uw bezoekers bepaalde acties ondernemen (zoals een telefoonnummer bellen, een contactformulier invullen, inschrijven voor een nieuwsbrief, enz.).

Kortom, je dominante kleur hoort te zijn “knal” – echt benadrukken waar u uw bezoekers op wilt richten.

waar dominante kleur te gebruiken op de websiteBron: Wix.com

# 2 Kies je accentkleuren

Het is best saai om slechts één enkele kleur op je hele website te hebben.

Om uw ontwerp interessanter (en professioneler) te maken, heeft u accentkleuren nodig om aandachtwaardige delen van uw website te benadrukken, zoals citaten, knoppen of ondertitels.

Kleurmenging en matching maken eigenlijk veel mensen bang omdat het zo is’het is niet altijd gemakkelijk of intuïtief om te zien welke kleuren goed bij elkaar passen zonder een goed begrip van de kleurentheorie en veel vallen en opstaan.

Maar wie heeft er tijd om een ​​Ph.D. in kleurentheorie ?! – Niet ik.

Godzijdank is er een snelkoppeling die iedereen kan gebruiken !! Het’s een tool voor kleuraanpassing waarmee u kleuren als een professional kunt combineren!

Hoe u een hulpmiddel voor kleuraanpassing gebruikt om u te helpen bij het selecteren van uw accentkleuren

Zodra je je dominante kleur hebt, is het’Het is heel gemakkelijk om uw accentkleuren te vinden met kleuraanpassingstools zoals Adobe Color CC-tool.

Adobe Color CC ziet er ingewikkeld uit, maar het is eigenlijk een vrij eenvoudige tool om te gebruiken.

Wij’We hebben een korte tutorial gemaakt om u te laten zien hoe u deze kunt gebruiken om uw kleurenschema op twee manieren op te bouwen:

(Klik hieronder om de tutorial te openen)

Hoe u uw accentkleuren op uw website kunt gebruiken

Nu u uw complementaire accentkleuren heeft, kunt u deze gebruiken om secundaire informatie op uw webpagina’s te markeren.

Dit zijn inhoud / items die niet de belangrijkste aandachtspunten van uw pagina zijn, maar u wilt toch dat ze opvallen.

Dit kunnen bijvoorbeeld de ondertitel, secundaire knoppen, informatiekaders, achtergrondkleur, enz. Zijn.

Probeer te beperken tot slechts 1 of 2 accentkleuren. Als er te veel accentkleuren zijn, zullen ze te veel brandpunten creëren die uw bezoekers kunnen verwarren.

waar u accentkleur op uw website kunt gebruikenBron: Wix.com

# 3 Kies de achtergrondkleur van uw website

Hoe de achtergrondkleur van de website te kiezenHeb je ooit een huis geschilderd??

Zo ja, dan heeft u waarschijnlijk enige ervaring met het kiezen van een muurkleur – en weet u dat het kiezen van de juiste muurkleur een uitdaging kan zijn.

Je wilt dat de muurkleur de ruimte comfortabel maakt. De kleur moet zo rustgevend zijn dat je uren in de kamer kunt doorbrengen zonder dat de kleur je overweldigt.

Tegelijkertijd doe je dat niet’Ik wil niet dat de kleur zo saai is dat de kamer volledig steriel aanvoelt.

Het kiezen van een achtergrondkleur lijkt eigenlijk veel op het kiezen van een muurverfkleur!

U wilt dat uw websitebezoekers zich op hun gemak voelen bij het browsen op uw website. Jij niet’u wilt uw bezoekers niet irriteren of het moeilijk maken om uw inhoud te absorberen door te sterke of felle achtergrondkleuren te gebruiken. Tegelijkertijd doe je dat niet’wil niet dat uw website zo blasé is dat uw publiek’s ogen zijn alleen maar verglaasd over alle belangrijke dingen die je wilt zeggen.

Hoe u de juiste achtergrondkleur kiest?

Als je muurkleuren zou kiezen voor een trendy winkel en een zomerhuisje, zou je dezelfde kleuren voor hen kiezen?

Waarschijnlijk niet omdat elke ruimte een ander doel heeft, dus de kleur die u kiest, moet anders zijn.

In een kledingwinkel in een winkel zou je bijvoorbeeld gewaagde kleuren willen gebruiken om klanten naar de kledingrekken te trekken. Je wilt dat de muurkleur contrasteert met de merchandiseplanken, zodat klanten meteen weten waar ze moeten kijken wanneer ze de winkel binnenkomen.

Daarentegen wilt u zich waarschijnlijk meer ontspannen voelen in een vakantiehuis in een huisje. Je wilt dat je muurkleur en -decor een rustgevend en ontspannend effect hebben. U wilt dat alles opgaat in het interieur, zodat u zich vanuit het extra grote raam kunt concentreren op het adembenemende landschap.

Op een vergelijkbare manier hangt de achtergrondkleur van uw website af van waar u uw bezoekers op wilt richten.

Simpel gezegd, de kleur die u kiest als achtergrondkleur hangt volledig af van het doel van uw website.

Type # 1 – Contentintensieve informatiewebsites & eCommerce-websites

Is het u ooit opgevallen dat de meeste informatieve websites of e-commerce websites meestal een witte of een neutrale achtergrondkleur gebruiken?

eCommerce-websiteeCommerce-website (drinksoma.com)

eCommerce-websiteeCommerce-website (stikwood.com)

Food BlogFood Blog (pinchofyum.com)

FilmproductiebedrijfFilmproductiebedrijf (dingobill.com)

Dit komt omdat het doel van dit soort websites is om ideeën of producten te promoten.

De focus ligt op de inhoud of producten, in plaats van op het ontwerp van de website. De achtergrondkleur is slechts een achtergrond om de inhoud zichtbaarder en leesbaarder te maken.

Het beste kleurenschema dat u kunt gebruiken voor informatie-intensieve en e-commerce websites is een witte of lichte achtergrond, met vetgedrukt dominant & accentkleuren. De gedurfde dominante en accentkleuren geven de website persoonlijkheid en aandachtspunten, terwijl de effen achtergrondkleur uw bezoekers houdt’ focus op uw inhoud of producten.

Type # 2 – Zakelijke / zakelijke websites

Bedrijfs- / zakelijke websites hebben meestal twee doelen: het promoten van het merk of zijn diensten.

Afhankelijk van het doel waarop uw bedrijfswebsite zich wil concentreren, zal uw achtergrondkleur anders zijn.

Een merk promoten

Als u een sterke merkidentiteit wilt opbouwen, moet u verschillende tinten van uw dominante of merkkleur als achtergrondkleur gebruiken.

Dit komt omdat kleur nauw verbonden is met merkherkenning (onthoud ons voorbeeld van Coca Cola hierboven?) Wanneer u een variatie van uw dominante / merkkleur als achtergrond gebruikt, versterkt u uw merk en maakt het uw publiek gedenkwaardiger..

Als u een zeer gewaagde merkkleur heeft, kan het gebruik ervan als uw achtergrondkleur te overweldigend zijn. Als dat het geval was, overweeg dan om een ​​minder intense tint van uw merkkleur te kiezen. Gebruik de Adobe Color CC-tool om verschillende tinten en helderheid van uw dominante kleur te genereren.

hoe u website-achtergrondkleur kiest voor corporate website brandingjustactions.org
hoe u een website-achtergrondkleur kiest voor bedrijfswebsite-brandingsbjdanebury.com

Een dienst promoten

Als u wilt dat de waarde van uw service of uw portfolio van eerdere projecten centraal staat, gebruik dan wit of een neutrale achtergrondkleur.

Net als inhoudintensieve en e-commerce websites, doe je dat niet’t wil dat uw achtergrondkleur de focus weghaalt van uw inhoud of het bericht dat u wilt overbrengen.

Door een neutrale of witte achtergrond te kiezen, zal uw inhoud natuurlijk meer aandacht trekken.

hoe u een zakelijke achtergrondkleur voor de website kiestzengenti.com
hoe u een zakelijke achtergrondkleur voor de website kiestcharddevelopment.com

Type # 3 – Stijlvol & Creatieve websites die grafisch intensief zijn

Voor websites die worden gebruikt in de mode-, design-, restaurant-, beauty- en creatieve industrie, is de wereld uw oester.

Er zijn echt geen regels over welke achtergrondafbeelding of kleuren u moet gebruiken. Je kunt een zwarte menubalk gebruiken om meer drama te creëren; Of u kunt alle kleuren van de regenboog gebruiken om een ​​inspirerende achtergrondafbeelding te creëren.

hoe website restuarant voor de achtergrondkleur te kiezentheeddynyc.com
hoe u achtergrondkleur creatief kunt kiezencafefrida.ca
hoe u achtergrondkleurontwerp voor websites kieststudiolovelock.com
hoe u website-achtergrondkleur luxe kiestgillemore.com

Eerlijk gezegd kun je hier alle regels overtreden en elke gewenste kleur gebruiken, zolang je deze regel maar in gedachten houdt – “Kies nooit een achtergrond waardoor uw tekst of inhoud moeilijk leesbaar is.“

Uw perfecte achtergrondkleur is er een waarmee uw inhoud het middelpunt kan zijn terwijl u harmonieus samenwerkt met uw dominante & accentueer kleuren en laat uw publiek zich goed voelen tijdens het browsen op uw website.

Gebruik bij twijfel wit of heel lichtgrijs als achtergrondkleur. Hoewel het misschien niet de meest inspirerende kleur is, weet je dat je inhoud er altijd doorheen zal schijnen.

Conclusie & Belangrijkste leerpunten

Het kiezen van het juiste kleurenschema voor uw website mag nooit gebaseerd zijn op uw favoriete kleur of op een onderbuikgevoel.

Een goed website-ontwerp is er een die zijn publiek altijd op de eerste plaats zet.

Kies kleur en design die uw doelgroep aanspreken, zodat u (onbewust) een gedenkwaardige verbinding kunt maken en u kunt onderscheiden van uw concurrentie.

Het kiezen van kleurenschema’s mag helemaal niet willekeurig zijn. In plaats daarvan zou het een reeks georganiseerde, objectieve, matchende oefeningen moeten zijn:

(1) uw merk matchen met de juiste dominante kleur; (2) het matchen van de dominante kleur met accentkleuren met behulp van de Adobe-tool; en tenslotte (3) het matchen van de achtergrondkleur met je dominant & accentkleuren.

Door onze 3 bijpassende stappen hierboven te volgen, kunt u een goede kleurencombinatie voor uw website maken, zelfs als u dat niet doet’t hebben een goed gevoel voor design en kleurcoördinatie!

Don’wees niet bang om wat kleur in uw website te injecteren en heb plezier met het proces! Vergeet niet dat uw kleur uw inhoud niet moet overheersen!

Vond deze gids nuttig?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me