<p>Default text color</p>
<p class="blend-1">Blended 40% with the background</p>
<p class="blend-2">Blended 70% with the background</p>

@use cssnext;

:root {
  --color1: #2e1b4c;
  --color2: #dcdfef;
}

html {
  background: var(--color1);
  color: var(--color2);
}

.blend-1 {
  color: color(
    var(--color2) 
    blend(var(--color1) 40%)
  );
}

.blend-2 {
  color: color(
    var(--color2) 
    blend(var(--color1) 70%)
  );
}