<section id="demo">
  <h1>ready.</h1>
</section>
<input type="range" max="360" value="225" id="hue">

@layer demo {
  section {
    --bg: hsl(var(--hue) 50% 50%);
  }
  
  h1 {
    /* pick either black or white based on --bg */
    --text: color-contrast(var(--bg) vs black, white);
    color: var(--text);
    
    /* generic semitransparent bg */
    background: hsl(0 0% 0% / 40%);
  }
  
  /* if relative color syntax is supported */
  @supports (background: hsl(from red h s l)) {
    h1 {
      /* pick either black or white 
         depending which contrasts with --text,
         extract it and make it 40% semitransparent */
      background: oklch(from color-contrast(var(--text) vs black,white) l c h / 40%);
    }
  }
}

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

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

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

    display: grid;
    place-content: center;
    gap: 1rem;
  }
  
  section {
    --hue: 225;
    background: var(--bg);
    padding: 25vmin;
  }
  
  h1 {
    border-radius: 1rem;
  }
  
  h1 {
    padding: 1rem 2rem;
  }
}

hue.oninput = e =>
  demo.style.setProperty('--hue', e.target.value)