<svg class="canvas" viewBox="0 0 200 200"></svg>
<button>Randomize color palette</button>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0, 0%, 96%);
}

.canvas {
  width: 75vmin;
  height: 75vmin;
  background: hsl(0, 0%, 100%);
}

button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: #111;
  color: #fff;
  border: 0;
  padding: 0.75rem; 1.5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
}

rect {
  stroke-width: 4;
  stroke: #fff;
}

import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
import { random } from "https://cdn.skypack.dev/@georgedoescode/generative-utils@1.0.0";

const svg = SVG(".canvas");
const btn = document.querySelector('button');

function generate() {
  svg.clear();
  
  const baseHue = random(0, 360);
  const saturation = 100;
  const lightness = 75;

  const baseColor = `hsl(${baseHue}, ${saturation}%, ${lightness}%)`;
  const complimentaryColor1 = `hsl(${baseHue + 120}, ${saturation}%, ${lightness}%)`;
  const complimentaryColor2 = `hsl(${baseHue + 240}, ${saturation}%, ${lightness}%)`;

  svg
    .rect(48, 48)
    .cx(100 - 48)
    .cy(100)
    .fill(baseColor);

  svg
    .rect(48, 48)
    .cx(100)
    .cy(100)
    .fill(complimentaryColor1);

  svg
    .rect(48, 48)
    .cx(100 + 48)
    .cy(100)
    .fill(complimentaryColor2);
}

generate();

btn.addEventListener('click', () => {
  generate();
})