<div class="origin-color">
  <code>blue</code>
</div>
<div class="relative-color">
  <code>oklch(from blue calc(l - .25) c h)</code>
</div>

@layer demo {
  .relative-color {
    background: oklch(from blue calc(l - .25) c h);
  }
  
  .origin-color {
    background: blue;
  }
}

@layer demo.support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    
    & > div {
      display: grid;
      place-content: center;
      font-size: clamp(1.25rem, 3vw, 3vw);
    }
  }
  
  .origin-color {
    color: white;
  }
  
  .relative-color {
    color: black;
    
    & > code {
      background: white;
      padding: 1ch 2ch;
      border-radius: 100px;
    }
  }
}