color-generator/script.js at master · shaharelisha/color-generator · GitHub

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
var r = 0;
var g = 0;
var b = 0;

var color = $("#box").css('backgroundColor')

$("h1").click(function (){
	$("#box").css('background-color', 'rgb(0,0,0)');
	r = 0;
	g = 0;
	b = 0;
	color = 'rgb('+r+','+g+','+b+')';
	$("#colorid").html(color);
	$("#colorhex").html(rgbToHex(r,g,b));
});

$("h6").click(function() {
	$("h6").html("Generate a random color by clicking on the colored wheel. You could change the shade (press the right arrow button) or the tint (press the left arrow button). You could also manipulate the redness, greeness, and blueness by clicking on either the right side of the respective box to add more of that color, or the left side to decrease the amount of that color. If you'd like to start from black again, click on the Random Color Generator title.");
});

$("#red").click(function (event){
	if(event.offsetX < $(this).width()*0.5){
		r = r - 20;
	} else {
		r = r + 20;
	}
	if(r < 0){
		r = 0;
	}
	if(r > 255){
		r = 255;
	}
	$("#box").css('background-color', 'rgb('+r+','+g+','+b+')');
	color = 'rgb('+r+','+g+','+b+')';
	$("#colorid").html(color);
	$("#colorhex").html(rgbToHex(r,g,b))
});

$("#green").click(function (event){
	if(event.offsetX < $(this).width()*0.5){
		g = g - 20;
	} else {
		g = g + 20;
	}
	if(g < 0){
		g = 0;
	}
	if(g > 255){
		g = 255;
	}
	$("#box").css('background-color', 'rgb('+r+','+g+','+b+')');
	color = 'rgb('+r+','+g+','+b+')';
	$("#colorid").html(color);
	$("#colorhex").html(rgbToHex(r,g,b))
});

$("#blue").click(function (event){
	if(event.offsetX < $(this).width()*0.5){
		b = b - 20;
	} else {
		b = b + 20;
	}
	if(b < 0){
		b = 0;
	}
	if(b > 255){
		b = 255;
	}
	$("#box").css('background-color', 'rgb('+r+','+g+','+b+')');
	color = 'rgb('+r+','+g+','+b+')';
	$("#colorid").html(color);
	$("#colorhex").html(rgbToHex(r,g,b))
});

function randomColor(){
	r = Math.floor((Math.random() * 255) + 1);
	g = Math.floor((Math.random() * 255) + 1);
	b = Math.floor((Math.random() * 255) + 1);
	$("#box").css('background-color', 'rgb('+r+','+g+','+b+')');
	color = 'rgb('+r+','+g+','+b+')';
	$("#colorid").html(color);
	$("#colorhex").html(rgbToHex(r,g,b))
}

function rgbToHex(r,g,b) {
	return '#'+toHex(r)+toHex(g)+toHex(b)
}

function toHex(n) {
 n = parseInt(n,10);
 if (isNaN(n)) return "00";
 n = Math.max(0,Math.min(n,255));
 return "0123456789ABCDEF".charAt((n-n%16)/16)
      + "0123456789ABCDEF".charAt(n%16);
}

$("#lighter").click(function(){
	var rIncrement = Math.round((255 - r)*0.1);
	var gIncrement = Math.round((255 - g)*0.1);
	var bIncrement = Math.round((255 - b)*0.1);
	r += rIncrement;
	g += gIncrement;
	b += bIncrement
	if(r > 255){
		r = 255;
	}
	if(g > 255){
		g = 255;
	}
	if(b > 255){
		b = 255;
	}
	$("#box").css('background-color', 'rgb('+r+','+g+','+b+')');
	color = 'rgb('+r+','+g+','+b+')';
	$("#colorid").html(color);
	$("#colorhex").html(rgbToHex(r,g,b))
});

$("#darker").click(function(){
	var rDecrement = Math.round(r*0.1);
	var gDecrement = Math.round(g*0.1);
	var bDecrement = Math.round(b*0.1);
	r -= rDecrement;
	g -= gDecrement;
	b -= bDecrement;
	if(r < 0){
		r = 0;
	}
	if(g < 0){
		g = 0;
	}
	if(b < 0){
		b = 0;
	}
	$("#box").css('background-color', 'rgb('+r+','+g+','+b+')');
	color = 'rgb('+r+','+g+','+b+')';
	$("#colorid").html(color);
	$("#colorhex").html(rgbToHex(r,g,b))
});