color-mix()

color-mix(in lch, plum, pink);
color-mix(in lch, plum 40%, pink);
color-mix(in srgb, #34c9eb 20%, white);
color-mix(in hsl longer hue, hsl(120 100% 50%) 20%, white);

<ul>
  <li>0%</li>
  <li>25%</li>
  <li>50%</li>
  <li>75%</li>
  <li>100%</li>
  <li></li>
</ul>

ul {
  display: flex;
  list-style-type: none;
  font-size: 150%;
  gap: 10px;
  border: 2px solid;
  padding: 10px;
}
li {
  padding: 10px;
  flex: 1;
  box-sizing: border-box;
  font-family: monospace;
  outline: 1px solid #34c9eb;
  text-align: center;
}

li:nth-child(1) {
  background-color: color-mix(in srgb, #34c9eb 0%, white);
}
li:nth-child(2) {
  background-color: color-mix(in srgb, #34c9eb 25%, white);
}
li:nth-child(3) {
  background-color: color-mix(in srgb, #34c9eb 50%, white);
}
li:nth-child(4) {
  background-color: color-mix(in srgb, #34c9eb 75%, white);
}
li:nth-child(5) {
  background-color: color-mix(in srgb, #34c9eb 100%, white);
}
li:nth-child(6) {
  background-color: color-mix(in srgb, #34c9eb, white);
}

<div class="color-one">色 1</div>
<div class="color-two">色 2</div>
<div class="shorter">短い混色</div>
<div class="longer">長い混色</div>

body {
  display: flex;
  flex-wrap: wrap;
}
div {
  border: 1px solid;
  font: bold 150% monospace;
  height: 100px;
  margin: 10px 5%;
  width: 30%;
}

.color-one {
  background-color: hsl(10 100% 50%);
}
.color-two {
  background-color: hsl(60 100% 50%);
}
.shorter {
  background-color: color-mix(
    in hsl shorter hue,
    hsl(10 100% 50%),
    hsl(60 100% 50%)
  );
}
.longer {
  background-color: color-mix(
    in hsl longer hue,
    hsl(10 100% 50%),
    hsl(60 100% 50%)
  );
}