<div class="origin-color">
  <code>lime</code>
</div>
<div class="relative-color">
  <code>rgb(from lime r g b / 25%)</code>
</div>

@layer demo {
  .relative-color {
    background: rgb(from lime r g b / 25%);
  }
  
  .origin-color {
    background: lime;
  }
}

@layer demo.support {
  :root {
    --gradient-checkerboard: repeating-conic-gradient(
      #000 0% 25%, 
      #0000 0% 50%) 
      50% / 1rem 1rem;  
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    background: var(--gradient-checkerboard);
  }

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