32 kleurenschema's voor websites met hex-codes, afkomstig uit We.Inc-templateontwerpen, plus hoe je een schema bouwt dat converteert: een rustig basispalet met één accent gereserveerd voor acties, voorbeelden per branche en toegankelijkheidscontroles.
Geen enkele kleur wint overal. De beste knopkleur is een kleur die sterk contrasteert met je pagina en nergens anders voor wordt gebruikt, zodat het oog er direct naartoe gaat.
Een gangbare aanpak is een neutrale basis (wit of gebroken wit en een donkere tekstkleur), één primaire merkkleur en één accent voor calls-to-action, plus semantische kleuren voor succes- en foutmeldingen. Meer dan dat verzwakt meestal de visuele hiërarchie.
Kleurassociaties bestaan, maar ze verschillen per cultuur, branche en context en veel populaire beweringen zijn overdreven. Wat conversie betrouwbaar beïnvloedt, is contrast, leesbaarheid en of de actie die je wilt visueel duidelijk is.
Industriële kopers waarderen duidelijkheid en vertrouwen. Marineblauw, antraciet en staalgrijs met één sterk accent, vaak veiligheidsoranje, geel of helderblauw, passen bij de categorie. Zorg dat specificatiebladen, offerteknoppen en telefoonnummers het accent gebruiken zodat ze makkelijk te vinden zijn.
Gebruik een contrastchecker zoals die van WebAIM. WCAG 2.2 niveau AA vraagt minstens 4.5:1 contrast voor normale tekst en 3:1 voor grote tekst en voor belangrijke interface-elementen zoals knoprandjes en formuliervelden.
Geen enkele kleur converteert het best. Wat telt is hoe goed een knop opvalt tegen de rest van de pagina. De kleurenschema's die converteren zijn die met een rustige, consistente basis en één accent met hoog contrast dat alleen is gereserveerd voor de acties die je wilt dat mensen ondernemen.
Vraag dus niet "welke kleur?", maar "lijkt mijn belangrijkste knop op niets anders op de pagina?" Deze gids laat zien hoe je een schema rond dat idee bouwt.
Deze paletten zijn afkomstig uit de bron van de eigen templateontwerpen van We.Inc (de vier meest gebruikte kleuren in de voorvertoning van elk ontwerp, exclusief de gewone grijstinten van het voorvertoningsframe). Het zijn templateontwerpen, geen klantsites, en we doen geen uitspraken over hoe ze converteren. Kopieer een hex-code naar de hex-kleurenkiezer om hem te bekijken en RGB/HSL-waarden te krijgen, en controleer elk tekst-op-achtergrond-paar in de kleurencontrastchecker voordat je het gebruikt.
| We.Inc-templateontwerp | Stijl | Kleuren (hex) | Schema |
|---|---|---|---|
| Atlas Builders | Bouw / ambachten | #101d2c #0b1521 #f2a614 #d18f0a | Diep marineblauw, amber actieknop |
| Summit Trades | Ambachten | #0e2436 #e4671e #16222e #f6eeec | Marine met veiligheidsoranje |
| Ironpeak Roofing | Dakdekkers | #e4671e #0e2436 #17415f #16222e | Oranje als basis, marinestructuur |
| Ridgewater Plumbing | Loodgieters | #b08544 #d8401f #f2ede3 #c9a063 | Messing en rood op warm crème |
| Sunward Solar | Zonne-energie | #0b1f3a #f5a524 #d98a0b #fff6e6 | Middernachtblauw en zonnegoud |
| Hookline Towing | Takeldienst | #0e0e0e #ffc400 #f4f1ea #161616 | Zwart en goed zichtbaar geel |
| Redline Auto Group | Autodealer | #e3262e #0e0f11 #eeeeee #17191c | Racerood op bijna-zwart |
| Maple Street Motors | Autoreparatie | #1f4d3a #1b1b1b #f2b134 #e6efe9 | Bosgroen met mosterd |
| Freshpile Carpet Cleaning | Schoonmaak | #ffd23f #0d1b52 #1d3fd8 #dbe2ff | Felgeel op koningsblauw |
| Tideline Pressure Washing | Buitenreiniging | #0b1b2b #3fd0c9 #f3f6f5 #020617 | Donker marine met aqua |
| Mowline Lawn Care | Gazononderhoud | #eef3e6 #c6f24e #0f1410 #1a2a17 | Bleekgroene basis, limoenaccent |
| Fairway Lawn Co. | Landschapsarchitectuur | #f6f1e7 #1d2b1f #e8c872 #2f5d3a | Crème, diepgroen, zacht goud |
| Brightside Dental | Tandarts | #10312e #3f605c #0e5f57 #0a4841 | Rustige blauwgroenen |
| Meadowpaw Veterinary | Dierenarts | #2f6e6a #e9f0ef #c9d7d4 #f7f9f8 | Gedempt blauwgroen op bleek mint |
| Vibrant Wellness | Wellnesskliniek | #25382c #eef2e6 #7c9a7e #3f6b4a | Salie en woud |
| Kinfolk Home Care | Thuiszorg | #0f3d2e #f4c542 #fffdf6 #0a2e22 | Dennegroen met warm geel |
| Lumora | Gezondheidszorg | #c8a97e #182c41 #0b1220 #0e1a26 | Middernacht marine met zandgoud |
| Sterling & Vance LLP | Advocatenkantoor | #8a93a2 #b08a4f #0b0e14 #f6eeec | Lei, brons en inkt |
| Harborview Wealth Partners | Financieel advies | #102a43 #b08d57 #d9bf8f #faf8f4 | Marine en goud op ivoor |
| Harborline Insurance Agency | Verzekeringen | #0f2742 #5fd3c9 #17a398 #0b1e33 | Marine met blauwgroen |
| Larkfield Partners | Adviesbureau | #1f4d3f #f4f1ea #14181c #4a5560 | Flesgroen op papier |
| Keystone Realty | Vastgoed | #f6eeec #7a2e2a #59606b #e9f0ef | Blosembasis met oxbloedrood |
| Lucia Trattoria | Restaurant | #e9c9a8 #f7f1e6 #efe6d4 #23301f | Warm zand met olijfzwart |
| Ember & Roast | Café / restaurant | #ede6dc #c9642f #14100d #f6eeec | Haver, verbrand oranje, espresso |
| Kilnhouse Coffee | Koffieshop | #2b1d16 #c65d3b #f3ebe0 #fff8ef | Roosbruin en terracotta |
| Parcel No. 9 Wines | Wijnhuis | #3a0a15 #fbe9e3 #b8324b #f4a7a0 | Bordeauxrood met rozé |
| Petalry Florist | Bloemist | #3e1f2b #b4546c #fbf5f2 #f3e3dd | Pruim en roze poeder |
| Hollow Oak Farm Shop | Boerderijwinkel | #24301f #f6f1e4 #5e7f3a #e3a33b | Mos, crème en honing |
| Suds & Scruff | Huisdierenverzorging | #3b1740 #ffd84d #ff8fab #fff8e7 | Aubergine, geel en roze |
| Datacore SaaS Hero | SaaS | #7b39fc #a484d7 #6a2ce0 #f87b52 | Violet met koraal |
| Mast Security | Beveiliging | #1e2628 #34e0a1 #e7ede9 #8d9a97 | Grafiet met mint |
| Afterglow Sound | Evenementen / muziek | #efeaff #f472b6 #ec4899 #8b5cf6 | Lavendel, roze en paars |
Een patroon dat je overal ziet: de meeste combineren een donkere of bleke basis met één verzadigd accent (amber, oranje, geel, limoen of koraal). Dat is dezelfde "rustige basis, één actieknop"-structuur die hieronder wordt beschreven.
Artikelen over kleurenpsychologie beweren vaak dat blauw vertrouwen betekent, rood urgentie en groen groei. Algemene associaties bevatten enige waarheid, maar ze hangen sterk af van cultuur, branche en context. Rood is in de ene situatie een waarschuwing en in een andere een viering. Groen kan "ga", "eco" of "geld" betekenen.
Goed onderbouwd is het isolatie-effect, ook bekend als het Von Restorff-effect: een item dat verschilt van zijn omgeving wordt eerder opgemerkt en onthouden. Een knop in het enige oranje op een blauw-witte pagina wordt opgemerkt. Hetzelfde oranje op een pagina vol oranje niet.
Dat geeft je twee regels die in alle branches gelden:
Interieurontwerpers gebruiken een verdeling 60-30-10 en die vertaalt goed naar websites:
| Aandeel | Rol | Gangbare keuze |
|---|---|---|
| ~60% | Achtergrond en basis | Wit, gebroken wit, heel lichtgrijs of een diep donker voor donkere thema's |
| ~30% | Merk en structuur | Primaire merkkleur voor headers, navigatie, sectieachtergronden |
| ~10% | Accent / actie | Knoppen, belangrijke links, het ene ding waarop je wilt dat wordt geklikt |
Voeg een donkere tekstkleur toe (bijna zwart of donkergrijs in plaats van puur zwart is gangbaar) en semantische kleuren: groen voor succes, rood voor fouten, oranje voor waarschuwingen. Houd die semantische kleuren weg van je hoofdknoppen zodat een knop "Nu kopen" niet wordt verward met een fout.
Heb je een logo, neem dan de hoofdkleur ervan als primair. Zo niet, kies er dan een die past bij je categorie (zie de tabel hieronder) en die je mooi genoeg vindt om mee te leven.
Kijk naar het kleurenwiel. Complementaire kleuren (tegenover elkaar) geven de sterkste pop: blauw en oranje, paars en geel, blauwgroen en koraal. Als je merk blauw is, valt een oranje of warmgeel accent veel meer op dan een tweede tint blauw.
Kies een achtergrond, een oppervlaktekleur voor kaarten, een randgrijs en een tekstkleur. Die doen het meeste werk en moeten rustig zijn.
Laat elke combinatie van tekst en knop door een contrastchecker lopen (die van WebAIM is gratis). WCAG 2.2 niveau AA vereist:
Lichtgrijze tekst met laag contrast op wit is een van de meest voorkomende leesbaarheidsproblemen op het web. Als mensen moeite hebben je aanbod te lezen, doet de knopkleur er nauwelijks toe.
Controleer je palet op een telefoon buiten, op een goedkoop laptopscherm en in donkere modus als je site die ondersteunt. Kleuren die op de monitor van een ontwerper verfijnd ogen, kunnen elders vervagen.
Dit zijn zinnige uitgangspunten, geen regels. Elk gebruikt een rustige basis en één contrasterend accent.
| Branche | Basis en primair | Accent voor acties | Waarom het werkt |
|---|---|---|---|
| Industrie / productie | Marineblauw, antraciet, staalgrijs | Veiligheidsoranje of geel | Serieus en betrouwbaar, met een zichtbare "Vraag een offerte aan" |
| Gezondheidszorg / tandarts | Wit, zachtblauw of blauwgroen | Warm koraal of groen | Schoon en rustig, boekingsknop valt op |
| Juridisch / financieel | Diep marineblauw of bosgroen, crème | Goud of helderblauw | Traditionele vertrouwenssignalen met een duidelijke contactactie |
| Restaurants / eten | Warme neutralen, diep rood of olijf | Helder geel of oranje | Smakelijk, met een duidelijke "Bestel" of "Boek" |
| SaaS / tech | Wit of bijna zwart, indigo of blauw | Levendig groen, oranje of roze | Scherp, met een "Begin gratis" met hoog contrast |
| Schoonheid / welzijn | Blush, saliegroen, crème | Diep pruim of zwart | Zacht merk, zelfverzekerde boekingsknop |
| Huisdiensten (loodgieters, HVAC, dakwerk) | Wit, donkerblauw | Rood of oranje | Belknop die urgent aanvoelt voor noodgevallen |
| E-commerce / mode | Vooral wit en zwart | Eén merkaccent | Laat productfoto's de kleur dragen |
Specifiek voor fabrikanten: kopers komen vaak op een product- of capaciteitenpagina terecht en willen een specificatieblad of een offerte. Maak "Vraag een offerte aan", "Download specificatieblad" en het telefoonnummer de enige elementen in accentkleur op die pagina's.
Stel je de site van een hoveniersbedrijf voor met een groen logo, groene koppen, groene iconen, een groene heroachtergrond en een groene knop "Vraag een gratis schatting aan". Alles past bij het merk en de knop verdwijnt.
De oplossing:
Aan het merk veranderde niets, maar de actie is nu het meest zichtbare op het scherm.
Heb je genoeg verkeer, voer dan een A/B-test uit op de knop- of accentkleur, maar verander één ding tegelijk en laat het lang genoeg lopen om betekenis te hebben. Sites met weinig verkeer kunnen vaak geen betrouwbaar resultaat bereiken; voor hen werken eenvoudigere controles:
Kleur is één onderdeel van wat een pagina laat converteren; ons overzicht van voorbeelden van landingspagina's die converteren behandelt de rest. Met We.Inc beschrijf je de look die je wilt in de chat, zoals "marineblauw en grijs met een oranje offerteknop", bekijk je templates en stem je kleuren daarna visueel of in code af.
Gratis beginnen · Geen creditcard nodig