|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +title: Monochromatic Palette Creator Tool |
| 4 | +description: "This tool creates harmonious palettes for website designs and front-end development. Quickly test out many palettes and see them in mock website." |
| 5 | +--- |
| 6 | + |
| 7 | +<!DOCTYPE html> |
| 8 | +<html lang="en"> |
| 9 | +<head> |
| 10 | +<meta charset="UTF-8"> |
| 11 | +<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 12 | +<title>HSL Color Picker</title> |
| 13 | +<style> |
| 14 | + .colorSquare { |
| 15 | + width: 200px; |
| 16 | + height: 200px; |
| 17 | + margin: 20px; |
| 18 | + border: 2px solid black; |
| 19 | + display: inline-block; |
| 20 | + } |
| 21 | + |
| 22 | + .contentBox { |
| 23 | + margin:32px; |
| 24 | + padding: 16px; |
| 25 | + border: 1px solid black; |
| 26 | + } |
| 27 | +</style> |
| 28 | +</head> |
| 29 | +<body> |
| 30 | + <h1>Monochromatic Palette Creator Tool</h1> |
| 31 | + |
| 32 | + <label for="hue">Try a hue (0 to 360):</label> |
| 33 | + <input type="number" id="hue" value="0" min="0" max="360"> |
| 34 | + <button onclick="increment('hue')">▲</button> |
| 35 | + <button onclick="decrement('hue')">▼</button> |
| 36 | + <br> |
| 37 | + |
| 38 | + <div id="colorSquare" class="colorSquare"></div> |
| 39 | + <div id="darkColorSquare" class="colorSquare"></div> |
| 40 | + <div id="accentColorSquare" class="colorSquare"></div> |
| 41 | + |
| 42 | + <p>Easily test out several color palettes by changing the hue. Get one darker color (e.g. for fonts), one lighter one (ideal for background) and an intermediate one for accents.</p> |
| 43 | + <p>The palettes are based on HSL hues.</p> |
| 44 | + |
| 45 | + <div id='theDiv' class="contentBox"> |
| 46 | + <h2 id="theH2">Lorem Ipsum</h2> |
| 47 | + <p id="theP">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
| 48 | + </div> |
| 49 | + |
| 50 | + <script> |
| 51 | + const colorSquare = document.getElementById('colorSquare'); |
| 52 | + const accentColorSquare = document.getElementById('accentColorSquare'); |
| 53 | + const darkColorSquare = document.getElementById('darkColorSquare'); |
| 54 | + const hueInput = document.getElementById('hue'); |
| 55 | + |
| 56 | + function updateColor() { |
| 57 | + const hue = hueInput.value; |
| 58 | + |
| 59 | + const baseColor = `hsl(${hue}, 80%, 40%)`; |
| 60 | + const lightColor = `hsl(${hue}, 90%, 96%)`; |
| 61 | + const darkColor = `hsl(${hue}, 90%, 20%)`; |
| 62 | + |
| 63 | + colorSquare.style.backgroundColor = baseColor; |
| 64 | + darkColorSquare.style.backgroundColor = darkColor; |
| 65 | + accentColorSquare.style.backgroundColor = lightColor; |
| 66 | + |
| 67 | + const theDiv = document.getElementById('theDiv'); |
| 68 | + const theH2 = document.getElementById('theH2'); |
| 69 | + const theP = document.getElementById('theP'); |
| 70 | + theDiv.style.backgroundColor = lightColor; |
| 71 | + theH2.style.color = baseColor; |
| 72 | + theP.style.color = darkColor; |
| 73 | + } |
| 74 | + |
| 75 | + function increment(property) { |
| 76 | + const input = document.getElementById(property); |
| 77 | + let value = parseInt(input.value); |
| 78 | + if (value < parseInt(input.max)) { |
| 79 | + value++; |
| 80 | + input.value = value; |
| 81 | + updateColor(); |
| 82 | + } |
| 83 | + } |
| 84 | + |
| 85 | + function decrement(property) { |
| 86 | + const input = document.getElementById(property); |
| 87 | + let value = parseInt(input.value); |
| 88 | + if (value > parseInt(input.min)) { |
| 89 | + value--; |
| 90 | + input.value = value; |
| 91 | + updateColor(); |
| 92 | + } |
| 93 | + } |
| 94 | + |
| 95 | + hueInput.addEventListener('change', updateColor); |
| 96 | + updateColor(); |
| 97 | + </script> |
| 98 | +</body> |
| 99 | +</html> |
0 commit comments