<div class="delta-40">
  <code>oklch(from #ddd calc(l - .40) c h)</code>
  <div>AA 4.77</div>
</div>
<div class="delta-50">
  <code>oklch(from #ddd calc(l - .50) c h)</code>
  <div>AA 7.21</div>
</div>
<div class="delta-60">
  <code>oklch(from #ddd calc(l - .60) c h)</code>
  <div>AA 10.05</div>
</div>

@layer demo {
  body > div {
    background: #ddd;
    display: grid;
    gap: .5ch;
    place-items: center;
    
    & > div {
      color: black;
    }
  }
  
  .delta-40 {
    color: oklch(from #ddd calc(l - .40) c h);
  }
  
  .delta-50 {
    color: oklch(from #ddd calc(l - .50) c h);
  }
  
  .delta-60 {
    color: oklch(from #ddd calc(l - .60) c h);
  }
}

@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);
    }
  }
}