どうもAtsu1209です
今回はなかなかカラーコードを覚えれない&
良さげな色が最近みつからないのでカラーコード生成ページを
作っていきます

HTML

Color.html

 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Color Picker</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
   
</head>
<body>

    <label for="colorPicker">色を選択してください：</label>
    <input type="color" id="colorPicker" value="#000000"> <!-- デフォルトで黒色を表示 -->

    <p id="colorCode">選択された色のカラーコード：#000000</p>

    <button id="copyButton">カラーコードをコピー</button>
    <div class="coms green-text"></div>

</body>
</html>

色を選択する<input type="color">を使って色を生成します。

JavaScript

次に、カラーコードを生成して、クリップボードにコピーできるようにします

color.js

 document.getElementById('colorPicker').addEventListener('input', function(event) {
            var selectedColor = event.target.value;
            document.getElementById('colorCode').textContent = '選択された色のカラーコード：' + selectedColor;
        });

        document.getElementById('copyButton').addEventListener('click', function() {
            var colorCode = document.getElementById('colorCode').textContent.split('：')[1]; // カラーコードの部分を取得
            copyToClipboard(colorCode);
            $(".coms").html("コピーしました!")
        });

        function copyToClipboard(text) {
            var dummy = document.createElement('textarea');
            document.body.appendChild(dummy);
            dummy.value = text;
            dummy.select();
            document.execCommand('copy');
            document.body.removeChild(dummy);
        }

CSS

せっかくなのでデザインも整えていきます

color.css

 body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

label {
    font-size: 18px;
    margin-bottom: 10px;
}

input[type="color"] {
    width: 40px;
    height: 40px;
    border: none;
    padding: 0;
    margin-bottom: 10px;
    cursor: pointer;
}

p {
    font-size: 16px;
    margin: 0;
}

button {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}

全体コード

color.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Color Picker</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <style>
       body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

label {
    font-size: 18px;
    margin-bottom: 10px;
}

input[type="color"] {
    width: 40px;
    height: 40px;
    border: none;
    padding: 0;
    margin-bottom: 10px;
    cursor: pointer;
}

p {
    font-size: 16px;
    margin: 0;
}

button {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}
    </style>
</head>
<body>

    <label for="colorPicker">色を選択してください：</label>
    <input type="color" id="colorPicker" value="#000000"> <!-- デフォルトで黒色を表示 -->

    <p id="colorCode">選択された色のカラーコード：#000000</p>

    <button id="copyButton">カラーコードをコピー</button>
    <div class="coms green-text"></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        document.getElementById('colorPicker').addEventListener('input', function(event) {
            var selectedColor = event.target.value;
            document.getElementById('colorCode').textContent = '選択された色のカラーコード：' + selectedColor;
        });

        document.getElementById('copyButton').addEventListener('click', function() {
            var colorCode = document.getElementById('colorCode').textContent.split('：')[1]; // カラーコードの部分を取得
            copyToClipboard(colorCode);
            $(".coms").html("コピーしました!")
        });

        function copyToClipboard(text) {
            var dummy = document.createElement('textarea');
            document.body.appendChild(dummy);
            dummy.value = text;
            dummy.select();
            document.execCommand('copy');
            document.body.removeChild(dummy);
        }
    </script>

</body>
</html>

最後に

赤とかの原色のカラーコードは覚えたいな
では

HTMLカラーコード生成をする話

HTML

JavaScript

CSS

全体コード

最後に