<div class="cw-brightness-wrap">
  <div class="cw-brightness-label">Brightness</div>
  <canvas id="cw-brightness-canvas" width="300" height="28"></canvas>
  <div class="cw-brightness-label">Saturation</div>
  <canvas id="cw-saturation-canvas" width="300" height="28"></canvas>
</div>

<div class="cw-harmony-buttons">
  <button class="cw-btn active" data-mode="complementary">Complementary</button>
  <button class="cw-btn" data-mode="analogous">Analogous</button>
  <button class="cw-btn" data-mode="triadic">Triadic</button>
  <button class="cw-btn" data-mode="split">Split-Comp</button>
  <button class="cw-btn" data-mode="tetradic">Tetradic</button>
</div>
Color Palette
<div class="cw-section-title">WCAG Contrast</div>
<div class="cw-contrast-box" id="cw-contrast-box">
  <div class="cw-contrast-row">
    <span style="color:#94a3b8;font-size:13px;">Base vs Harmony #1</span>
    <span class="cw-contrast-ratio" id="cw-ratio-val">—</span>
    <span class="cw-wcag-badge" id="cw-wcag-badge">—</span>
  </div>
  <div class="cw-contrast-preview">
    <div class="cw-cp-sample" id="cw-cp-dark">Aa</div>
    <div class="cw-cp-sample" id="cw-cp-light">Aa</div>
  </div>
</div>

<div class="cw-section-title">CSS Export</div>
<div class="cw-export-box">
  <div class="cw-export-header">
    <span style="font-size:13px;color:#94a3b8;">CSS Custom Properties</span>
    <button class="cw-copy-css-btn" id="cw-copy-css">Copy CSS</button>
  </div>
  <textarea id="cw-css-output" readonly></textarea>
</div>

<div class="cw-crosslinks">
  Generate color palettes &rarr; <a href="/tools/color-palette-generator/">Color Palette Generator</a><br>
  Check color contrast &rarr; <a href="/tools/color-contrast-checker/">Color Contrast Checker</a><br>
  Simulate color blindness &rarr; <a href="/tools/color-blindness-simulator/">Color Blindness Simulator</a>
</div>

Color Blindness Simulator Color Contrast Checker Color Converter