JS：スライダーでRGB値を表示する（補色機能追加）

JavaScript

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<script src="main.js"></script>
	<title>スライダーでRGB値を変化させる（補色機能追加）</title>
</head>
<body>
	<div id="rgbColor" class="center-center">
		<p id="hex"></p>
	</div>
	<p>
		<label for="red">R</label>
		<input id="red" type="range" min="0" max="255" value="128" step="1">
		<span id="valueRed"></span>
	</p>
	<p>
		<label for="green">G</label>
		<input id="green" type="range" min="0" max="255" value="128" step="1">
		<span id="valueGreen"></span>
	</p>
	<p>
		<label for="blue">B</label>
		<input id="blue" type="range" min="0" max="255" value="128" step="1">
		<span id="valueBlue"></span>
	</p>
	<p><input type="button" value="補色" id="reverse"></p>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    margin: 20px;
}

/* 枠内の文字列を上下左右中央に表示 */
.center-center{
    height: 60px;
    display: grid;
    place-items: center;
}

/* カラー表示枠 */
#rgbColor{
    width: 300px;
    height: 100px;
    border: solid 1px #555;
}

/* 背景になるべくかぶらない文字色にするため */
#hex{
    color: rgb(100, 100, 100);
    mix-blend-mode:difference;
}

main.js

// スライダー値を取得する

let red, green, blue;	// スライダー
let valueRed, valueGreen, valueBlue;	// スライダー値表示
let rgbView;	// RGBカラー表示
let hex;		// 16進カラー表示
let reverse;	// 補色ボタン

// {r: XXX, g: XXX, b: XXX} ⇒ #RRGGBB形式に変換
const hexColor = (color) => {
	// 10進⇒16進2桁
	const Dec2Hex = (n) => Number(n).toString(16).padStart(2, "0").toUpperCase();

	return `#${Dec2Hex(color.red)}${Dec2Hex(color.green)}${Dec2Hex(color.blue)}`;
};

// 補色を求める
const Color2XRGB = (color) => {
	let x;

    if(color.red === "0" && color.green === "0" && color.blue === "0"){
		x = 255;
	}
	else if(color.red === "255" && color.green === "255" && color.blue === "255"){
		x = 255;
	}
    else{
        let max = Math.max(color.red, color.green);
        max = Math.max(max, color.blue);
    
        let min = Math.min(color.red, color.green);
        min = Math.min(min, color.blue);
    
        x = max + min;
    }

	// RGBの補色を設定
	const xColor = {
		red: x - color.red,
		green: x - color.green,
		blue: x - color.blue 
	};
	
	return xColor;
}

// スライダーのRGB値を取得
const getRGB = () => color = { red: red.value, green: green.value, blue: blue.value};

// CSS形式のRGB文字列を取得 ex) rgb(123, 5, 86)
const getRGBCssStyle = (color) => `rgb(${color.red}, ${color.green}, ${color.blue})`;

// スライダー値を取得して表示
const setRGB = ()=> {
	// スライダー値取得
	const color = getRGB();

	// RGB値を表示
	[valueRed.textContent, valueGreen.textContent, valueBlue.textContent] = [color.red, color.green, color.blue];

	// rgb(red, green, blue)形式で表示領域に設定
	const rgbColor = getRGBCssStyle(color);
	rgbView.style.backgroundColor = rgbColor;

	// 16進カラー表示
	hex.textContent = hexColor(color);
}

const setXRGB = () =>{
	const color = getRGB();
	const reverseColor = Color2XRGB(color);

	// rgb(red, green, blue)形式で表示領域に設定
	const rgbColor = getRGBCssStyle(reverseColor);
	rgbView.style.backgroundColor = rgbColor;
	
	// 16進カラー表示
	hex.textContent = hexColor(reverseColor);

	// スライダー値のRGBを補色RGBに設定
	[red.value, green.value, blue.value] = [reverseColor.red, reverseColor.green, reverseColor.blue];
};

// 起動時の処理
window.addEventListener("load", ()=>{
	// スライダー、スライダー値、RGBカラー表示DOM取得
	red = document.getElementById("red");
	green = document.getElementById("green");
	blue = document.getElementById("blue");

	valueRed = document.getElementById("valueRed");
	valueGreen = document.getElementById("valueGreen");
	valueBlue = document.getElementById("valueBlue");

	rgbView = document.getElementById("rgbColor");
	hex = document.getElementById("hex");

	reverse = document.getElementById("reverse");

	// スライドさせたときのイベント処理
	red.addEventListener("input", setRGB, false);
	green.addEventListener("input", setRGB, false);
	blue.addEventListener("input", setRGB, false);

	reverse.addEventListener("click", setXRGB, false);

	// スライダー初期値を表示
	setRGB();
});

コメント