<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)