Hue Saturation Lightness Guessing Game
HSL stands for Hue, Saturation, Lightness.
The lightness guessing game is good when you want to improve your sense of values in pictures. Just train with it over and over.
The other guessing games are for the saturation and hue side of the colors which might be useful too. At the end of the page you find a game which combines all 3 values.
Lightness Guessing
Hue Guessing
Saturation Guessing
HSL Guessing
H
S
L
Javascript Code:
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
var realLightness, realHue, realSaturation, realSaturationHue, realHSLH, realHSLS, realHSLL, guessedHSLH, guessedHSLS, guessedHSLL;
newLightness();
newHue();
newSaturation();
newHSL();
function newLightness() {
document.getElementById("resultsLightness").innerHTML = "";
realLightness = Math.round(Math.random() * 100);
document.getElementById("lightnessCanvas").style.backgroundColor = "hsl(0,0%," + realLightness + "%)";
lightnessChange(100);
}
function lightnessChange(guessedLightness) {
if (!isNaN(guessedLightness)) {
document.getElementById("lightnessCanvasGuessed").style.backgroundColor = "hsl(0,0%," + guessedLightness + "%)";
document.getElementById("guessLightness").value = guessedLightness;
document.getElementById("guessLightnessRange").value = guessedLightness;
}
}
function lightnessCheck() {
guessedLightness = document.getElementById("guessLightness").value;
if (!isNaN(guessedLightness)) {
document.getElementById("resultsLightness").innerHTML = "<table><tr><td>Lightness</td><td>" + realLightness + "%</td></tr><tr><td>Guessed</td><td>" + guessedLightness + "%</td></tr><tr><td>Difference</td><td>" + (guessedLightness - realLightness) + "%</td></tr></table>";
}
}
function newHue() {
document.getElementById("resultsHue").innerHTML = "";
realHue = Math.round(Math.random() * 360);
document.getElementById("hueCanvas").style.backgroundColor = "hsl(" + realHue + ",100%,50%)";
hueChange(360);
}
function hueChange(guessedHue) {
if (!isNaN(guessedHue)) {
document.getElementById("hueCanvasGuessed").style.backgroundColor = "hsl("+guessedHue+",100%,50%)";
document.getElementById("guessHue").value = guessedHue;
document.getElementById("guessHueRange").value = guessedHue;
}
}
function hueCheck() {
guessedHue = document.getElementById("guessHue").value;
if (!isNaN(guessedHue)) {
document.getElementById("resultsHue").innerHTML = "<table><tr><td>Hue</td><td>" + realHue + "°</td></tr><tr><td>Guessed</td><td>" + guessedHue + "°</td></tr><tr><td>Difference</td><td>" + Math.min((360) - Math.abs(guessedHue - realHue), Math.abs(guessedHue - realHue)) + "°</td></tr></table>";
}
}
function newSaturation() {
document.getElementById("resultsSaturation").innerHTML = "";
realSaturation = Math.round(Math.random() * 100);
realSaturationHue = Math.round(Math.random() * 360);
document.getElementById("saturationCanvas").style.backgroundColor = "hsl(" + realSaturationHue + "," + realSaturation + "%,50%)";
saturationChange(100);
}
function saturationChange(guessedSaturation) {
if (!isNaN(guessedSaturation)) {
document.getElementById("saturationCanvasGuessed").style.backgroundColor = "hsl(" + realSaturationHue + "," + guessedSaturation + "%,50%)";
document.getElementById("guessSaturation").value = guessedSaturation;
document.getElementById("guessSaturationRange").value = guessedSaturation;
}
}
function saturationCheck() {
guessedSaturation = document.getElementById("guessSaturation").value;
if (!isNaN(guessedSaturation)) {
var difference = guessedSaturation - realSaturation;
document.getElementById("resultsSaturation").innerHTML = "<table><tr><td>Saturation</td><td>" + realSaturation + "%</td></tr><tr><td>Guessed</td><td>" + guessedSaturation + "%</td></tr><tr><td>Difference</td><td>" + (guessedSaturation - realSaturation) + "%</td></tr></table>";
}
}
function newHSL() {
document.getElementById("resultsHSL").innerHTML = "";
realHSLH = Math.round(Math.random() * 360);
realHSLS = Math.round(Math.random() * 100);
realHSLL = Math.round(Math.random() * 100);
document.getElementById("HSLCanvas").style.backgroundColor = "hsl(" + realHSLH + "," + realHSLS + "%," + realHSLL + "%)";
HSLHChange(360);
HSLSChange(100);
HSLLChange(100);
}
function HSLHChange(value) {
guessedHSLH = value;
if (!isNaN(guessedHSLH)) {
document.getElementById("HSLCanvasGuessed").style.backgroundColor = "hsl(" + guessedHSLH + "," + guessedHSLS + "%," + guessedHSLL + "%)";
document.getElementById("guessHSLH").value = guessedHSLH;
document.getElementById("guessHSLHRange").value = guessedHSLH;
}
}
function HSLSChange(value) {
guessedHSLS = value;
if (!isNaN(guessedHSLS)) {
document.getElementById("HSLCanvasGuessed").style.backgroundColor = "hsl(" + guessedHSLH + "," + guessedHSLS + "%," + guessedHSLL + "%)";
document.getElementById("guessHSLS").value = guessedHSLS;
document.getElementById("guessHSLSRange").value = guessedHSLS;
}
}
function HSLLChange(value) {
guessedHSLL = value;
if (!isNaN(guessedHSLL)) {
document.getElementById("HSLCanvasGuessed").style.backgroundColor = "hsl(" + guessedHSLH + "," + guessedHSLS + "%," + guessedHSLL + "%)";
document.getElementById("guessHSLL").value = guessedHSLL;
document.getElementById("guessHSLLRange").value = guessedHSLL;
}
}
function HSLCheck() {
guessedHSLH = document.getElementById("guessHSLH").value;
guessedHSLS = document.getElementById("guessHSLS").value;
guessedHSLL = document.getElementById("guessHSLL").value;
if (!isNaN(guessedHSLH) && !isNaN(guessedHSLS) && !isNaN(guessedHSLL)) {
document.getElementById("resultsHSL").innerHTML = "\
<table><tr><td>Hue</td><td>" + realHSLH + "°\
</td></tr><tr><td>Guessed</td><td>" + guessedHSLH + "°\
</td></tr><tr><td>Difference</td><td>" + Math.min((360) - Math.abs(guessedHSLH - realHSLH), Math.abs(guessedHSLH - realHSLH)) + "°\
</td></tr></table>\
<table><tr><td>Saturation</td><td>" + realHSLS + "%\
</td></tr><tr><td>Guessed</td><td>" + guessedHSLS + "%\
</td></tr><tr><td>Difference</td><td>" + (guessedHSLS - realHSLS) + "%\
</td></tr></table>\
<table><tr><td>Lightness</td><td>" + realHSLL + "%\
</td></tr><tr><td>Guessed</td><td>" + guessedHSLL + "%\
</td></tr><tr><td>Difference</td><td>" + (guessedHSLL - realHSLL) + "%\
</td></tr></table>";
}
}