Color-Picker-Chrome-Extension/ColourPicker.html at main · Datapoitsu/Color-Picker-Chrome-Extension · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="body" id="body">
    <div class="main">
      <div class="Leftside">
        <h1>Colour Picker</h1>
        <div class="pie" id="pie"></div>
        <div class="savedColours" id="savedColours"></div>
      </div>
      <div class="selector" id="selector"></div>
      <div class="Rightside">
        <div class="topRow">
          <button><img src="images/pipette.png" class="pipetteButtonImage" id="eyeDropButton" alt="pipette"></button>
          <button><img src="images/save.png" class="saveButtonImage" id="saveButton" alt="save"></button>
          <div class="empty"></div>
          <button><img src="images/unpin.png" class="smallButton" id="pinButton" alt="toggle pin"></button>
        </div>
        <div class="row">
          <p>Red:</p>
          <input type="number" id="red" value="255">
          <input type="range" min="0" max="255" value="255" step="1" class="slider" id="redSlider">
          <button><img src="images/clipboard.png" class="smallButton" id="copyred" alt="copy red value"></button>
        </div>
        <div class="row">
          <p>Green:</p>
          <input type="number" id="green" value="255">
          <input type="range" min="0" max="255" value="255" step="1" class="slider" id="greenSlider">
          <button><img src="images/clipboard.png" class="smallButton" id="copygreen" alt="copy green value"></button>
        </div>
        <div class="row">
          <p>Blue:</p>
          <input type="number" id="blue" value="255">
          <input type="range" min="0" max="255" value="255" step="1" class="slider" id="blueSlider">
          <button><img src="images/clipboard.png" class="smallButton" id="copyblue" alt="copy blue value"></button>
        </div>
        <div class="row">
          <p>Hex:</p>
          <input type="text" id="hex" value="#FFFFFF">
          <div class="colourDisplay" id="colourDisplay"></div>
          <button><img src="images/clipboard.png" class="smallButton" id="copyhex" alt="copy hex"></button>
        </div>
        <div class="row">
          <p>Hue:</p>
          <input type="number" id="hue" value="0" step="0.002">
          <input type="range" min="0.0" max="1.0" value="0.0" step="0.0002" class="slider" id="hueSlider">
          <button><img src="images/clipboard.png" class="smallButton" id="copyhue" alt="copy hue value"></button>
        </div>
        <div class="row">
          <p>Saturation:</p>
          <input type="number" id="saturation" value="0" step="0.002">
          <input type="range" min="0.0" max="1.0" value="0.0" step="0.0002" class="slider" id="saturationSlider">
          <button><img src="images/clipboard.png" class="smallButton" id="copysaturation" alt="copy saturation value"></button>
        </div>
        <div class="row">
          <p>lightness:</p>
          <input type="number" id="lightness" value="1" step="0.002">
          <input type="range" min="0.0" max="1.0" value="1.0" step="0.0002" class="slider" id="lightnessSlider">
          <button><img src="images/clipboard.png" class="smallButton" id="copylightness" alt="copy lightness value"></button>
        </div>
      </div>
    </div>
  </body>
</html>
<script src="ColourPicker.js"></script>