<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Picker</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="icon" href="https://p5nc.online/assets/images/favicon/favicon.ico">
</head>
<body>
  <div class="container">
    <h1><i class="fas fa-palette"></i> Color Picker</h1>

    <div class="picker-wrapper">
        <button id="togglePicker" title="色を選ぶ">
          <i class="fas fa-brush"></i>
          
        </button>
        <p>↑クリックして色を選択できます</p>
        <p>↓数値(半角)でも色を選択できます</p>
        <input type="color" id="colorInput" class="custom-color" />
      </div>
      

    <div class="fields">
        <label>
            カラー名:
            <input type="text" id="nameValue" placeholder="例: red, skyblue, gold" />
          </label>
      <label>
        HEX:
        <input type="text" id="hexValue" maxlength="7">
      </label>
      <label>
        RGB:
        <input type="text" id="rgbValue">
      </label>
      <label>
        HSL:
        <input type="text" id="hslValue">
      </label>
      <label>
        CMYK:
        <input type="text" id="cmykValue" placeholder="cmyk(0%, 0%, 0%, 0%)">
      </label>
      <label>
        HSV:
        <input type="text" id="hsvValue" placeholder="hsv(0, 0%, 0%)">
      </label>
      
    </div>
    

  </div>

  <script src="script.js"></script>
</body>
</html>
