<div class="icon__container">
  <svg t="1609491258718" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2616" width="200" height="200" fill="currentColor">
    <path fill="currentColor" d="M621.674667 408.021333c16.618667-74.24 28.224-127.936 34.837333-161.194666C673.152 163.093333 629.941333 85.333333 544.298667 85.333333c-77.226667 0-116.010667 38.378667-138.88 115.093334l-0.586667 2.24c-13.728 62.058667-34.72 110.165333-62.506667 144.586666a158.261333 158.261333 0 0 1-119.733333 58.965334l-21.909333 0.469333C148.437333 407.808 106.666667 450.816 106.666667 503.498667V821.333333c0 64.8 52.106667 117.333333 116.394666 117.333334h412.522667c84.736 0 160.373333-53.568 189.12-133.92l85.696-239.584c21.802667-60.96-9.536-128.202667-70.005333-150.186667a115.552 115.552 0 0 0-39.488-6.954667H621.674667zM544.256 149.333333c39.253333 0 59.498667 36.48 49.888 84.928-7.573333 38.144-21.984 104.426667-43.221333 198.666667-4.512 20.021333 10.56 39.093333 30.912 39.093333h218.666666c6.101333 0 12.16 1.066667 17.909334 3.168 27.445333 9.984 41.674667 40.554667 31.776 68.266667l-85.568 239.573333C744.981333 838.026667 693.301333 874.666667 635.402667 874.666667H223.498667C194.314667 874.666667 170.666667 850.784 170.666667 821.333333V503.498667c0-17.866667 14.144-32.448 31.829333-32.821334l21.866667-0.469333a221.12 221.12 0 0 0 167.381333-82.56c34.346667-42.602667 59.146667-99.306667 74.869333-169.877333C482.101333 166.336 499.552 149.333333 544.266667 149.333333z" p-id="2617"></path>
  </svg>
</div>
<div class="icon__container">
  <svg t="1609491375510" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2746" width="200" height="200" fill="currentColor">
    <path fill="currentColor" d="M790.976 190.72a32 32 0 0 1 45.258667-0.021333A457.248 457.248 0 0 1 970.666667 515.114667a457.248 457.248 0 0 1-134.293334 324.277333 32 32 0 1 1-45.258666-45.248A393.258667 393.258667 0 0 0 906.666667 515.114667a393.258667 393.258667 0 0 0-115.68-279.146667 32 32 0 0 1 0-45.258667z m-603.36 0.128a32 32 0 0 1 45.269333 45.248A393.258667 393.258667 0 0 0 117.333333 515.114667a393.258667 393.258667 0 0 0 115.466667 278.944 32 32 0 0 1-45.28 45.237333A457.248 457.248 0 0 1 53.333333 515.114667a457.248 457.248 0 0 1 134.293334-324.266667zM330.794667 285.866667a32 32 0 0 1 0.032 45.248A255.04 255.04 0 0 0 256 512a255.050667 255.050667 0 0 0 75.146667 181.184 32 32 0 1 1-45.216 45.301333A319.04 319.04 0 0 1 192 512a319.04 319.04 0 0 1 93.546667-226.090667 32 32 0 0 1 45.248-0.032z m407.36-0.266667A319.04 319.04 0 0 1 832 512a319.04 319.04 0 0 1-93.653333 226.208 32 32 0 0 1-45.28-45.237333A255.050667 255.050667 0 0 0 768 512a255.050667 255.050667 0 0 0-75.072-181.12 32 32 0 1 1 45.226667-45.269333zM566.752 384C637.408 384 682.666667 441.173333 682.666667 514.922667c0 58.005333-47.946667 116.789333-140.096 181.237333a53.333333 53.333333 0 0 1-61.141334 0C389.28 631.712 341.333333 572.928 341.333333 514.922667 341.333333 441.173333 386.592 384 457.258667 384c21.632 0 37.514667 5.994667 54.741333 18.421333C529.226667 389.994667 545.109333 384 566.741333 384z m0 64c-8.32 0-14.56 3.328-27.52 14.538667l-6.336 5.504a32 32 0 0 1-41.770667 0l-6.336-5.504c-12.96-11.2-19.2-14.538667-27.52-14.538667C425.653333 448 405.333333 473.674667 405.333333 514.922667c0 29.941333 34.410667 72.938667 106.666667 124.48 72.256-51.541333 106.666667-94.538667 106.666667-124.48C618.666667 473.674667 598.346667 448 566.741333 448z" p-id="2747"></path>
  </svg>
