OKColorPicker/index.html at main · profdl/OKColorPicker · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Color Picker</title>
  <!-- Scripts -->
  <!-- <script src="chroma.min.js"></script> -->
  <script src="culori.min.js"></script>
  <script src="nearestColor.js"></script>
  <script src="colornamesBestOf.js"></script>
  <script src="index.js"></script>
</head>

<body>
  <!-- Current Color Preview -->
  <div class="base-grid">
    <div class="color-prev" id="current-color"></div>
    <div class="color-prev" id="current-value"></div>
  </div>
  <div class="base-grid"></div>
  <input class="input-field" type="text" id="hex-in-output" placeholder="#000000"></input>
  <input class="input-field" type="text" id="color-name" placeholder="Crimson"></input>
  </div>

  <!-- COLOR GRIDS -->
  <div class="base-grid color-sliders">

    <!--  HUE -->
    <sp-slider class="slider" id="slider_hue" value-label="°" variant="filled" fill-offset="left" min="0" max="360"
      value="50" editable>
      <sp-label slot="label">Hue:</sp-label>
    </sp-slider>
    <div class="color-band" id="grid_hue"></div>
    <sp-divider size="medium"></sp-divider>
    <!--  CHROMA -->
    <sp-slider class="slider" id="slider_saturation" value-label="%" variant="filled" fill-offset="left" min="0"
      max="100" value="50" editable>
      <sp-label slot="label">Saturation:</sp-label>
    </sp-slider>
    <div class="color-band" id="grid_saturation"></div>
    <sp-divider size="medium"></sp-divider>
    <!--  LIGHTNESS -->
    <sp-slider class="slider" id="slider_lightness" value-label="%" variant="filled" fill-offset="left" min="0"
      max="100" value="50" editable>
      <sp-label slot="label">Lightness:</sp-label>
    </sp-slider>
    <div class="color-band" id="grid_lightness"></div>

  </div>

  <!-- Info -->
  <div id="info" class="box" style="color: lightgray;">
    <p style="color: rgb(200, 200, 200);  margin-top: 6px;">
      OK Color Picker is designed for more intuitive color selection, based on the OKhsl Colorspace. It helps mantain
      consistent relationships between
      lightness, saturation, and hue.
    </p>
    <p style="color: rgb(200, 200, 200);  margin-top: 6px;">
      Created by <a style="color: rgb(200, 200, 200);text-decoration: underline; "
        href="https://www.certainlynot.com">Daniel Lefcourt</a>
      @ <a style="color: rgb(200, 200, 200); text-decoration: underline;"
        href="https://www.risd.edu/academics/experimental-and-foundation-studies/faculty/daniel-lefcourt">risd.edu</a>
    <p style="color: rgb(200, 200, 200);">
      Developed by <a style="color: rgb(200, 200, 200);text-decoration: underline; " href="https://lukashefti.ch/">Lukas
        Hefti</a>
      <br>
      Thanks to <a style="color: rgb(160, 160, 160); text-decoration: underline; " href="https://culorijs.org">
        culori.js</a> ,
      <a style="color: rgb(160, 160, 160); text-decoration: underline; "
        href="https://bottosson.github.io/posts/oklab/">OK Colorspaces,</a>
      <br><a style="color: rgb(160, 160, 160); text-decoration: underline; "
        href="https://www.npmjs.com/package/color-name-list">color-name-list</a>
      & <a style="color: rgb(160, 160, 160); text-decoration: underline; "
        href="https://www.npmjs.com/package/nearest-color">nearest-color</a>.
    </p>
  </div>


</body>

</html>