:root {
  --color-priduck-hue: 180;
}

/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  transition: opacity 0.2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04aa6d; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #04aa6d; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

#hue {
  display: inline-block;
  min-width: 5em;
}

#hue-box {
  display: inline-block;
  min-width: 5em;
  min-height: 1em;
  border: 1px solid black;
  background-color: lch(50% 100 var(--color-priduck-hue));
}

table {
  width: 100%;
}

td,
th {
  text-align: center;
}

.color-lch,
.color-rgb {
  font-size: 70%;
}

.fg-dark {
  color: white;
}

.fg-light {
  color: black;
}

.fg-c0b0 {
  color: var(--color-priduck-c0b0);
}
.fg-c1b0 {
  color: var(--color-priduck-c1b0);
}
.fg-c2b0 {
  color: var(--color-priduck-c2b0);
}
.fg-c3b0 {
  color: var(--color-priduck-c3b0);
}
.fg-c4b0 {
  color: var(--color-priduck-c4b0);
}
.fg-c5b0 {
  color: var(--color-priduck-c5b0);
}
.fg-c6b0 {
  color: var(--color-priduck-c6b0);
}
.fg-c7b0 {
  color: var(--color-priduck-c7b0);
}
.fg-c8b0 {
  color: var(--color-priduck-c8b0);
}
.fg-c9b0 {
  color: var(--color-priduck-c9b0);
}
.fg-c0b1 {
  color: var(--color-priduck-c0b1);
}
.fg-c1b1 {
  color: var(--color-priduck-c1b1);
}
.fg-c2b1 {
  color: var(--color-priduck-c2b1);
}
.fg-c3b1 {
  color: var(--color-priduck-c3b1);
}
.fg-c4b1 {
  color: var(--color-priduck-c4b1);
}
.fg-c5b1 {
  color: var(--color-priduck-c5b1);
}
.fg-c6b1 {
  color: var(--color-priduck-c6b1);
}
.fg-c7b1 {
  color: var(--color-priduck-c7b1);
}
.fg-c8b1 {
  color: var(--color-priduck-c8b1);
}
.fg-c9b1 {
  color: var(--color-priduck-c9b1);
}
.fg-c0b2 {
  color: var(--color-priduck-c0b2);
}
.fg-c1b2 {
  color: var(--color-priduck-c1b2);
}
.fg-c2b2 {
  color: var(--color-priduck-c2b2);
}
.fg-c3b2 {
  color: var(--color-priduck-c3b2);
}
.fg-c4b2 {
  color: var(--color-priduck-c4b2);
}
.fg-c5b2 {
  color: var(--color-priduck-c5b2);
}
.fg-c6b2 {
  color: var(--color-priduck-c6b2);
}
.fg-c7b2 {
  color: var(--color-priduck-c7b2);
}
.fg-c8b2 {
  color: var(--color-priduck-c8b2);
}
.fg-c9b2 {
  color: var(--color-priduck-c9b2);
}
.fg-c0b3 {
  color: var(--color-priduck-c0b3);
}
.fg-c1b3 {
  color: var(--color-priduck-c1b3);
}
.fg-c2b3 {
  color: var(--color-priduck-c2b3);
}
.fg-c3b3 {
  color: var(--color-priduck-c3b3);
}
.fg-c4b3 {
  color: var(--color-priduck-c4b3);
}
.fg-c5b3 {
  color: var(--color-priduck-c5b3);
}
.fg-c6b3 {
  color: var(--color-priduck-c6b3);
}
.fg-c7b3 {
  color: var(--color-priduck-c7b3);
}
.fg-c8b3 {
  color: var(--color-priduck-c8b3);
}
.fg-c9b3 {
  color: var(--color-priduck-c9b3);
}
.fg-c0b4 {
  color: var(--color-priduck-c0b4);
}
.fg-c1b4 {
  color: var(--color-priduck-c1b4);
}
.fg-c2b4 {
  color: var(--color-priduck-c2b4);
}
.fg-c3b4 {
  color: var(--color-priduck-c3b4);
}
.fg-c4b4 {
  color: var(--color-priduck-c4b4);
}
.fg-c5b4 {
  color: var(--color-priduck-c5b4);
}
.fg-c6b4 {
  color: var(--color-priduck-c6b4);
}
.fg-c7b4 {
  color: var(--color-priduck-c7b4);
}
.fg-c8b4 {
  color: var(--color-priduck-c8b4);
}
.fg-c9b4 {
  color: var(--color-priduck-c9b4);
}
.fg-c0b5 {
  color: var(--color-priduck-c0b5);
}
.fg-c1b5 {
  color: var(--color-priduck-c1b5);
}
.fg-c2b5 {
  color: var(--color-priduck-c2b5);
}
.fg-c3b5 {
  color: var(--color-priduck-c3b5);
}
.fg-c4b5 {
  color: var(--color-priduck-c4b5);
}
.fg-c5b5 {
  color: var(--color-priduck-c5b5);
}
.fg-c6b5 {
  color: var(--color-priduck-c6b5);
}
.fg-c7b5 {
  color: var(--color-priduck-c7b5);
}
.fg-c8b5 {
  color: var(--color-priduck-c8b5);
}
.fg-c9b5 {
  color: var(--color-priduck-c9b5);
}
.fg-c0b6 {
  color: var(--color-priduck-c0b6);
}
.fg-c1b6 {
  color: var(--color-priduck-c1b6);
}
.fg-c2b6 {
  color: var(--color-priduck-c2b6);
}
.fg-c3b6 {
  color: var(--color-priduck-c3b6);
}
.fg-c4b6 {
  color: var(--color-priduck-c4b6);
}
.fg-c5b6 {
  color: var(--color-priduck-c5b6);
}
.fg-c6b6 {
  color: var(--color-priduck-c6b6);
}
.fg-c7b6 {
  color: var(--color-priduck-c7b6);
}
.fg-c8b6 {
  color: var(--color-priduck-c8b6);
}
.fg-c9b6 {
  color: var(--color-priduck-c9b6);
}
.fg-c0b7 {
  color: var(--color-priduck-c0b7);
}
.fg-c1b7 {
  color: var(--color-priduck-c1b7);
}
.fg-c2b7 {
  color: var(--color-priduck-c2b7);
}
.fg-c3b7 {
  color: var(--color-priduck-c3b7);
}
.fg-c4b7 {
  color: var(--color-priduck-c4b7);
}
.fg-c5b7 {
  color: var(--color-priduck-c5b7);
}
.fg-c6b7 {
  color: var(--color-priduck-c6b7);
}
.fg-c7b7 {
  color: var(--color-priduck-c7b7);
}
.fg-c8b7 {
  color: var(--color-priduck-c8b7);
}
.fg-c9b7 {
  color: var(--color-priduck-c9b7);
}
.fg-c0b8 {
  color: var(--color-priduck-c0b8);
}
.fg-c1b8 {
  color: var(--color-priduck-c1b8);
}
.fg-c2b8 {
  color: var(--color-priduck-c2b8);
}
.fg-c3b8 {
  color: var(--color-priduck-c3b8);
}
.fg-c4b8 {
  color: var(--color-priduck-c4b8);
}
.fg-c5b8 {
  color: var(--color-priduck-c5b8);
}
.fg-c6b8 {
  color: var(--color-priduck-c6b8);
}
.fg-c7b8 {
  color: var(--color-priduck-c7b8);
}
.fg-c8b8 {
  color: var(--color-priduck-c8b8);
}
.fg-c9b8 {
  color: var(--color-priduck-c9b8);
}
.fg-c0b9 {
  color: var(--color-priduck-c0b9);
}
.fg-c1b9 {
  color: var(--color-priduck-c1b9);
}
.fg-c2b9 {
  color: var(--color-priduck-c2b9);
}
.fg-c3b9 {
  color: var(--color-priduck-c3b9);
}
.fg-c4b9 {
  color: var(--color-priduck-c4b9);
}
.fg-c5b9 {
  color: var(--color-priduck-c5b9);
}
.fg-c6b9 {
  color: var(--color-priduck-c6b9);
}
.fg-c7b9 {
  color: var(--color-priduck-c7b9);
}
.fg-c8b9 {
  color: var(--color-priduck-c8b9);
}
.fg-c9b9 {
  color: var(--color-priduck-c9b9);
}

