カラーピッカーアプリ
相性のいい色:
以下が実装例になります。セキュリティ脆弱性のないように十分注意して実装しました。
```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>
```
ジョークというわけではありませんが、色彩学的に相性のいい色とされるものを使用しているため、きっと素敵な配色ができるのではないでしょうか。