<label class="color1">
  <input
    type="color"
    value="red"
    oninput="document.body.style.setProperty('--color1', this.value)"
  />
</label>
+
<label class="color2">
  <input
    type="color"
    value="white"
    oninput="document.body.style.setProperty('--color2', this.value)"
  />
</label>
=
<div class="color-mix"></div>

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  /* flex-direction: column; */
  align-items: center;
  background: aliceblue;
  gap: 15px;
  font-size: 30px;
  color: royalblue;
}
div,
label {
  width: 100px;
  height: 100px;
  border-radius: 4px;
  outline: 2px solid royalblue;
  outline-offset: 2px;
}
.color1 {
  background-color: var(--color1, red);
}
.color2 {
  background-color: var(--color2, yellow);
}
.color-mix {
  background-color: color-mix(
    in srgb,
    var(--color1, red),
    var(--color2, yellow)
  );
}
input {
  width: 100%;
  height: 50%;
  opacity: 0;
}