.bg-c0b0 {
  background-color: var(--color-priduck-c0b0);
}
.bg-c1b0 {
  background-color: var(--color-priduck-c1b0);
}
.bg-c2b0 {
  background-color: var(--color-priduck-c2b0);
}
.bg-c3b0 {
  background-color: var(--color-priduck-c3b0);
}
.bg-c4b0 {
  background-color: var(--color-priduck-c4b0);
}
.bg-c5b0 {
  background-color: var(--color-priduck-c5b0);
}
.bg-c6b0 {
  background-color: var(--color-priduck-c6b0);
}
.bg-c7b0 {
  background-color: var(--color-priduck-c7b0);
}
.bg-c8b0 {
  background-color: var(--color-priduck-c8b0);
}
.bg-c9b0 {
  background-color: var(--color-priduck-c9b0);
}
.bg-c0b1 {
  background-color: var(--color-priduck-c0b1);
}
.bg-c1b1 {
  background-color: var(--color-priduck-c1b1);
}
.bg-c2b1 {
  background-color: var(--color-priduck-c2b1);
}
.bg-c3b1 {
  background-color: var(--color-priduck-c3b1);
}
.bg-c4b1 {
  background-color: var(--color-priduck-c4b1);
}
.bg-c5b1 {
  background-color: var(--color-priduck-c5b1);
}
.bg-c6b1 {
  background-color: var(--color-priduck-c6b1);
}
.bg-c7b1 {
  background-color: var(--color-priduck-c7b1);
}
.bg-c8b1 {
  background-color: var(--color-priduck-c8b1);
}
.bg-c9b1 {
  background-color: var(--color-priduck-c9b1);
}
.bg-c0b2 {
  background-color: var(--color-priduck-c0b2);
}
.bg-c1b2 {
  background-color: var(--color-priduck-c1b2);
}
.bg-c2b2 {
  background-color: var(--color-priduck-c2b2);
}
.bg-c3b2 {
  background-color: var(--color-priduck-c3b2);
}
.bg-c4b2 {
  background-color: var(--color-priduck-c4b2);
}
.bg-c5b2 {
  background-color: var(--color-priduck-c5b2);
}
.bg-c6b2 {
  background-color: var(--color-priduck-c6b2);
}
.bg-c7b2 {
  background-color: var(--color-priduck-c7b2);
}
.bg-c8b2 {
  background-color: var(--color-priduck-c8b2);
}
.bg-c9b2 {
  background-color: var(--color-priduck-c9b2);
}
.bg-c0b3 {
  background-color: var(--color-priduck-c0b3);
}
.bg-c1b3 {
  background-color: var(--color-priduck-c1b3);
}
.bg-c2b3 {
  background-color: var(--color-priduck-c2b3);
}
.bg-c3b3 {
  background-color: var(--color-priduck-c3b3);
}
.bg-c4b3 {
  background-color: var(--color-priduck-c4b3);
}
.bg-c5b3 {
  background-color: var(--color-priduck-c5b3);
}
.bg-c6b3 {
  background-color: var(--color-priduck-c6b3);
}
.bg-c7b3 {
  background-color: var(--color-priduck-c7b3);
}
.bg-c8b3 {
  background-color: var(--color-priduck-c8b3);
}
.bg-c9b3 {
  background-color: var(--color-priduck-c9b3);
}
.bg-c0b4 {
  background-color: var(--color-priduck-c0b4);
}
.bg-c1b4 {
  background-color: var(--color-priduck-c1b4);
}
.bg-c2b4 {
  background-color: var(--color-priduck-c2b4);
}
.bg-c3b4 {
  background-color: var(--color-priduck-c3b4);
}
.bg-c4b4 {
  background-color: var(--color-priduck-c4b4);
}
.bg-c5b4 {
  background-color: var(--color-priduck-c5b4);
}
.bg-c6b4 {
  background-color: var(--color-priduck-c6b4);
}
.bg-c7b4 {
  background-color: var(--color-priduck-c7b4);
}
.bg-c8b4 {
  background-color: var(--color-priduck-c8b4);
}
.bg-c9b4 {
  background-color: var(--color-priduck-c9b4);
}
.bg-c0b5 {
  background-color: var(--color-priduck-c0b5);
}
.bg-c1b5 {
  background-color: var(--color-priduck-c1b5);
}
.bg-c2b5 {
  background-color: var(--color-priduck-c2b5);
}
.bg-c3b5 {
  background-color: var(--color-priduck-c3b5);
}
.bg-c4b5 {
  background-color: var(--color-priduck-c4b5);
}
.bg-c5b5 {
  background-color: var(--color-priduck-c5b5);
}
.bg-c6b5 {
  background-color: var(--color-priduck-c6b5);
}
.bg-c7b5 {
  background-color: var(--color-priduck-c7b5);
}
.bg-c8b5 {
  background-color: var(--color-priduck-c8b5);
}
.bg-c9b5 {
  background-color: var(--color-priduck-c9b5);
}
.bg-c0b6 {
  background-color: var(--color-priduck-c0b6);
}
.bg-c1b6 {
  background-color: var(--color-priduck-c1b6);
}
.bg-c2b6 {
  background-color: var(--color-priduck-c2b6);
}
.bg-c3b6 {
  background-color: var(--color-priduck-c3b6);
}
.bg-c4b6 {
  background-color: var(--color-priduck-c4b6);
}
.bg-c5b6 {
  background-color: var(--color-priduck-c5b6);
}
.bg-c6b6 {
  background-color: var(--color-priduck-c6b6);
}
.bg-c7b6 {
  background-color: var(--color-priduck-c7b6);
}
.bg-c8b6 {
  background-color: var(--color-priduck-c8b6);
}
.bg-c9b6 {
  background-color: var(--color-priduck-c9b6);
}
.bg-c0b7 {
  background-color: var(--color-priduck-c0b7);
}
.bg-c1b7 {
  background-color: var(--color-priduck-c1b7);
}
.bg-c2b7 {
  background-color: var(--color-priduck-c2b7);
}
.bg-c3b7 {
  background-color: var(--color-priduck-c3b7);
}
.bg-c4b7 {
  background-color: var(--color-priduck-c4b7);
}
.bg-c5b7 {
  background-color: var(--color-priduck-c5b7);
}
.bg-c6b7 {
  background-color: var(--color-priduck-c6b7);
}
.bg-c7b7 {
  background-color: var(--color-priduck-c7b7);
}
.bg-c8b7 {
  background-color: var(--color-priduck-c8b7);
}
.bg-c9b7 {
  background-color: var(--color-priduck-c9b7);
}
.bg-c0b8 {
  background-color: var(--color-priduck-c0b8);
}
.bg-c1b8 {
  background-color: var(--color-priduck-c1b8);
}
.bg-c2b8 {
  background-color: var(--color-priduck-c2b8);
}
.bg-c3b8 {
  background-color: var(--color-priduck-c3b8);
}
.bg-c4b8 {
  background-color: var(--color-priduck-c4b8);
}
.bg-c5b8 {
  background-color: var(--color-priduck-c5b8);
}
.bg-c6b8 {
  background-color: var(--color-priduck-c6b8);
}
.bg-c7b8 {
  background-color: var(--color-priduck-c7b8);
}
.bg-c8b8 {
  background-color: var(--color-priduck-c8b8);
}
.bg-c9b8 {
  background-color: var(--color-priduck-c9b8);
}
.bg-c0b9 {
  background-color: var(--color-priduck-c0b9);
}
.bg-c1b9 {
  background-color: var(--color-priduck-c1b9);
}
.bg-c2b9 {
  background-color: var(--color-priduck-c2b9);
}
.bg-c3b9 {
  background-color: var(--color-priduck-c3b9);
}
.bg-c4b9 {
  background-color: var(--color-priduck-c4b9);
}
.bg-c5b9 {
  background-color: var(--color-priduck-c5b9);
}
.bg-c6b9 {
  background-color: var(--color-priduck-c6b9);
}
.bg-c7b9 {
  background-color: var(--color-priduck-c7b9);
}
.bg-c8b9 {
  background-color: var(--color-priduck-c8b9);
}
.bg-c9b9 {
  background-color: var(--color-priduck-c9b9);
}

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1em;
}