Kleur kiezen voor WordPress webdesign | rgb hex huisstijl

Kleur kiezen WordPress webdesign rgb hex kleurencirkel

Logo cursus traing wordpress

Kleur kiezen WordPress webdesign rgb hex kleurencirkel

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 en webdesign.

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.


Harmonie van kleuren voor website

Wanneer mensen over kleurenharmonie spreken, vertrouwen zij uitsluitend op subjectieve gevoelens, terwijl het begrip kleurenharmonie een objectieve regelmatigheid is. Harmonie is evenwicht. Onze visie vraagt en beïnvloedt complementaire kleuren (tegengesteld, complementair), waardoor dit evenwicht ontstaat.

De neutrale kleur is grijs. Ons oog creëert er geen complementaire kleur mee. Om harmonieuze combinaties te maken, zijn er verschillende kleurordeningssystemen ontwikkeld. Dit zijn de en de kleurendriehoeken (afbeelding hieronder). De tegenover elkaar liggende kleuren in deze cirkel zijn complementair.

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

Kleur kiezen WordPress webdesign

Maak je eigen kleurenpalet voor je webdesign

Ik raad altijd aan om een 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


Voordelen eigen hexcodes en kleurensysteem

Op dit punt zou je de hex codes kunnen gaan gebruiken in plaats van de kleurenkiezer van uw web software. Bij de meeste webbouwers kunt u een hexcode invoeren in plaats van met de muis op een kleur te klikken, en deze aanpak heeft een aantal belangrijke voordelen.

Meer overzicht over kleuren van webdesign

Een daarvan is dat het gemakkelijker is om bij te houden welke kleuren u gebruikt. Wanneer u ontwerpt met een kleurkiezer, is het gemakkelijk om per ongeluk een kleur te gebruiken die heel dicht in de buurt komt van de kleur die u eigenlijk wilt, en dus bijna niet te onderscheiden is.

Dit betekent dat voor u het weet, uw pagina’s in twee vergelijkbare maar verschillende tinten rood zijn. Als u een hexcode gebruikt, krijgt u elke keer dezelfde kleur.

Meer consistentie over kleuren voor ontwerp

Ten tweede geeft het gebruik van hexcodes u een fijn niveau van controle over uw kleuren dat niet mogelijk is met een color picker.

Geen enkele color picker kan alle 16 miljoen kleuren bevatten die beschikbaar zijn wanneer je HTML gebruikt, maar door je eigen kleurcodes te schrijven kun je de kleuren die beschikbaar zijn één voor één laten toenemen.

Ten derde is inzicht in de manier waarop kleuren werken op een computerscherm van onschatbare waarde als het gaat om het ontwerpen van ’s, of in feite elk stukje software. Met een beetje inzicht in de manier waarop uw apparatuur code interpreteert en kleuren weergeeft, kunt u beginnen met het gebruik van hexcodes om kleuren te mengen, en er ook voor zorgen dat de kleur die u wilt weergeven ook de kleur is die daadwerkelijk op het scherm van uw gebruikers verschijnt.

Voorbeeld van kleurenschema van Arthur

Een voorbeeld van een dat ik voor een bedrijf heb gemaakt vind je hier:
www.huisstijlen.nl/kleur-kleurenschema-huisstijl-identiteit-bedrijf-cmyk-rgb-hex

Voorbeeld van kleurenschema Gemeente Amsterdam

Een ander voorbeeld van het kleurenschema van de Gemeente Amsterdam

Info Huisstijl kleuren Gemeente Amsterdam


Bron: brandcolors.net


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 kiezen

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:

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- 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


Meer informatie over Kleur kiezen WordPress webdesign rgb hex kleurencirkelof info?

Wil je meer weten? Veel bezoekers met interesse in Kleur kiezen WordPress webdesign rgb hex kleurencirkel bekeken ook de onderstaande handleidingen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress site beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je website mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Nog vragen over Kleur kiezen WordPress webdesign rgb hex kleurencirkel?

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, Kleur kiezen WordPress webdesign rgb hex kleurencirkel en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar top