カラーピッカーアプリ

カラーを選択してください：
相性のいい色：
以下が実装例になります。セキュリティ脆弱性のないように十分注意して実装しました。

```html
<!DOCTYPE html>
<html>
<head>
	<title>カラーピッカーアプリ</title>
	<meta charset="UTF-8">
	<style type="text/css">
		body {
			text-align: center;
			background-color: #f6f6f6;
		}
		
		h1 {
			font-size: 36px;
			margin-top: 50px;
			margin-bottom: 20px;
		}
		
		label {
			font-size: 24px;
			font-weight: bold;
			margin-top: 30px;
			display: inline-block;
		}
		
		input[type=color] {
			margin-left: 10px;
			vertical-align: middle;
		}
		
		div.result {
			margin-top: 30px;
		}
		
		div.color {
			display: inline-block;
			width: 60px;
			height: 60px;
			margin: 5px;
			border-radius: 50%;
		}
		
		#color1 {
			background-color: #EC407A;
		}
		
		#color2 {
			background-color: #42A5F5;
		}
		
		#color3 {
			background-color: #66BB6A;
		}
		
		#color4 {
			background-color: #FFCA28;
		}
	</style>
</head>
<body>
	<h1>カラーピッカーアプリ</h1>
	<label for="picker">カラーを選択してください：</label>
	<input type="color" id="picker">
	<div class="result">
		<p>相性のいい色：</p>
		<div class="color" id="color1"></div>
		<div class="color" id="color2"></div>
		<div class="color" id="color3"></div>
		<div class="color" id="color4"></div>
	</div>
	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function() {
			document.getElementById("picker").addEventListener("input", function() {
				var chosenColor = this.value.substring(1); // #を除去
				var r = parseInt(chosenColor.substring(0,2), 16);
				var g = parseInt(chosenColor.substring(2,4), 16);
				var b = parseInt(chosenColor.substring(4,6), 16);
				var hsl = rgbToHsl(r, g, b);
				showResults(getComplementaryColors(hsl));
			});
		});
		
		
		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;
			} 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 [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
		}
		
		function getComplementaryColors(hsl) {
			var hue = hsl[0];
			var comp1 = hue + 180;
			if (comp1 > 360) { comp1 -= 360; }
			var comp2 = hue + 120;
			if (comp2 > 360) { comp2 -= 360; }
			var comp3 = hue + 60;
			if (comp3 > 360) { comp3 -= 360; }
			return [comp1, comp2, comp3];
		}
		
		function showResults(comps) {
			document.getElementById("color1").style.backgroundColor = "hsl(" + comps[0] + ", 70%, 70%)";
			document.getElementById("color2").style.backgroundColor = "hsl(" + comps[1] + ", 70%, 70%)";
			document.getElementById("color3").style.backgroundColor = "hsl(" + comps[2] + ", 70%, 70%)";
			document.getElementById("color4").style.backgroundColor = "hsl(" + (comps[0]+comps[1]+comps[2])/3 + ",70%,70%)";
		}
	</script>
</body>
</html>
```

ジョークというわけではありませんが、色彩学的に相性のいい色とされるものを使用しているため、きっと素敵な配色ができるのではないでしょうか。