Kleur kiezen WordPress webdesign rgb hex kleurencirkel
Kleur kiezen voor webdesign en WordPress kan soms lastig zijn. Hieronder vind je tips en documentatie hoe je efficient te werk kan gaan bij het bepalen en implementeren van kleur voor je WordPress huisstijl en webdesign.
IN DEZE HANDLEIDING:
RGB en HEX-kleuren en webdesign
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.
Kleurencirkel
Deze kleurencirkel vind ik heel handig voor het bepalen van kleuren voor je website:
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 voor je webdesign
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:
d48cf8
0e8044
b5e582
08302f
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
543863
084c28
485b34
a970c6
0c733d
90b768
d48cf8
0e8044
b5e582
08302f
f2f2f2
e0aefa
9eccb4
daf2c0
faf3fe
e6f2ec
f0f9e6
Voorbeeld van kleurenschema van Arthur
Een voorbeeld van een kleurenschema dat ik voor een bedrijf heb gemaakt vind je hier:
www.huisstijlen.nl/kleur-kleurenschema-huisstijl-identiteit-bedrijf-cmyk-rgb-hex
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
Bronnen en gereedschap voor kleuren
Algemeen kleur totaaloverzicht
Alle informatie over kleur mooi bij elkaar:
Cursuswp.com/kleur
Handleidingen en tips over kleur
Meer tips en handleidingen over kleur en design:
- 50 Kleurenschema’s kleuren & kleurcodes voor WordPress design
- Kleur kiezen WordPress webdesign rgb hex kleurencirkel
- Beste kleurentools en webdesign gereedschap voor ontwerpers
- Kleurendatabase namen kleurenoverzicht rgb hex css
- Verloop kleurverloop voorbeelden gradient webdesign ontwerp websites
216 websafe heldere kleuren
Mooi overzicht met heldere kleuren:
websafecolors.info
Kleurenmixers
Perfect voor het maken van kleurcombinaties. Ik hou van deze sites. Tips:
rgb.to
color-hex.com
colorhexa.com
encycolorpedia.nl
Contrast ratio checken tussen 2 kleuren
Een mooie tool om het contrast tussen kleuren te checken. Ideaal voor de leesbaarheid van je tekst en een must voor het berekenen van de zogenaamde Contrast Ratio.
Voer op www.webaim.org een voorgrond- en achtergrondkleur in het hexadecimale RGB-formaat in (bijv. #f2f2f9 of #F7CA38) of kies een kleur met behulp van de kleurkiezer. De Lightness-schuifregelaar kan worden gebruikt om de geselecteerde kleur aan te passen.
WCAG 2.0 niveau AA vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. WCAG 2.1 vereist een contrastverhouding van ten minste 3:1 voor grafische en gebruikersinterfacecomponenten (zoals de invoergrenzen van formulieren). WCAG-niveau AAA vereist een contrastverhouding van ten minste 7:1 voor normale tekst en 4,5:1 voor grote tekst.
webaim.org/resources/contrastchecker
Documentatie en uitleg kleur
Algemene informatie over kleur op beeldschermen:
Wikipedia | Lijst van HTML-kleuren