<div class="origin-color">
  <code>orchid</code>
</div>
<div class="relative-color">
  <code>hsl(from orchid h calc(s * 1.5) l)</code>
</div>
@layer demo {
  .relative-color {
    background: hsl(from orchid h calc(s * 1.5) l);
  }
  
  .origin-color {
    background: orchid;
  }
}

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

External CSS

  1. https://codepen.io/argyleink/pen/jOXdPjO.css

External JavaScript

This Pen doesn't use any external JavaScript resources.