gr test 202209

Gulden Snede kleuren

Harmonisch kleurensysteem voor webdesign

Over de Gulden Snede
Kleuren, beeldschermen en webdesign
Hoe werken Gulden snede kleuren

343 kleuren overzicht
6 grijswaarden
27 kernkleuren
Complementaire kleuren

Kleurvoorbeelden
Kleurcontrast

Over Gulden snede kleuren?

Als ervarenontwerper zal ik mijn licht werpen op de methodologie die naar verluidt al zo'n 4000 jaar kunst en design inspireert en uitleggen waarom het gebruik ervan zo belangrijk is in webdesign.

Over de Gulden Snede

Als ervarenontwerper zal ik mijn licht werpen op de methodologie die naar verluidt al zo'n 4000 jaar kunst en design inspireert en uitleggen waarom het gebruik ervan zo belangrijk is in webdesign.

Verhouding 1:1.618

Bij wijze van uitleg van de theorie wordt gezegd dat twee grootheden in de Gulden Snede staan als hun gelijk is aan de verhouding van hun som tot de grootste van de twee grootheden - het is een vorm met een verhouding van 1 op 1,618.

Fibonacci

Net als bij de Fibonacci-reeks waar een reeks getallen de som van de vorige twee vertegenwoordigt (0, 1, 1, 2, 3, 5, 8, 13, 21, enz.), kom je, als je doorgaat met deze verhouding, uit op 1,618, wat staat voor 'de goddelijke verhouding' - de Gulden Snede.

sdfsdfsdfsd

De afbeelding die je hier ziet illustreert hoe de verhoudingen voor de kleine en de grote vierkanten gelijk blijven nadat je deze vermenigvuldigt met 1,618 of 0,618

gulden snede voorbeeld fibonacci spiraal

Hoe werken kleuren op een beeldscherm?

RGB kleuren

De afbeelding die je hier ziet illustreert hoe de verhoudingen voor de kleine en de grote rechthoek gelijk blijven nadat een wijziging is toegepast.

hoe werken rgb kleuren op beeldscherm kubus

RGB-waarden van 0-255

De afbeelding die je hier ziet illustreert hoe de verhoudingen voor de kleine en de grote rechthoek gelijk blijven nadat een wijziging is toegepast.

Hoe werken Gulden Snede kleuren?

Gulden snede toegepast op RGB-waarden

De afbeelding die je hier ziet illustreert hoe de verhoudingen voor de kleine en de grote rechthoek gelijk blijven nadat een wijziging is toegepast.

golden ratio spiraal waarden

0.618 x 255

22,98
37,19
60,19
97,39
157,59
255

0.6180339 x 255

14,21066481
22,99334196
37,20400677
60,19734417
97,40134356
157,59867578
- 194,80265583 (255-60,19734417)
- 217,79599323 (255-37,20400677)
- 240,78933519 (255-14,21066481)
255

RGB 255-197-97

14-37-60-97-158-195-218-241-255

golden ratio value
rgb-value
0
0
1
14
2
37
3
60
4
97
5
158
6
195
7
218
8
241
9
255

Voorbeelden van fibonacci en 255

RGB 255-197-97

asdasd asd asdd sadd as das dd sd as a sida sdd asdd as dd asd asd das dd asdi

RGB 255-197-97

asdasd asd asdd sadd as das dd sd as a sida sdd asdd as dd asd asd das dd asdi

RGB 255-197-97

asdasd asd asdd sadd as das dd sd as a sida sdd asdd as dd asd asd das dd asdi

Kleurenkubus

Hier zie je de welbekende kubus hoe de kleuren Rood, Groen en Blauw verdeeld zijn. Ik heb op de snijwaarden van 0, 37, 60, 97, 157 en 255 stippen gezet. Dit zijn de Gulden Snede kleuren.

7 x 49 kleuren

Op de afbeelding zie je 49 stippen (7x7). Dit is 1-dimensionaal.Over de hele kleurenkubus zijn er 7 van deze lagen. In totaal zijn er dus 7x48=343 kleuren.

Alle 343 kleuren

Alle 343 kleuren op een rij

Any questions?

dsfsdf

6 grijswaarden

#000000

#252525

#3c3c3c

#616161

#9d9d9d

#dadada

27 kernkleuren

Hieronder zie je de 27 meest rudimentaire kleuren.
Deze kleuren die zijn opgebouwd uit RGB-waarden 0, 157 en 255.
De overige RGB-waardes zijn dus weggelaten.

#000000

#00009D

#0000ff

#009D00

#009D9D

#009DFF

#00FF00

#00FF9D

#00FFFF

#9DFF00

#9DFF9D

#9DFFFF

#FFFF00

#FFFF9D

#FFFFFF

#FF9D00

#FF9D9D

#FF9DFF

#FF0000

#FF009D

#FF00FF

#9D0000

#9D009D

#9D00FF

#9D9D00

#9D9D9D

#9D9DFF

Complementaire kleuren

Complementaire kleuren kunnen heel doeltreffend zijn in je webdesign. Van elke gulden snede is er een complementaire gulden snede kleur*. Je kan de kleuren complementair maken door de onderstaande 2 tekens te vervangen in de 6 lettertekens

Je kan de kleuren complementair maken door de onderstaande 2 tekens te vervangen in de 6 lettertekens

00 = FF | 25 = DA | 3C = XX | 61 = 9D

