<section>
  <h2>RGB</h2>
  <div class="demo">
    <div id="rbg">Testing RGB</div>
  </div>
  <fieldset>
    <legend>Adjust background</legend>
    <div>
      <label for="color1">Color</label>
      <input id="color1" type="color" value="#00FF00" oninput="rbg.style.setProperty('--bg-color', this.value)">
    </div>
    <div>
      <label for="alpha1">Alpha</label>
      <input id="alpha1" type="range" value="0.4" min="0" max="1" step="0.1" oninput="rbg.style.setProperty('--bg-alpha', this.value)">
    </div>
  </fieldset>
</section>

<section>
  <h2>HSL</h2>
  <div class="demo">
    <div id="hsl">Testing HSL</div>
  </div>
  <fieldset>
    <legend>Adjust background</legend>
    <div>
      <label for="h">Hue</label>
      <input id="h" type="range" value="255" min="0" max="360" oninput="hsl.style.setProperty('--h', this.value)">
    </div>
    <div>
      <label for="alpha2">Alpha</label>
      <input id="alpha2" type="range" value="0.4" min="0" max="1" step="0.1" oninput="hsl.style.setProperty('--bg-alpha', this.value)">
    </div>
  </fieldset>
</section>

<section>
  <h2>Named colors</h2>

  <div class="demo">
    <div id="named">Testing HSL</div>
  </div>
  <fieldset>
    <legend>Named color</legend>
    <div>
      <label for="color-select">Color</label>
      <select id="color-select" oninput="named.style.setProperty('--bg-color', this.value)">
        <option value="red">red</option>
        <option value="blue">blue</option>
        <option value="goldenrod">goldenrod</option>
        <option value="tomato">tomato</option>
        <option value="yellow">yellow</option>
        <option value="rebeccapurple">rebeccapurple</option>
      </select>
    </div>
    <div>
      <label for="alpha3">Alpha</label>
      <input id="alpha3" type="range" value="0.4" min="0" max="1" step="0.1" oninput="named.style.setProperty('--bg-alpha', this.value)">
    </div>
  </fieldset>
</section>

<section>
  <h2>Borders</h2>
  <div class="demo">
    <div id="borders">Testing Borders</div>
  </div>
  <fieldset>
    <legend>Adjust background</legend>
    <div>
      <label for="color4">Color</label>
      <input id="color4" type="color" value="#0000FF" oninput="borders.style.setProperty('--bg-color', this.value)">
    </div>
    <div>
      <label for="alpha4">Alpha</label>
      <input id="alpha4" type="range" value="0.4" min="0" max="1" step="0.1" oninput="borders.style.setProperty('--bg-alpha', this.value)">
    </div>
  </fieldset>
</section>
// Boilerplate stuff

body {
  margin: 1rem;
}

.demo {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAABZJREFUCB1jYMACpk+f/h9DmG6CQJsB2bIQmai3jpsAAAAASUVORK5CYII=);
  background-repeat: repeat;

  div {
    height: 5rem;
  }
}

// Alpha Paintlet stuff

#rbg {
  --bg-alpha: 0.4;
  --bg-color: #00ff00;
  background: paint(alpha);
}

#hsl {
  --h: 255;
  --bg-alpha: 0.4;
  --bg-color: hsl(var(--h) 94% 43%);
  background: paint(alpha);
}

#named {
  --bg-alpha: 0.4;
  --bg-color: red;
  background: paint(alpha);
}

#borders {
  --bg-alpha: 0.4;
  --bg-color: blue;
  border-width: 10px;
  border-style: solid;
  border-image-source: paint(alpha);
  border-image-repeat: repeat;
  border-image-slice: 1%; // I'm 41 years old and I still don't understand this.
}
View Compiled 
CSS.paintWorklet.addModule("https://assets.codepen.io/17/alpha.js");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.