<div class="origin-color">
  <code>yellow</code>
</div>
<div class="relative-color">
  <code>rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b))</code>
</div>

@layer demo {
  .relative-color {
    background: rgb(from yellow calc(255 - r) calc(255 - g) calc(255 - b));
  }
  
  .origin-color {
    background: yellow;
  }
}

@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, 2.5vw, 3vw);
    }
  }
  
  .origin-color {
    color: black;
  }
  
  .relative-color {
    color: black;
    
    & > code {
      background: white;
      padding: 1ch 2ch;
      border-radius: 100px;
    }
  }
}