<div class="box">original</div>
<div class="box different">modified</div>
:root {
  --base-color: orange;
}

.box {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: var(--base-color);
}

.different {
  background-color: color(from var(--base-color) srgb r calc(g - 0.5) calc(b + 0.5));
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.