.box {
  width: 400px;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, red, blue);
}

ul {
  list-style-type: none;
  display: flex;
}

li {
  padding: 1rem;
  border: 1px solid white;
  width: 100px;
}

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);
}