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
IN DEZE HANDLEIDING:
- 1 Wat zijn Gulden snede kleuren?
- 2 Over Gulden snede kleuren?
- 3 Over de Gulden Snede
- 4 Hoe werken kleuren op een beeldscherm?
- 5 Hoe werken Gulden Snede kleuren?
- 6 Voorbeelden van fibonacci en 255
- 7 Alle 343 kleuren
- 8 6 grijswaarden
- 9 27 kernkleuren
- 10 Complementaire kleuren
- 11 Voorbeelden
- 12 Voorbeeld 1
- 13 Voorbeeld 2
- 14 Voorbeeld 3
- 15 Tips werken met gulden snede kleuren
- 16 Meer tips over kleur
Wat zijn 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 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 verhouding 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
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.
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.
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 kleur 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 Vlaanderen 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 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.
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.
#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 tips over kleur
Je kan de kleuren complementair maken door de onderstaande 2 tekens te vervangen in de 6 lettertekens