ボタンクリックで色が変わるデモをHTML,CSS,JavaScriptで作成！【Web開発基本】

<div id="button-wrapper">
	<button id="changeColor">色を変える</button>
</div>
<p id="hexColor">カラーコード: #FFFFFF</p>
<p id="rgbColor">RGBAカラー: rgba(255, 255, 255)</p>

#button-wrapper {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin: 40px auto;
    text-align: center;
}
button {
    margin-top: 20px;
    padding: 10px 15px;
    font-size: 16px;
    background-color: #696969;
    color: #fff;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #575757;
}

document.getElementById('changeColor').addEventListener('click', function() {

	const randomColor = Math.floor(Math.random()*16777215);
	const hexColor = "#" + randomColor.toString(16).padStart(6, '0');
	const r = (randomColor >> 16) & 255;
	const g = (randomColor >> 8) & 255;
	const b = randomColor & 255;
	const rgbColor = `rgb(${r}, ${g}, ${b})`;

	document.getElementById('button-wrapper').style.backgroundColor = hexColor;
	document.getElementById('hexColor').textContent = "カラーコード: " + hexColor;
	document.getElementById('rgbColor').textContent = "RGBカラー: " + rgbColor;
});