-
Notifications
You must be signed in to change notification settings - Fork 4
/
palette-explorer.html
83 lines (75 loc) · 2.78 KB
/
palette-explorer.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Extraterrestrial Color Palette Generator</title>
<style>
body {
font-family: Arial, sans-serif;
}
.color-box {
width: 50px;
height: 50px;
display: inline-block;
border: 1px solid black;
margin: 5px;
}
</style>
</head>
<body>
<h1>Extraterrestrial Color Palette Generator</h1>
<form id="color-form">
<label for="hue">Base Hue:</label>
<input type="number" id="hue" name="hue" min="0" max="359" value="200" />
<button type="submit">Generate Palette</button>
<button type="button" id="randomize-hue">Randomize Hue</button>
<label for="water">Has Water:</label>
<input type="checkbox" id="water" name="water" onchange="hasWater = this.checked;" />
</form>
<div id="palette-container"></div>
<script>
let hasWater = false
function generatePlanetColors(baseHue) {
let colorPalette = []
const hueVariation = 5
const saturationBase = 60
const saturationVariation = 15
const lightnessBase = 40
const lightnessVariation = 10
const waterHue = 210
const waterSaturation = 70
const waterLightness = 50
for (let i = 0; i < 4; i++) {
let hue, saturation, lightness
hue = (baseHue + i * hueVariation) % 360
saturation = Math.max(0, Math.min(100, saturationBase - i * saturationVariation))
lightness = Math.max(0, Math.min(100, lightnessBase + i * lightnessVariation))
colorPalette.push(`hsl(${hue}, ${saturation}%, ${lightness}%)`)
}
if (hasWater) {
const waterCol = `hsl(${waterHue}, ${waterSaturation}%, ${waterLightness}%)`
colorPalette = [waterCol, ...colorPalette]
}
return colorPalette
}
document.getElementById("color-form").addEventListener("submit", function (event) {
event.preventDefault()
const hue = parseInt(document.getElementById("hue").value)
const colorPalette = generatePlanetColors(hue)
const paletteContainer = document.getElementById("palette-container")
paletteContainer.innerHTML = ""
for (const color of colorPalette) {
const colorBox = document.createElement("div")
colorBox.className = "color-box"
colorBox.style.backgroundColor = color
paletteContainer.appendChild(colorBox)
}
})
document.getElementById("randomize-hue").addEventListener("click", function () {
const randomHue = Math.floor(Math.random() * 360)
document.getElementById("hue").value = randomHue
})
</script>
</body>
</html>