</div>
<div class="icon__container">
  <svg t="1609491416522" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2876" width="200" height="200" fill="currentColor">
    <path fill="currentColor" d="M356.266667 117.333333c59.584 0 100.021333 20.842667 155.818666 68.16C567.872 138.176 608.32 117.333333 667.904 117.333333c126.261333 0 212.746667 76.736 248.384 202.848a32 32 0 1 1-61.6 17.386667C826.357333 237.312 763.274667 181.333333 667.914667 181.333333c-41.536 0-70.389333 15.253333-117.12 55.253334-2.165333 1.856-14.4 12.416-17.941334 15.434666a32.010667 32.010667 0 0 1-41.536 0c-3.541333-3.018667-15.786667-13.578667-17.952-15.434666C426.645333 196.586667 397.792 181.333333 356.266667 181.333333 230.133333 181.333333 149.333333 282.368 149.333333 428.096c0 110.965333 113.290667 248.885333 343.637334 408.8a32.533333 32.533333 0 0 0 37.216-0.16c47.456-33.536 79.018667-56.426667 94.293333-68.373333a32.010667 32.010667 0 0 1 39.424 50.432c-16.352 12.778667-48.48 36.085333-96.768 70.208a96.554667 96.554667 0 0 1-110.677333 0.458666C210.293333 718.56 85.333333 566.432 85.333333 428.096 85.333333 249.770667 191.242667 117.333333 356.266667 117.333333z m388 555.392a31.925333 31.925333 0 0 1-22.773334-8.704l-93.184-87.84a29.824 29.824 0 0 1 0-43.413333l1.077334-1.013333a32 32 0 0 1 43.904 0l70.976 66.912 140.053333-132.021334a32 32 0 0 1 43.904 0l1.066667 1.013334a29.824 29.824 0 0 1 0 43.413333L767.04 664.032a31.925333 31.925333 0 0 1-22.762667 8.693333z" p-id="2877"></path>
  </svg>
</div>

<form>
  <div class="controle">
    <label for="h">H:</label>
    <input type="range" min="0" max="360" value="180" step="5" id="h" name="h" />
    <output for="h" id="output-h">180</output>
    <span>deg</span>
  </div>
  <div class="controle">
    <label for="s">S:</label>
    <input type="range" min="0" max="100" value="50" step="1" id="s" name="s" />
    <output for="s" id="output-s">50</output>
    <span>%</span>
  </div>
  <div class="controle">
    <label for="l">L:</label>
    <input type="range" min="0" max="100" value="50" step="1" id="l" name="l" />
    <output for="l" id="output-l">50</output>
    <span>%</span>
  </div>
</form>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  font-family: "Exo", Arial, sans-serif;
  background-color: #151522;
  color: #fff;
}

.icon__container {
  width: 50vh;
  height: 50vh;
  background-color: hsla(190, 30%, 10%, 0.85);
  border-radius: 10px;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10vh;

  transition: all 0.28s ease;
}

.icon {
  width: 30vh;
  transition: all 0.28s ease;
}

form {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);

  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10vh;
}

.controle {
  display: flex;
  align-items: center;
}

:root {
  --h: 180;
  --s: 50;
  --l: 50;
}

.icon__container {
  color: hsl(var(--h), calc(var(--s) * 1%), calc(var(--l) * 1%));
}

.icon__container:nth-child(1) {
  --h: 232;
}

.icon__container:nth-child(2) {
  --s: 22;
}

.icon__container:nth-child(3) {
  --l: 60;
}

const rootEle = document.documentElement;

const inputColors = document.querySelectorAll('input[type="range"]');

inputColors.forEach((element) =>
  element.addEventListener("input", (evt) => {
    rootEle.style.setProperty(`--${evt.target.id}`, `${evt.target.value}`);
    document.getElementById(`output-${evt.target.id}`).innerText =
      evt.target.value;
  })
);