Kleur kiezen voor je WordPress webdesign | rgb hex huisstijl

Kleur kiezen voor webdesign en WordPress kan soms lastig zijn. Hieronder vind je tips en documentatie hoe je effecient te werk kan gaan bij het bepalen en implementeren van kleur voor je WordPress huisstijl en webdesign.

RGB en HEX-kleuren

De kleuren op je scherm worden uit rood, groen en blauw samengesteld (RGB). De drie waarden kunnen lopen van 0 tot 255. Een volledige kleur kan in RGB worden aangeduid als bijvoorbeeld [255, 20, 147]
Deze drie RGB-waarden oplopend van 0 tot 255, zijn om het makkelijk en overzichtelijk te maken vertaald naar een code van 6 letters of cijfers van 0 tot 9 en van A tot F. Dit wordt de HEX-waarde genoemd van hexadecimaal.
Een voorbeeld: de RGB kleurcode [255, 20, 147] komt hexadecimaal overeen met kleurcode FF1493 (deeppink). Bekijk het overzicht van alle HEX-kleuren.

Er zijn 216 kleuren die op de meeste schermen hetzelfde ogen. Dit zijn de meest heldere kleuren. Ik raad aan om eerst hier uit te kiezen omdat dit een veilige keus is voor je website op verschillende beeldschermen, tablets en telefoons.

RGB en HEX-waardes berekenen en omzetten

Bekijk de onderstaande link om je RGB-waardes, bijvoorbeeld van je logo of huisstijl, om te zetten naar een HEX-waarde.
www.rgbtohex.net/rgb

Kleurenpalet voor huisstijl en webdesign

Maak je eigen kleurenpalet

Ik raad altijd aan om een kleurenpalet samen te stellen voor de huisstijl van je website. Op deze manier hou je je site mooi op orde qua kleur en is er meer overzicht voor jezelf en voor de bezoeker van je site. Een kleurenpalet kan er zo uitzien:

Kleur 1
d48cf8

Kleur 2
0e8044

Kleur 3
b5e582

Kleur 4
08302f

Kleur 5
f2f2f2

Geavanceerde kleurenpaletten maken

Als je een basisset met kleuren hebt kun je dit uitbreiden met donkere en lichte varianten. Dit is heel handig als je een grotere site hebt met veel kaders en vlakken. Tijdens de WordPress cursus op maat of WordPress Designcursus leg ik uit hoe je dit kunt maken met iedere kleur.

Kleurenschema voorbeeld

Kleur 1
543863

Kleur 2
084c28

Kleur 3
485b34

Donker

Kleur 1
a970c6

Kleur 2
0c733d

Kleur 3
90b768

Donkere tint

Kleur 1
d48cf8

Kleur 2
0e8044

Kleur 3
b5e582

Kleur 4
08302f

Kleur 5
f2f2f2

Kleur 1
e0aefa

Kleur 2
9eccb4

Kleur 3
daf2c0

Lichte tint

Kleur 1
faf3fe

Kleur 2
e6f2ec

Kleur 3
f0f9e6

Licht

Voorbeelden kleurcombinaties voor WordPress

Ik heb een aantal voorbeelden van kleuren en kleurcombinaties op een rijtje gezet. Deze vind je hier:
50 voorbeelden van kleurcombinaties voor je WordPress website

Blij met deze design tip?

Heb je een training gevolgd en tevreden over de handleidingen en tips? Laat dan een review achter. Je helpt Arthur dan zijn werk sustainabel te maken. Bekijk ter inspiratie de reviews:

Bekijk reviews