<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
}

.one {
  background: red;
}

.two {
  background: color-mix(in srgb, red 75%, blue);
}

.three {
  background: blue;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.