Voorbeeld complementaire kleur maken

De hex-kleur 9DDA25 kun je uitsplitsen in 3 groepjes:
9D-DA-25
9D vervangen door 61
DA vervangen door 25
25 vervangen door DA

Je krijgt dan als complementaire kleur:
#6125DA

#9DDA25

#6125DA

Meer voorbeelden van complementaire kleuren

#DADA25

#2525DA

#FFDA25

#0025DA

#FF9D00

#0061FF

#DA9D25

#2561DA

* Alleen van de kleuren die 3c bevatten is er niet direct een complementaire kleur beschikbaar in het Gulden Snede kleurensysteem.

Voorbeelden

Enkele voorbeelden van hoe kleuren kan toepassen.

Voorbeeld 1

#3CFFFF

#3c9d9d

#3c3c3c

sadfasdasd

Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair.

sadfasdasd

Overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Lorem en meer recentelijk door grafisch ontwerper Arthur Wentzel.

sadfasdasd

Letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door grafisch ontwerper Arthur Wentzel.

Voorbeeld 2

#3CDA9D

#3c6161

#3C253C

sadfasdasd

Letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum en meer recentelijk door grafisch ontwerper Arthur Wentzel.

sadfasdasd

Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair.

sadfasdasd

Overgenomen in elektronische letterzetting. Het is populair geworden met de introductie van Lorem en meer recentelijk door grafisch ontwerper Arthur.

Klik om te vergroten

Voorbeeld 3

#3CFF3C

#3C009D

#3C6161

vbkleur: #f2f2f2

De bovenstaande trainingen worden gegeven op onze locaties in Nederland:
f2f2f2
Rotterdam
Den Haag

Cursuslocatie België

De basiscursus, designtraining en Bootcamp worden ook in gegeven op onze locatie in België:
Antwerpen

Online
met Zoom

Je kan de bovenstaande trainingen ook op afstand online volgen vanuit huis of waar dan ook in speciale zoom-sessies:
Zoom trainingen

Cursus
op maat

De bovenstaande WordPress cursussen zijn groepstrainingen. Wil je speciaal een cursus op maat? Dat kan ook.
Cursus op maat

sadfasdasd

Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair.

sadfasdasd

Overgenomen in elektronische letterzetting. Het is populair geworden met de introductie van Lorem en meer recentelijk door grafisch ontwerper Arthur.

sadfasdasd

Letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum en meer recentelijk door grafisch ontwerper Arthur Wentzel.

Loper

#00DAFF

#00619d

#00253c

#00DAFF

#009dda

#00253c

#00DAFF

#009dda

#00619d

Pyramide

#00DA00

#00DAFF

#000061

#00DADA

#00DA25

#000061

Tips werken met gulden snede kleuren

Je kan de kleuren complementair maken door de onderstaande 2 tekens te vervangen in de 6 lettertekens

Kleurcontrast

WCAG 2.0 niveau AA vereist een contrastverhouding van ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst. WCAG 2.1 vereist een contrastverhouding van ten minste 3:1 voor en onderdelen van de gebruikersinterface (zoals randen voor formulierinvoer). WCAG-niveau AAA vereist een contrastverhouding van ten minste 7:1 voor normale tekst en 4,5:1 voor grote tekst.

kleurcontrast kleur contrast kleuren wcag contrastverhouding tekst afbeelding

WCAG kleurcontrast

WCAG 2.0 niveau AA vereist een contrastverhouding van ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst. WCAG 2.1 vereist een contrastverhouding van ten minste 3:1 voor afbeeldingen en onderdelen van de gebruikersinterface (zoals randen voor formulierinvoer). WCAG-niveau AAA vereist een contrastverhouding van ten minste 7:1 voor normale tekst en 4,5:1 voor grote tekst.

Kleurcontrast checken voor WCAG niveau

#00da00

#002500

Contrast Ratio
8.72:1

#00daff

#0025ff

Contrast Ratio
4.6:1

Te weinig kleurcontrast

WCAG 2.0 niveau AA vereist een contrastverhouding van ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst. WCAG 2.1 vereist een contrastverhouding van ten minste 3:1 voor afbeeldingen en onderdelen van de gebruikersinterface (zoals randen voor formulierinvoer). WCAG-niveau AAA vereist een contrastverhouding van ten minste 7:1 voor normale tekst en 4,5:1 voor grote tekst.

#3c25da

#3c25ff

Contrast Ratio
4.36:1 (FOUT)

#3c25da

#3c25da

Contrast Ratio
5.12:1 (GOED)

Vereiste kleurcontrast maken volgens WCAG

WCAG 2.0 niveau AA vereist een contrastverhouding van ten minste 4,5:1 voor normale tekst en 3:1 voor grote tekst. WCAG 2.1 vereist een contrastverhouding van ten minste 3:1 voor afbeeldingen en onderdelen van de gebruikersinterface (zoals randen voor formulierinvoer). WCAG-niveau AAA vereist een contrastverhouding van ten minste 7:1 voor normale tekst en 4,5:1 voor grote tekst.

meer kleurcontrast maken conform wcag niveau aa contrastverhouding tekst

Wil je meer details over gr test 202209of info?

Wil je meer informatie? Veel web-designers met interesse in gr test 202209 bekeken ook de onderstaande veel gelezen handleidingen:


Scroll naar boven