-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
271 lines (259 loc) · 14.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Roads Technology Kleurenwiel</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
font: normal;
font-size: 8;
}
#container-plugin {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
padding: 20px;
}
#colorWheel {
display: block;
max-width: 100%;
height: auto;
}
.color-box {
width: 32px;
height: 32px;
display: inline-block;
}
.color-input {
display: block;
margin-top: 5px;
width: 100px;
padding: 5px;
border: none;
color: #000000;
text-align: center;
}
.color-section {
margin-left: 20px;
}
.color-section label {
display: block;
margin-bottom: 10px;
}
.palette {
display: flex;
margin-top: 10px;
}
.palette .color-box {
margin-right: 5px;
}
#infoText, #infoText2 {
display: none;
margin-top: 20px;
padding: 20px;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
max-width: 800px;
margin: 20px auto;
line-height: 1.6;
}
#infoText2 p {
margin-bottom: 1em;
}
#infoText2 i {
display: block;
margin-left: 20px;
font-style: italic;
}
@media (max-width: 600px) {
#container {
flex-direction: column;
align-items: center;
}
#colorWheel {
display: block;
max-width: 70%;
height: auto;
}
.color-section {
margin-left: 0;
margin-top: 20px;
}
}
footer {
text-align: center;
padding: 10px;
background-color: #f1f1f1;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
box-shadow: 0px -2px 35px -10px rgba(0,0,0,0.75);
}
#toggleInfoBtn, #toggleInfoBtn2 {
background-color: #dedede;
border-color: #cecece;
border-radius: 4px;
}
.infocontainerwrapper {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1><a href="https://roads-technology.nl/"><img src="./logo-rt.png" width="100" height="32" alt="" url="https://roads-technology.nl"/></a> Kleurenwiel </h1>
<div id="container-plugin">
<canvas id="colorWheel" width="300" height="300"></canvas>
<div class="color-section">
<label>Hoofdkleur:<br><input type="text" id="mainColor" class="color-input" placeholder="Kies een kleur!"></label>
<label>Complementaire kleur:<br><input type="text" id="complementaryColor" class="color-input" readonly></label>
<label>Analoge kleuren:</label>
<input type="text" id="analogColor1" class="color-input" readonly>
<input type="text" id="analogColor2" class="color-input" readonly>
<input type="text" id="analogColor3" class="color-input" readonly>
<input type="text" id="analogColor4" class="color-input" readonly><br>
<label>Monochromatische kleuren:</label>
<input type="text" id="monochromeColor1" class="color-input" readonly>
<input type="text" id="monochromeColor2" class="color-input" readonly>
<input type="text" id="monochromeColor3" class="color-input" readonly>
<input type="text" id="monochromeColor4" class="color-input" readonly><br>
<label>Kleurenpalet:<br></label>
<div class="palette">
<div id="mainColorBox" class="color-box"></div>
<div id="complementaryColorBox" class="color-box"></div>
<div id="analogColorBox1" class="color-box"></div>
<div id="analogColorBox2" class="color-box"></div>
<div id="analogColorBox3" class="color-box"></div>
<div id="analogColorBox4" class="color-box"></div>
<div id="monochromeColorBox1" class="color-box"></div>
<div id="monochromeColorBox2" class="color-box"></div>
<div id="monochromeColorBox3" class="color-box"></div>
<div id="monochromeColorBox4" class="color-box"></div>
</div>
<br>
<button id="eyeDropperBtn">Gebruik Pipet</button><br>
<br>
<button id="savePaletteBtn">Sla Kleurenpalet op als PNG</button><br>
<br>
<button id="saveHexCodesBtn">Sla Hexcodes op als TXT</button><br>
<br><br>
<div class="infocontainerwrapper">
<div id="infocontainer">
<label>Meer weten over analoge, complementaire en monochromatische kleuren?</label>
<button id="toggleInfoBtn">Meer weten?</button><br>
<br>
<label>Meer weten over de betekenis van kleuren?</label>
<button id="toggleInfoBtn2">Meer weten?</button><br>
</div>
</div>
</div>
</div>
<div id="infoText">
<h2>Complementaire Kleuren</h2>
<p><strong>Wat zijn complementaire kleuren?</strong></p>
<p>Complementaire kleuren zijn kleuren die recht tegenover elkaar liggen op het kleurenwiel. Ze vormen een sterk contrast en versterken elkaar wanneer ze samen worden gebruikt.</p>
<p><strong>Hoe vind je ze?</strong></p>
<p>Stel je een rond kleurenwiel voor, met alle kleuren van de regenboog. Als je een lijn recht door het midden van het wiel trekt van één kleur naar de tegenoverliggende kleur, dan heb je een complementair paar gevonden. Bijvoorbeeld:</p>
<ul>
<li>Rood en groen</li>
<li>Blauw en oranje</li>
<li>Geel en paars</li>
</ul>
<p><strong>Waarom zijn ze belangrijk?</strong></p>
<p>Ze creëren een visueel effect dat heel levendig en opvallend is. Dit kan nuttig zijn in kunst, design en mode om aandacht te trekken en een dynamisch gevoel te geven.</p>
<h2>Analoge Kleuren</h2>
<p><strong>Wat zijn analoge kleuren?</strong></p>
<p>Analoge kleuren zijn kleuren die naast elkaar liggen op het kleurenwiel. Ze hebben vaak een gemeenschappelijke basiskleur en harmoniseren goed met elkaar.</p>
<p><strong>Hoe vind je ze?</strong></p>
<p>Kies een kleur op het kleurenwiel, en kijk dan naar de kleuren direct links en rechts ervan. Bijvoorbeeld:</p>
<ul>
<li>Blauw, blauw-groen en groen</li>
<li>Rood, rood-oranje en oranje</li>
<li>Geel, geel-groen en groen</li>
</ul>
<p><strong>Waarom zijn ze belangrijk?</strong></p>
<p>Ze creëren een harmonieus en rustig gevoel omdat de kleuren elkaar aanvullen zonder veel contrast. Dit kan prettig zijn in interieurs, kunst en mode waar een meer serene en samenhangende uitstraling gewenst is.</p>
<h2>Monochromatische kleuren</h2>
<p>Monochromatische kleuren zijn verschillende tinten en verzadigingen van één enkele kleur. Denk aan verschillende gradaties van bijvoorbeeld blauw, waarbij je lichtblauw, middelblauw en donkerblauw hebt, maar allemaal afgeleid zijn van dezelfde basiskleur.</p>
<p><strong>Toepassing op websites</strong></p>
<p>Monochromatische kleuren kunnen op een website worden toegepast door verschillende tinten en verzadigingen van dezelfde kleur te gebruiken voor verschillende elementen. Hier zijn een paar manieren waarop dit kan helpen:</p>
<ul>
<li><strong>Visuele Hiërarchie:</strong> Gebruik een donkerdere tint van de monochrome kleur voor de achtergrond en een lichtere tint voor tekst en knoppen. Dit creëert contrast en maakt tekst gemakkelijker leesbaar.</li>
<li><strong>Consistentie:</strong> Door één kleur te gebruiken met verschillende tonen blijft het kleurenschema consistent en harmonieus, wat de gebruikerservaring verbetert.</li>
<li><strong>Accentuatie:</strong> Gebruik een meer verzadigde versie van de monochrome kleur voor accenten zoals hyperlinks, knoppen of belangrijke call-to-action elementen. Dit trekt de aandacht zonder af te wijken van het algehele kleurenschema.</li>
<li><strong>Minimalisme:</strong> Monochrome kleurenschema's kunnen een gevoel van eenvoud en minimalisme bevorderen, wat kan helpen bij het creëren van een strak en modern ontwerp voor de website.</li>
</ul>
<p>Door monochromatische kleuren op deze manieren te gebruiken, kun je een samenhangend en aantrekkelijk visueel ontwerp creëren dat de gebruikerservaring verbetert en de boodschap van de website versterkt.</p>
<h2>Kort samengevat</h2>
<p>Complementaire kleuren: Tegenover elkaar op het kleurenwiel, zorgen voor contrast en levendigheid (bijvoorbeeld rood en groen).</p>
<p>Analoge kleuren: Naast elkaar op het kleurenwiel, zorgen voor harmonie en rust (bijvoorbeeld blauw en groen).</p>
<p>Monochromatische kleuren zijn verschillende tinten en verzadigingen van één kleur. Op websites kunnen ze worden gebruikt om contrast, consistentie en accenten te creëren zonder het kleurenschema te verstoren, wat leidt tot een strak en aantrekkelijk ontwerp dat de gebruikerservaring verbetert.</p>
<p>Ik hoop dat dit helpt om een duidelijk beeld te krijgen van deze kleurconcepten!</p>
</div>
<div id="infoText2">
<h2>Betekenis achter de kleuren</h2>
<p>Kleurenpsychologie bestudeert de invloed van kleuren op menselijk gedrag, emoties en besluitvorming.</p>
<p>Elke kleur roept specifieke associaties en gevoelens op. Hier zijn enkele voorbeelden:</p>
<ul>
<p><b>Rood:</b> <i>Vaak geassocieerd met energie, passie en opwinding. Rood kan de hartslag verhogen en een gevoel van urgentie creëren, wat het geschikt maakt voor uitverkopen en promoties.</i></p>
<p><b>Blauw:</b> <i>Wordt geassocieerd met kalmte, betrouwbaarheid en sereniteit. Blauw kan een gevoel van veiligheid en vertrouwen opwekken, wat het een populaire kleur maakt voor banken en zakelijke diensten.</i></p>
<p><b>Geel:</b> <i>Staat voor optimisme, vreugde en energie. Het kan de aandacht trekken en wordt vaak gebruikt in etalages en marketing om een zonnige, opgewekte sfeer te creëren.</i></p>
<p><b>Groen:</b> <i> Geassocieerd met natuur, gezondheid en rust. Groen roept gevoelens van evenwicht en vernieuwing op, en wordt vaak gebruikt in producten die verband houden met welzijn en milieuvriendelijkheid.</i></p>
<p><b>Paars:</b> <i> Staat voor luxe, creativiteit en spiritualiteit. Paars kan een gevoel van rijkdom en exclusiviteit overbrengen, waardoor het populair is in high-end producten en creatieve industrieën.</i></p>
<p><b>Oranje:</b> <i> Geassocieerd met enthousiasme, opwinding en warmte. Oranje kan een gevoel van vitaliteit en speelsheid creëren en wordt vaak gebruikt om impulsaankopen te stimuleren.</i></p>
<p><b>Zwart:</b> <i> Wordt geassocieerd met kracht, elegantie en mysterie. Zwart straalt autoriteit en verfijning uit en wordt vaak gebruikt in mode en luxeproducten.</i></p>
<p><b>Wit:</b> <i> Staat voor zuiverheid, eenvoud en netheid. Wit kan een gevoel van frisheid en ruimte creëren, en wordt vaak gebruikt in minimalistisch design en gezondheidsproducten.</i></p>
<p>De psychologie achter kleuren kan variëren afhankelijk van culturele en persoonlijke verschillen, maar over het algemeen speelt kleur een cruciale rol in hoe we ons voelen en reageren op onze omgeving.</p>
</ul>
</div>
<br><br><br><br>
<footer>
<p>Roads Technology Color Wheel © JSikken, 2024</p>
</footer>
<script>
document.getElementById("toggleInfoBtn").addEventListener("click", function() {
var infoText = document.getElementById("infoText");
var infoText2 = document.getElementById("infoText2");
var toggleInfoBtn2 = document.getElementById("toggleInfoBtn2");
if (infoText.style.display === "none" || infoText.style.display === "") {
infoText.style.display = "block";
this.textContent = "Minder weten?";
infoText2.style.display = "none";
toggleInfoBtn2.textContent = "Meer weten?";
} else {
infoText.style.display = "none";
this.textContent = "Meer weten?";
}
});
document.getElementById("toggleInfoBtn2").addEventListener("click", function() {
var infoText2 = document.getElementById("infoText2");
var infoText = document.getElementById("infoText");
var toggleInfoBtn = document.getElementById("toggleInfoBtn");
if (infoText2.style.display === "none" || infoText2.style.display === "") {
infoText2.style.display = "block";
this.textContent = "Minder weten?";
infoText.style.display = "none";
toggleInfoBtn.textContent = "Meer weten?";
} else {
infoText2.style.display = "none";
this.textContent = "Meer weten?";
}
});
</script>
<script src="script.js"></script>
</body>
</html>