<ol style="--flex-flow: column; --gap: 4rem; --margin: 0;">
  <li>
    <div style="--font-size: 2em; --font-weight: bolder; --text-align: center;">Adjust hue</div>
    <div style="--text-align: center;">
      <p>background: hsl( HUE, 100%, 50% );</p>
    </div>
    <div style="--flex-flow: row wrap; --child_flex: 1 1 clamp(0%, (720px - 100%) * 10000, 100%); --gap: 1rem;">
      <p style="--background: hsl(180deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(190deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(200deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(210deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(220deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(230deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(240deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
    </div>
  </li>
  <li>
    <div style="--font-size: 2em; --font-weight: bolder; --text-align: center;">Desaturation</div>
    <div style="--text-align: center;">
      <p>filter: saturate(0);</p>
    </div>
    <div style="--flex-flow: row wrap; --child_flex: 1 1 clamp(0%, (720px - 100%) * 10000, 100%); --gap: 1rem; --filter: saturate(0);">
      <p style="--background: hsl(180deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(190deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(200deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(210deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(220deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(230deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(240deg, 100%, 50%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
    </div>
  </li>
  <li>
    <div style="--font-size: 2em; --font-weight: bolder; --text-align: center;">Adjust lightness</div>
    <div style="--text-align: center;">
      <p>hsl( Xdeg, 100%, LIGHTNESS );</p>
    </div>
    <div style="--flex-flow: row wrap; --child_flex: 1 1 clamp(0%, (720px - 100%) * 10000, 100%); --gap: 1rem; --filter: saturate(0);">
      <p style="--background: hsl(180deg, 100%, 32%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(190deg, 100%, 38%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(200deg, 100%, 46%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(210deg, 100%, 56%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(220deg, 100%, 64%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(230deg, 100%, 69%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(240deg, 100%, 73%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
    </div>
  </li>
  <li>
    <div style="--font-size: 2em; --font-weight: bolder; --text-align: center;">Restore saturation</div>
    <div style="--text-align: center;">
      <p>filter: saturate(1);</p>
    </div>
    <div style="--flex-flow: row wrap; --child_flex: 1 1 clamp(0%, (720px - 100%) * 10000, 100%); --gap: 1rem;">
      <p style="--background: hsl(180deg, 100%, 32%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(190deg, 100%, 38%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(200deg, 100%, 46%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(210deg, 100%, 56%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(220deg, 100%, 64%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(230deg, 100%, 69%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
      <p style="--background: hsl(240deg, 100%, 73%);"><span style="--color: #000;">Lorem ipsum dolor sit amet, consectetur adipiscing elit,</span> <span style="--color: #fff;">sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></p>
    </div>
  </li>
</ol>

body {
  font: initial;
  margin: 0;
  padding: 1rem;
}
* {
  margin-block: 0;
  min-height: 0;
  min-width: 0;
}
* + :where(p, :not(dl) > div) {
  margin-block-start: 1rem;
}
[style~="--child_aspect-ratio:"] > * {
  aspect-ratio: var(--child_aspect-ratio);
}
[style~="--background:"] {
  background: var(--background);
}
[style~="--background:"]:where([style~="--flex-flow:"]),
:where([style~="--flex-flow:"]) > [style~="--background:"] {
  padding: 1rem;
}
[style~="--color:"] {
  color: var(--color);
}
[style~="--filter:"] {
  filter: var(--filter);
}
[style~="--flex-flow:"] {
  display: flex;
  flex-flow: var(--flex-flow);
  list-style: none;
  padding: 0;
}
[style~="--flex-flow:"] > * {
  margin: 0;
}
[style~="--child_flex:"] > * {
  flex: var(--child_flex);
}
[style~="--gap:"] {
  gap: var(--gap);
}
[style~="--font-size:"] {
  font-size: var(--font-size);
}
[style~="--font-weight:"] {
  font-weight: var(--font-weight);
}
[style~="--text-align:"] {
  text-align: var(--text-align);
}