FlexiColorPicker/examples/basic.html at 0f2eb0439abdca96f06bdf91c1b474057bd899a0 · DavidDurman/FlexiColorPicker · 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
<html>
  <head>
    <script type="text/javascript" src="../colorpicker.js"></script>
    <style type="text/css">
      #picker { width: 200px; height: 200px }
      #slider { width: 30px; height: 200px }
    </style>
  </head>
  <body>

    <div id="picker"></div>
    <div id="slider"></div>

    <script type="text/javascript">

      var ColorPicker = new ColorPicker(

        document.getElementById('slider'),
        document.getElementById('picker'),

        function(hex, hsv, rgb) {
          console.log(hsv.h, hsv.s, hsv.v);         // [0-359], [0-1], [0-1]
          console.log(rgb.r, rgb.g, rgb.b);         // [0-255], [0-255], [0-255]
          document.body.style.backgroundColor = hex;        // #HEX
        });

    </script>
  </body>
</html>