RGB Color Mixer

Screens mix red, green, and blue light to make every color.

<div class="channel">
  <div class="channel-swatch" id="swatch-r"></div>
  <span class="channel-label" style="color:#c0392b;">Red</span>
  <input type="range" id="r-slider" min="0" max="255" value="180" step="1" oninput="update()">
  <span class="channel-val" id="val-r">180</span>
</div>

<div class="channel">
  <div class="channel-swatch" id="swatch-g"></div>
  <span class="channel-label" style="color:#1e8c45;">Green</span>
  <input type="range" id="g-slider" min="0" max="255" value="100" step="1" oninput="update()">
  <span class="channel-val" id="val-g">100</span>
</div>

<div class="channel">
  <div class="channel-swatch" id="swatch-b"></div>
  <span class="channel-label" style="color:#1a5fb4;">Blue</span>
  <input type="range" id="b-slider" min="0" max="255" value="220" step="1" oninput="update()">
  <span class="channel-val" id="val-b">220</span>
</div>

<hr>

<div class="output-section">
  <div class="output-swatch" id="output-swatch"></div>
  <div class="output-info">
    <div class="hex-display" id="hex-display"></div>
    <div class="output-row">
      <span class="output-label">Red</span>
      <span class="output-value" id="info-r"></span>
    </div>
    <div class="output-row">
      <span class="output-label">Green</span>
      <span class="output-value" id="info-g"></span>
    </div>
    <div class="output-row">
      <span class="output-label">Blue</span>
      <span class="output-value" id="info-b"></span>
    </div>
  </div>
</div>

<div class="components-row">
  <div class="comp-chip chip-r">
    <div class="chip-label">Red</div>
    <div class="chip-val" id="pct-r"></div>
  </div>
  <div class="comp-chip chip-g">
    <div class="chip-label">Green</div>
    <div class="chip-val" id="pct-g"></div>
  </div>
  <div class="comp-chip chip-b">
    <div class="chip-label">Blue</div>
    <div class="chip-val" id="pct-b"></div>
  </div>
</div>

<div class="tips">
  <div class="tips-heading">Things to try</div>
  <ul>
    <li><span class="tip-swatch" style="background:#fff;"></span> All three to 255 → white (all light!)</li>
    <li><span class="tip-swatch" style="background:#000;"></span> All three to 0 → black (no light)</li>
    <li><span class="tip-swatch" style="background:#ffff00;"></span> Max red + max green, no blue → yellow</li>
    <li><span class="tip-swatch" style="background:#ff00ff;"></span> Max red + max blue, no green → magenta</li>
    <li><span class="tip-swatch" style="background:#00ffff;"></span> Max green + max blue, no red → cyan</li>
    <li><span class="tip-swatch" style="background:#888;"></span> Equal amounts of all three → gray</li>
  </ul>
</div>