前回のアップデート版です。
HTML上でHEX, RGB, CMYKの相互変換と表示させます。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HEX, RGB, CMYKの相互変換と表示</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.color-box {
width: 120px;
height: 120px;
border: 2px solid #000;
border-radius: 10px;
}
.info {
margin-top: 10px;
font-size: 16px;
}
.row {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
}
input {
padding: 5px;
font-size: 16px;
margin: 5px;
}
</style>
</head>
<body>
<h2>HEX, RGB, CMYKの相互変換と表示</h2>
<div class="container">
<div>
<label for="hexInput">16進数 (#RRGGBB):</label>
<input type="text" id="hexInput" placeholder="#ff5733">
<button onclick="handleHexInput()">変換</button>
</div>
<div>
<label for="rgbInput">RGB (R, G, B):</label>
<input type="text" id="rgbInput" placeholder="255, 87, 51">
<button onclick="handleRgbInput()">変換</button>
</div>
<div>
<label for="cmykInput">CMYK (C%, M%, Y%, K%):</label>
<input type="text" id="cmykInput" placeholder="0, 66, 80, 0">
<button onclick="handleCmykInput()">変換</button>
</div>
</div>
<div class="row">
<div>
<div class="color-box" id="hexBox"></div>
<div class="info" id="hexInfo">HEX:</div>
</div>
<div>
<div class="color-box" id="rgbBox"></div>
<div class="info" id="rgbInfo">RGB:</div>
</div>
<div>
<div class="color-box" id="cmykBox"></div>
<div class="info" id="cmykInfo">CMYK:</div>
</div>
</div>
<script>
function hexToRgb(hex) {
const bigint = parseInt(hex.slice(1), 16);
return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };
}
function rgbToHex(r, g, b) {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
}
function rgbToCmyk(r, g, b) {
const c = 1 - r / 255;
const m = 1 - g / 255;
const y = 1 - b / 255;
const k = Math.min(c, m, y);
return {
c: Math.round((c - k) / (1 - k || 1) * 100),
m: Math.round((m - k) / (1 - k || 1) * 100),
y: Math.round((y - k) / (1 - k || 1) * 100),
k: Math.round(k * 100)
};
}
function cmykToRgb(c, m, y, k) {
const r = 255 * (1 - c / 100) * (1 - k / 100);
const g = 255 * (1 - m / 100) * (1 - k / 100);
const b = 255 * (1 - y / 100) * (1 - k / 100);
return { r: Math.round(r), g: Math.round(g), b: Math.round(b) };
}
function updateColorDisplay(hex, rgb, cmyk) {
document.getElementById("hexBox").style.backgroundColor = hex;
document.getElementById("rgbBox").style.backgroundColor = hex;
document.getElementById("cmykBox").style.backgroundColor = hex;
document.getElementById("hexInfo").textContent =
`HEX: ${hex}`;
document.getElementById("rgbInfo").textContent =
`RGB: (${rgb.r}, ${rgb.g}, ${rgb.b})`;
document.getElementById("cmykInfo").textContent =
`CMYK: (${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%)`;
}
function handleHexInput() {
const hex = document.getElementById("hexInput").value;
if (!/^#([0-9A-Fa-f]{6})$/.test(hex)) {
alert("正しい16進数の色コードを入力してください (例: #ff5733)");
return;
}
const rgb = hexToRgb(hex);
const cmyk = rgbToCmyk(rgb.r, rgb.g, rgb.b);
updateColorDisplay(hex, rgb, cmyk);
}
function handleRgbInput() {
const rgbInput = document.getElementById("rgbInput").value;
const match = rgbInput.match(/^(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})$/);
if (!match) {
alert("正しいRGB値を入力してください (例: 255, 87, 51)");
return;
}
const r = parseInt(match[1], 10);
const g = parseInt(match[2], 10);
const b = parseInt(match[3], 10);
if (r > 255 || g > 255 || b > 255) {
alert("RGB値は0から255の範囲で入力してください。");
return;
}
const hex = rgbToHex(r, g, b);
const cmyk = rgbToCmyk(r, g, b);
updateColorDisplay(hex, { r, g, b }, cmyk);
}
function handleCmykInput() {
const cmykInput = document.getElementById("cmykInput").value;
const match =
cmykInput.match(/^(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})$/);
if (!match) {
alert("正しいCMYK値を入力してください (例: 0, 66, 80, 0)");
return;
}
const c = parseInt(match[1], 10);
const m = parseInt(match[2], 10);
const y = parseInt(match[3], 10);
const k = parseInt(match[4], 10);
if ([c, m, y, k].some(value => value > 100)) {
alert("CMYK値は0から100の範囲で入力してください。");
return;
}
const rgb = cmykToRgb(c, m, y, k);
const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
updateColorDisplay(hex, rgb, { c, m, y, k });
}
</script>
</body>
</html>
<!-- index.html -->
実行した直後の画面です。
16進数を入力して［変換］をクリックした結果
RGB値を入力して［変換］をクリックした結果
CMYK値を入力して［変換］をクリックした結果
