Cacher is the code snippet organizer for pro developers

:root {
  --font-body: "PT Sans", sans-serif;
  --font-mono: "PT Mono", monospace;
  --col-dark: #2e2e2e;
}

* {
  box-sizing: border-box;
}

html {
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  color: var(--col-dark);
}

body.dark {
  background: black;
  color: white;
  .basePickArea,
  #BasePick {
    background: var(--col-dark);
  }
  .hsv span {
    color: white;
  }
  svg {
    fill: grey;
  }
}

main {
  padding: 0.5rem;
}

.swatch {
  width: 100px;
  flex: 1;
  height: 50px;
}

.headerContent {
  margin: 0 auto;
  max-width: 1200px;
  text-align: center;
}

#BasePick {
  grid-column-start: 2;
  grid-column-end: 8;
  background: #f1f1f1;
  border: 0;
  display: flex;
  grid-row-start: 1;
  grid-row-end: 1;
  flex-wrap: wrap;
  padding: 0 0.5rem;
  h3 {
    margin: 0.5em 0;
  }
}

.baseCol {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro {
  flex: 0 0 100%;
  font-size: 0.9em;
  p {
    margin: 0.5rem 0;
  }
}
.introIcon {
  display: block;
  margin: 1.5rem auto 0.5rem;
}
.sliders {
  flex: 0 0 100%;
  font-size: 0.8em;
  padding-top: 5.5rem;
}
.slider {
  display: flex;
  padding-right: 1rem;
  margin: 0.5rem 0;

  label {
    flex: 0 0 6em;
  }
  input {
    width: 100%;
    margin: 0;
  }
}

.buttons {
  display: flex;
  padding-right: 1rem;
  align-items: center;
  p {
    flex: 0 0 6em;
  }
  button {
    flex: auto;
    border: 0;
    padding: 0.5em 0;
    cursor: pointer;
  }
}
.highlight {
  box-shadow: inset 0 0 0 2px #0078d7;
  z-index: 1;
}
.dark {
  background: var(--col-dark);
  color: white;
}
.light {
  background: white;
  color: black;
}

.comp {
  grid-column-start: 2;
  grid-column-end: 3;
}
.split {
  grid-column-start: 4;
  grid-column-end: 6;
}
.tri {
  grid-column-start: 2;
  grid-column-end: 4;
}
.tet {
  grid-column-start: 5;
  grid-column-end: 8;
}
.ana {
  grid-column-start: 2;
  grid-column-end: 5;
}

.schmA,
.schmB,
.schmC,
.schmD {
  grid-column-start: 2;
  grid-column-end: 7;
}

h1 {
  margin: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-weight: 400;
}

h2 {
}

.title {
  flex: 0 0 100%;
  font-size: 1em;
}

header {
  background: var(--col-dark);
  color: white;
  padding: 0.5rem 0;
}

.palette {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.hsvLegend {
  display: flex;
  justify-content: space-evenly;
  transform: translate(0, 140%);
  flex-wrap: wrap;
  color: grey;
  span {
    //border: 1px solid grey;
    border-radius: 5px;
    flex: 0 0 1rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
  }
}

.hsv {
  flex: 0 0 100%;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
  span {
    border: 0;
    flex: 0 0 1rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em;
    color: black;
    transform: rotate(-90deg);
  }
}

.code {
  font-family: var(--font-mono);
  font-size: 0.8em;
}

@media (min-width: 600px) {
  .basePickArea {
    grid-column-start: 1;
    grid-column-end: 8;
    background: #f1f1f1;
    grid-row-start: 1;
    grid-row-end: 1;
    height: 11rem;
  }
  #BasePick {
    padding: 0 0.5rem 0 0;
  }
  .baseCol {
    flex: 0 0 20%;
    display: block;
  }
  .intro {
    flex: 0 0 30%;
  }
  .sliders {
    flex: 0 0 50%;
    padding-top: 2rem;
  }
  main {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  }
  .swatch {
    flex: 0 0 100px;
  }

  .col1 {
    display: grid;
    grid-template-columns: auto repeat(6, minmax(auto, 100px)) auto;
  }

  .col2 {
    display: grid;
    grid-template-columns: auto repeat(6, minmax(auto, 100px)) auto;
  }

  .hsv {
    span {
      flex: 0 0 1.5rem;
      transform: rotate(0deg);
    }
  }

  .hsvLegend {
    span {
      flex: 0 0 1.5rem;
      border: 1px solid grey;
    }
    .hsv span {
      border: 0;
    }
  }
}

@media (min-width: 1220px) {
  .headerContent {
    text-align: left;
  }
  .col1 {
    grid-template-columns: auto repeat(6, minmax(auto, 100px)) 0;
  }

  .col2 {
    grid-template-columns: repeat(6, minmax(auto, 100px)) auto auto;
  }
}

const SWATCHES_HTML = document.querySelectorAll(".swatch");
const SWATCHES = {};

Array.from(SWATCHES_HTML).forEach(e => {
  let h_element = e.getElementsByClassName("h")[0];
  let s_element = e.getElementsByClassName("s")[0];
  let l_element = e.getElementsByClassName("l")[0];
  SWATCHES[e.classList[0]] = {
    element: e,
    h: h_element,
    s: s_element,
    l: l_element
  };
});

const H_HTML = document.querySelector("#Hue");
const S_HTML = document.querySelector("#Saturation");
const L_HTML = document.querySelector("#Lightness");
const BASE_HTML = document.querySelector("#BasePick");

BASE_HTML.addEventListener("input", changeCol);

const BTN_DARK = document.querySelector(".dark");
BTN_DARK.addEventListener("click", e => {
  e.preventDefault;
  document.body.classList.add("dark");
  BTN_DARK.classList.add("highlight");
  BTN_LIGHT.classList.remove("highlight");
});

const BTN_LIGHT = document.querySelector(".light");
BTN_LIGHT.addEventListener("click", e => {
  e.preventDefault;
  document.body.classList.remove("dark");
  BTN_LIGHT.classList.add("highlight");
  BTN_DARK.classList.remove("highlight");
});

changeCol();

function changeCol(e) {
  let H = parseInt(H_HTML.value, 10);
  let S = parseInt(S_HTML.value, 10);
  let L = parseInt(L_HTML.value, 10);

  c(SWATCHES["base"], H, S, L);
  c(SWATCHES["complementary"], H + 180 - 360, S, L);
  c(SWATCHES["splitComplementary1"], H + 150 - 360, S, L);
  c(SWATCHES["splitComplementary2"], H + 210 - 360, S, L);
  c(SWATCHES["triadic1"], H + 120 - 360, S, L);
  c(SWATCHES["triadic2"], H + 240 - 360, S, L);
  c(SWATCHES["tetradic1"], H + 90 - 360, S, L);
  c(SWATCHES["tetradic2"], H + 180 - 360, S, L);
  c(SWATCHES["tetradic3"], H + 270 - 360, S, L);
  c(SWATCHES["analagous1"], H + 30 - 360, S, L);
  c(SWATCHES["analagous2"], H + 60 - 360, S, L);
  c(SWATCHES["analagous3"], H + 90 - 360, S, L);
  c(SWATCHES["baseCopy"], H, S, L);
  c(SWATCHES["schemeA1"], H + 30 - 360, S, L);
  c(SWATCHES["schemeA2"], H + 180 - 360, S, L);
  c(SWATCHES["schemeA3"], H + 200 - 360, S, L);
  c(SWATCHES["schemeA4"], H + 220 - 360, S, L);
  c(SWATCHES["baseCopy2"], H, S, L);
  c(SWATCHES["schemeB1"], H + 30 - 360, S, L - 25);
  c(SWATCHES["schemeB2"], H + 240 - 360, S + 30, L + 25);
  c(SWATCHES["schemeB3"], H + 190 - 360, S + 30, L + 12);
  c(SWATCHES["schemeB4"], H + 160 - 360, S, L - 30);
  c(SWATCHES["baseCopy3"], H, S, L);
  c(SWATCHES["schemeC1"], H + 25 - 360, S + 20, L + 5);
  c(SWATCHES["schemeC2"], H + 50 - 360, S + 20, L + 10);
  c(SWATCHES["schemeC3"], H + 320 - 360, S + 30, L - 25);
  c(SWATCHES["schemeC4"], H + 170 - 360, S, L - 25);
  c(SWATCHES["baseCopy4"], H, S, L);
  c(SWATCHES["schemeD1"], H + 30 - 360, S, L);
  c(SWATCHES["schemeD2"], H + 60 - 360, S, L);
  c(SWATCHES["schemeD3"], H + 90 - 360, S, L);
  c(SWATCHES["schemeD4"], H + 120 - 360, S, L);

  function c(swatch, H, S, L) {
    swatch.element.style.backgroundColor = `hsl(${H},${S}%,${L}%)`;
    H = H < 0 ? H + 360 : H;
    S = S > 100 ? 100 : S;
    L = L > 100 ? 100 : L;
    L = L < 0 ? 0 : L;
    swatch.h.textContent = H;
    swatch.s.textContent = S;
    swatch.l.textContent = L;
  }
}

<header>
  <div class="headerContent">
    <h1>Colour Melody</h1>
  </div>
</header>
<main>

  <div class="col1">
    <div class="basePickArea"></div>
    <div id="BasePick">

      <div class="controls baseCol">
        <h3>Base Colour</h3>
        <div class="base swatch">
          <div class="hsvLegend">
            <span>H</span>
            <span>S</span>
            <span>L</span>
            <div class="hsv code">
              <span class="h">100</span>
              <span class="s">100</span>
              <span class="l">100</span>
            </div>
          </div>
        </div>
      </div>

      <div class="controls sliders">
        <div class="slider">
          <label for="hue">Hue</label>
          <input type="range" id="Hue" name="hue" min="0" max="360" value="180" />
        </div>
        <div class="slider">
          <label for="saturation">Saturation</label>
          <input type="range" id="Saturation" name="saturation" min="0" max="100" value="50" />
        </div>
        <div class="slider">
          <label for="lightness">Lightness</label>
          <input type="range" id="Lightness" name="lightness" min="0" max="100" value="50" />
        </div>
        <div class="buttons">
          <p>Backdrop</p>
          <button class="light highlight">Light</button>
          <button class="dark">Dark</button>
        </div>
      </div>
      <div class="controls intro">
        <svg class="introIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>
        <p>Use the <strong>Hue</strong>, <strong>Saturation</strong> and <strong>Lightness</strong> sliders to create a new Base Colour, additional colour schemes will be generated automatically.</p>
      </div>

    </div>
    <!--basepick -->

    <div class="palette comp">
      <h2 class="title">Complementary</h2>
      <div class="complementary swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>

    <div class="palette split">
      <h2 class="title">Split Complementary</h2>
      <div class="splitComplementary1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="splitComplementary2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>

    <div class="palette tri">
      <h2 class="title">Triadic</h2>
      <div class="triadic1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="triadic2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>

    <div class="palette tet">
      <h2 class="title">Tetradic</h2>
      <div class="tetradic1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="tetradic2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="tetradic3 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>

    <div class="palette ana">
      <h2 class="title">Analagous</h2>
      <div class="analagous1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>

      </div>
      <div class="analagous2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="analagous3 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>

      </div>

    </div>
  </div>
  <div class="col2">
    <div class="palette schmA">
      <h2 class="title">Scheme A</h2>
      <div class="baseCopy swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeA1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeA2 swatch">

        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeA3 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeA4 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>

    <div class="palette schmB">
      <h2 class="title">Scheme B</h2>
      <div class="baseCopy2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeB1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeB2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeB3 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeB4 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>

    <div class="palette schmC">
      <h2 class="title">Scheme C</h2>
      <div class="baseCopy3 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeC1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeC2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeC3 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeC4 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>

    <div class="palette schmD">
      <h2 class="title">Scheme D</h2>
      <div class="baseCopy4 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeD1 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeD2 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeD3 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>
      <div class="schemeD4 swatch">
        <div class="hsvLegend">
          <span>H</span>
          <span>S</span>
          <span>L</span>
          <div class="hsv code">
            <span class="h">100</span>
            <span class="s">100</span>
            <span class="l">100</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>