<div class="example-1"></div>
<div class="example-2"></div>
<div class="example-3"></div>

:root {
  --color: yellow;
  --color-mix: color-mix(in srgb, var(--color), red);
  --color-more-mix: color-mix(in srgb, var(--color), red 70%);
}

.example-1 {
  background-color: var(--color);
}

.example-2 {
  background-color: var(--color-mix);
}

.example-3 {
  background-color: var(--color-more-mix);
}

body {
  display: flex;
  gap: 1rem;
}

div {
  width: 200px;
  height: 200px;
}