Kleuren formule
Je hebt veel javascript color chooser plugins.
Dat is bijvorbeeld een popup waar je een soort regenboog van kleuren hebt, en waarbij je vaak heel precies een kleur kunt kiezen. Zoals dit: http://johndyer.name/lab/colorpicker/
Ik wil ook zo iets maken, maar dan simpeler.
Ik wil gewoon een soort regenboog maken. Met javascript maak ik bijvoorbeeld 30 divs die ik 2x2 pixels groot maak en tegen elkaar aan zet.
Met javascript doe ik dan de css "rgb(rood, groen, blauw)"
het rood, groen en blauw kan 0 tot 255 zijn.
Dus het aantal kleuren die kunnen worden gemaakt is:
rood * groen * blauw = 255*255*255 = 16 581 375
Heel veel dus.
Daarom wil ik aan de zijkant een balkje waar je een kleur kiest, bijvoorbeeld rood.
Als je dan rood hebt gekozen kun je daaruit weer donkerder of lichter rood kiezen.
Javascript moet dus niet een paar miljoen divs gaan maken met elk een kleur.
Steeds hoeven er maar 30 te worden gemaakt in een bepaalde tint.
Mijn probleem is dat ik niet weet hoe ik de kleuren kan krijgen.
Ik zoek een soort formule of andere manier om ook paars te krijgen of geel.
Ik ging eerst met een loop de hoeveelheid rood laten oplopen, dan de hoeveelheid blauw, enz.
Maar je moet dus ook rood en blauw mengen ofzo.
Weet iemand hoe ik dit kan doen?
Gewijzigd op 15/06/2013 13:03:33 door Mark Hogeveen
Quote:
Most televisions, computer displays, and projectors produce colors by combining red, green, and blue light in varying intensities – the so-called RGB additive primary colors. The resulting mixtures in RGB color space can reproduce a wide variety of colors (called a gamut); however, the relationship between the constituent amounts of red, green, and blue light and the resulting color is unintuitive, especially for inexperienced users, and for users familiar with subtractive color mixing of paints or traditional artists’ models based on tints and shades (fig. 4). Furthermore, neither additive nor subtractive color models define color relationships the same way the human eye does.[7]
For example, imagine we have an RGB display whose color is controlled by three sliders ranging from 0–255, one controlling the intensity of each of the red, green, and blue primaries. If we begin with a relatively colorful orange ?, with sRGB values R = 217, G = 118, B = 33, and want to reduce its colorfulness by half to a less saturated orange ?, we would need to drag the sliders to decrease R by 31, increase G by 24, and increase B by 59, as pictured below. Needless to say, these numbers seem mostly arbitrary.
For example, imagine we have an RGB display whose color is controlled by three sliders ranging from 0–255, one controlling the intensity of each of the red, green, and blue primaries. If we begin with a relatively colorful orange ?, with sRGB values R = 217, G = 118, B = 33, and want to reduce its colorfulness by half to a less saturated orange ?, we would need to drag the sliders to decrease R by 31, increase G by 24, and increase B by 59, as pictured below. Needless to say, these numbers seem mostly arbitrary.
Je zal dus over moeten stappen naar bijvoorbeeld HSL (hue, saturation, lightness) of HSV (hue, saturation, value). Dat is ook wat die colorpickers gebruiken. Meestal worden ook de RGB waardes vermeld omdat dat makkelijker te begrijpen is voor de meeste gebruikers, maar als je vanuit RGB gaat werken krijg je al snel kleuren die helemaal niet meer op elkaar lijken.
Zelf maken hierin lijkt misschien wel makkelijk, maar zonder gedegen kennis van kleuren en hoe je daar mee kunt werken is het vrij lastig. Beter dan om zo'n colorpicker te gebruiken. Er zijn er genoeg te vinden.
Dus rood wordt op het ene scherm iets donkerder/lichter dan op het andere scherm?
Harry hogeveen op 15/06/2013 13:01:52:
Dus het aantal kleuren die kunnen worden gemaakt is:
rood * groen * blauw = 255*255*255 = 16 581 375
Heel veel dus.
rood * groen * blauw = 255*255*255 = 16 581 375
Heel veel dus.
Mag ik je direct even corrigeren Harry?
van 0 t/m 255 zijn 256 mogelijkheden. 256 ^ 3 = 16777216.
als we wit en zwart geen kleur willen noemen dan zijn het er twee minder maar dat is een andere discussie
filmpje gekeken. en het is precies zoals ik zeg.
ik geef je een ander voorbeeld. Op je telefoon heb je de cijfers 0 t/m 9. hoeveel toetsen zijn dat? 10.
Toevoeging op 17/06/2013 19:40:01:
Op http://en.wikipedia.org/wiki/RGB_color_model kun je het volgende lezen:
By using an appropriate combination of red, green, and blue intensities, many colors can be displayed. Current typical display adapters use up to 24-bits of information for each pixel: 8-bit per component multiplied by three components (see the Digital representations section below). With this system, 16,777,216 (256^3 or 2^24) discrete combinations of R, G and B values are allowed, providing millions of different (though not necessarily distinguishable) hue, saturation, and lightness shades.
Gewijzigd op 17/06/2013 19:41:21 door Frank Nietbelangrijk
Wouter J op 17/06/2013 19:05:56:
Frank, harry is wel juist. Er zijn 255 mogelijkheden, het 256ste getal is namelijk 100 en dat is geen kleur meer. Je wilt 00 t/m ff en dat zijn er 255.
Maar gelukkig zijn we geen Romeinen meer. Wij kennen wel de 0, of in dit geval, de 000. Van 000 t/m 255 zijn 256 mogelijkheden. Frank heeft gelijk wat dat betreft.
Erwin H op 17/06/2013 19:55:17:
Maar gelukkig zijn we geen Romeinen meer.
Al hebben we nog wel een Obelix en Idefix hier :-)
Gewijzigd op 17/06/2013 20:17:33 door Frank Nietbelangrijk
Quote:
Maar gelukkig zijn de meeste van ons geen Romeinen meer.
Btw, Idefix is een hond en bij mijn weten doen Obelix cs hun uiterste best om niet tot de Romeinen te behoren.
@Harry
Misschien is dit iets
En als ik het met HSL en HSV ga doen, moet er weer een browser worden gebruikt die dit in css ondersteunt.
Van dit soort dingen word ik echt chagrijnig:
http://www.browsersupport.net/CSS/hsl()
Gewijzigd op 18/06/2013 12:01:23 door Mark Hogeveen
Het is gewoon heel simpel, rgb is hier niet voor gemaakt en kan hier dus niet voor gebruikt worden. Zelfde is alsof je een spijker met een schroevendraaier in de muur wilt krijgen, kan niet, gaat niet en doet niemand.
In hsl / hsv dus.
Harry hogeveen op 18/06/2013 11:54:57:
En als ik het met HSL en HSV ga doen, moet er weer een browser worden gebruikt die dit in css ondersteunt.
Of je rekent de HSL/HSV waardes gewoon om naar RGB als je de kleuren wilt tonen. Daar zijn gewoon formules voor (zie mijn eerdere wikipedia link).
Je kan inderdaad geen duizenden divs maken van 2 op 2 px (ik zou het toch afraden).
Je kan bv. wel 360 divs naast mekaar leggen, met de 360° hue. Dat geeft dus een strook van rood, oranje, geel, groen,...
Ik heb lang geleden nog een color picker gemaakt.
- De basis daarvan was een transparante .png
Bovenaan helemaal transparant; onderaan zwart, met geleidelijke slope. een aantal seconden werk in photoshop.
Een andere versie was onderaan zwart, boven-links wit, boven-rechts transparant.
Zet die png bovenop die 360 divs; dan krijg je het zelfde beeld als dat gekleurde vierkant van in jouw eerste post (die link). Horizontaal vang je de kleur op (hue), verticaal de lichtsterkte (value).
Voor de saturation moet je nog iets apart maken. 2 dimensies, 2 waarden.
Afhankelijk van de actieve radio button (h, b of s), zie je ongeveer het zelfde als wat ik had.
Geeft dat je inspiratie?
---
Hier wat code waarmee je die regenboog-strook kan maken. Ongetwijfeld niet de meest efficiënte code, maar het vertelt je iets over hoe "hue" werkt.
hsv2rgb en rgb2hsv converters kunnen hier zeer nuttig zijn. Je vindt die wel (zie bv. de post boven deze)
Code (php)
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
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
<!doctype html>
<html>
<head>
<style>
.pixel {
width: 1px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div id="colors"></div>
<script>
window.onload = function() {
var content = '';
for (var i=0; i<360; i++) {
content += '<div class="pixel" style="background-color: ' + h2color(i) + ';"></div>'
}
document.getElementById('colors').innerHTML = content;
}
/*
@param h (0 -> 360 degrees). 0-> red; 30-> orange; 60-> yelow; ...
*/
function h2color(h) {
var state = Math.floor(h / 60); // 0 to 60 : state 0 - color goes from #FF0000 to #FFFF00 ; 60 to 120 : state 1 - color goes from #FFFF00 to #00FF00; etc.
var val = Math.floor(255 * (h % 60) / 60); // within the state, are we at the start of the state or at the end? example: 61, is at the start; 119 is at the end
switch(state) {
case 0: return '#ff' + decimalToHex(val, 2) + '00'; break;
case 1: return '#' + decimalToHex(255 - val, 2) + 'ff00'; break; // in odd states, the variable part decreases from 255 to 0
case 2: return '#00ff' + decimalToHex(val, 2) + ''; break;
case 3: return '#00' + decimalToHex(255 - val, 2) + 'ff'; break;
case 4: return '#' + decimalToHex(val, 2) + '00ff'; break;
case 5: return '#ff00' + decimalToHex(255 - val, 2) + ''; break;
default: var a = 0;
}
}
/**
* vooral nodig om de waarde in 2 karakters terug te geven, als de waarde "f" of kleiner is
*/
function decimalToHex(d, padding) {
var hex = Number(d).toString(16);
padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
while (hex.length < padding) {
hex = "0" + hex;
}
return hex;
}
</script>
</body>
</html>
<html>
<head>
<style>
.pixel {
width: 1px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div id="colors"></div>
<script>
window.onload = function() {
var content = '';
for (var i=0; i<360; i++) {
content += '<div class="pixel" style="background-color: ' + h2color(i) + ';"></div>'
}
document.getElementById('colors').innerHTML = content;
}
/*
@param h (0 -> 360 degrees). 0-> red; 30-> orange; 60-> yelow; ...
*/
function h2color(h) {
var state = Math.floor(h / 60); // 0 to 60 : state 0 - color goes from #FF0000 to #FFFF00 ; 60 to 120 : state 1 - color goes from #FFFF00 to #00FF00; etc.
var val = Math.floor(255 * (h % 60) / 60); // within the state, are we at the start of the state or at the end? example: 61, is at the start; 119 is at the end
switch(state) {
case 0: return '#ff' + decimalToHex(val, 2) + '00'; break;
case 1: return '#' + decimalToHex(255 - val, 2) + 'ff00'; break; // in odd states, the variable part decreases from 255 to 0
case 2: return '#00ff' + decimalToHex(val, 2) + ''; break;
case 3: return '#00' + decimalToHex(255 - val, 2) + 'ff'; break;
case 4: return '#' + decimalToHex(val, 2) + '00ff'; break;
case 5: return '#ff00' + decimalToHex(255 - val, 2) + ''; break;
default: var a = 0;
}
}
/**
* vooral nodig om de waarde in 2 karakters terug te geven, als de waarde "f" of kleiner is
*/
function decimalToHex(d, padding) {
var hex = Number(d).toString(16);
padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
while (hex.length < padding) {
hex = "0" + hex;
}
return hex;
}
</script>
</body>
</html>
Gewijzigd op 18/06/2013 16:32:46 door Kris Peeters
(Met dank aan het stukje code van Kris Peters)
Live demo: http://htmlpaste.com/f767bad51984b17322f1fbc7106fbc49d7019b6f
Code (php)
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
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
<!doctype html>
<html>
<head>
<style>
.pixel {
width: 1px;
height: 100px;
float: left;
}
.color-chooser {
width: 360px;
border: 1px solid gray;
border-radius: 4px;
padding: 10px;
}
.color-chooser .color-pointer {
height: 10px;
}
.color-chooser .color-pointer div {
width: 0px;
border-top: 8px solid black;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 0px solid transparent;
position: relative;
left: -4px;
}
.color-chooser #colors {
height: 100px;
cursor: crosshair;
}
.color-chooser-fields {
width: 200px;
background-color: #f2f2f2;
border: 1px solid #d3d3d3;
margin: 5px 0px 0px 0px;
padding: 5px;
float: left;
}
.color-chooser label {
display: block;
padding: 2px 0px 2px 0px;
}
.color-chooser label input {
width: 140px;
float: right;
}
.color-editing {
float: left;
margin: 5px 0px 0px 5px;
}
#current-color {
width: 100px;
height: 30px;
}
#previous-color {
width: 100px;
height: 30px;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="color-chooser" id="color-chooser">
<div class="color-pointer"><div id="color-arrow"></div></div>
<div id="colors"></div>
<div class="color-chooser-fields">
<label>Hex:<input type="text" /></label>
<label>Rood:<input type="text" /></label>
<label>Groen:<input type="text" /></label>
<label>Blauw:<input type="text" /></label>
<label>Tint:<input type="text" /></label>
</div>
<div class="color-editing">
<div id="current-color" title="Gekozen kleur">
</div>
<div id="previous-color" title="Vorige kleur">
</div>
</div>
<div class="clearfix"></div>
</div>
<script>
window.onload = function() {
var colors = document.getElementById('colors');
var content = '';
for(var i=0; i<360; i++) {
px = document.createElement("div");
px.className = "pixel";
px.style.backgroundColor = h2color(i);
(function(index) { px.onclick = function() {
selectColor(this, index);
}})(i);
colors.appendChild(px);
}
}
/*
@param h (0 -> 360 degrees). 0-> red; 30-> orange; 60-> yelow; ...
*/
function h2color(h) {
var state = Math.floor(h / 60); // 0 to 60 : state 0 - color goes from #FF0000 to #FFFF00 ; 60 to 120 : state 1 - color goes from #FFFF00 to #00FF00; etc.
var val = Math.floor(255 * (h % 60) / 60); // within the state, are we at the start of the state or at the end? example: 61, is at the start; 119 is at the end
switch(state) {
case 0: return '#ff' + decimalToHex(val, 2) + '00'; break;
case 1: return '#' + decimalToHex(255 - val, 2) + 'ff00'; break; // in odd states, the variable part decreases from 255 to 0
case 2: return '#00ff' + decimalToHex(val, 2) + ''; break;
case 3: return '#00' + decimalToHex(255 - val, 2) + 'ff'; break;
case 4: return '#' + decimalToHex(val, 2) + '00ff'; break;
case 5: return '#ff00' + decimalToHex(255 - val, 2) + ''; break;
default: var a = 0;
}
}
/**
* vooral nodig om de waarde in 2 karakters terug te geven, als de waarde "f" of kleiner is
*/
function decimalToHex(d, padding) {
var hex = Number(d).toString(16);
padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
while (hex.length < padding) {
hex = "0" + hex;
}
return hex;
}
function selectColor(clickedPx, index) {
bg = clickedPx.style.backgroundColor;
inputs = document.getElementById("color-chooser").getElementsByTagName("input");
inputs[0].value = "#" + rgbToHex(bg);
bg = bg.match(/[0-9]{1,3}/g);
inputs[1].value = bg[0];
inputs[2].value = bg[1];
inputs[3].value = bg[2];
inputs[4].value = rgbToHsl(bg[0], bg[1], bg[2])[0] * 360;
document.getElementById("color-arrow").style.left = index - 4 + "px"; // -4 for the half arrow width
document.getElementById("previous-color").style.backgroundColor = document.getElementById("current-color").style.backgroundColor;
document.getElementById("current-color").style.backgroundColor = clickedPx.style.backgroundColor;
}
function rgbToHex(c) {
var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
return m ? (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
}
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
</script>
</body>
</html>
<html>
<head>
<style>
.pixel {
width: 1px;
height: 100px;
float: left;
}
.color-chooser {
width: 360px;
border: 1px solid gray;
border-radius: 4px;
padding: 10px;
}
.color-chooser .color-pointer {
height: 10px;
}
.color-chooser .color-pointer div {
width: 0px;
border-top: 8px solid black;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 0px solid transparent;
position: relative;
left: -4px;
}
.color-chooser #colors {
height: 100px;
cursor: crosshair;
}
.color-chooser-fields {
width: 200px;
background-color: #f2f2f2;
border: 1px solid #d3d3d3;
margin: 5px 0px 0px 0px;
padding: 5px;
float: left;
}
.color-chooser label {
display: block;
padding: 2px 0px 2px 0px;
}
.color-chooser label input {
width: 140px;
float: right;
}
.color-editing {
float: left;
margin: 5px 0px 0px 5px;
}
#current-color {
width: 100px;
height: 30px;
}
#previous-color {
width: 100px;
height: 30px;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<div class="color-chooser" id="color-chooser">
<div class="color-pointer"><div id="color-arrow"></div></div>
<div id="colors"></div>
<div class="color-chooser-fields">
<label>Hex:<input type="text" /></label>
<label>Rood:<input type="text" /></label>
<label>Groen:<input type="text" /></label>
<label>Blauw:<input type="text" /></label>
<label>Tint:<input type="text" /></label>
</div>
<div class="color-editing">
<div id="current-color" title="Gekozen kleur">
</div>
<div id="previous-color" title="Vorige kleur">
</div>
</div>
<div class="clearfix"></div>
</div>
<script>
window.onload = function() {
var colors = document.getElementById('colors');
var content = '';
for(var i=0; i<360; i++) {
px = document.createElement("div");
px.className = "pixel";
px.style.backgroundColor = h2color(i);
(function(index) { px.onclick = function() {
selectColor(this, index);
}})(i);
colors.appendChild(px);
}
}
/*
@param h (0 -> 360 degrees). 0-> red; 30-> orange; 60-> yelow; ...
*/
function h2color(h) {
var state = Math.floor(h / 60); // 0 to 60 : state 0 - color goes from #FF0000 to #FFFF00 ; 60 to 120 : state 1 - color goes from #FFFF00 to #00FF00; etc.
var val = Math.floor(255 * (h % 60) / 60); // within the state, are we at the start of the state or at the end? example: 61, is at the start; 119 is at the end
switch(state) {
case 0: return '#ff' + decimalToHex(val, 2) + '00'; break;
case 1: return '#' + decimalToHex(255 - val, 2) + 'ff00'; break; // in odd states, the variable part decreases from 255 to 0
case 2: return '#00ff' + decimalToHex(val, 2) + ''; break;
case 3: return '#00' + decimalToHex(255 - val, 2) + 'ff'; break;
case 4: return '#' + decimalToHex(val, 2) + '00ff'; break;
case 5: return '#ff00' + decimalToHex(255 - val, 2) + ''; break;
default: var a = 0;
}
}
/**
* vooral nodig om de waarde in 2 karakters terug te geven, als de waarde "f" of kleiner is
*/
function decimalToHex(d, padding) {
var hex = Number(d).toString(16);
padding = typeof (padding) === "undefined" || padding === null ? padding = 2 : padding;
while (hex.length < padding) {
hex = "0" + hex;
}
return hex;
}
function selectColor(clickedPx, index) {
bg = clickedPx.style.backgroundColor;
inputs = document.getElementById("color-chooser").getElementsByTagName("input");
inputs[0].value = "#" + rgbToHex(bg);
bg = bg.match(/[0-9]{1,3}/g);
inputs[1].value = bg[0];
inputs[2].value = bg[1];
inputs[3].value = bg[2];
inputs[4].value = rgbToHsl(bg[0], bg[1], bg[2])[0] * 360;
document.getElementById("color-arrow").style.left = index - 4 + "px"; // -4 for the half arrow width
document.getElementById("previous-color").style.backgroundColor = document.getElementById("current-color").style.backgroundColor;
document.getElementById("current-color").style.backgroundColor = clickedPx.style.backgroundColor;
}
function rgbToHex(c) {
var m = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(c);
return m ? (1 << 24 | m[1] << 16 | m[2] << 8 | m[3]).toString(16).substr(1) : c;
}
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
</script>
</body>
</html>
Gewijzigd op 18/06/2013 21:16:03 door Mark Hogeveen