<h1>Tetradic Colors</h1>

<div class="container">
  <div class="box box01">Tetradic 1</div>
  <div class="box box02">Tetradic 2</div>
  <div class="box box03">Tetradic 3</div>
  <div class="box box04">Tetradic 4</div>
</div>

* {
  box-sizing: border-box;
}

:root {
  /* font settings */
  font-family: system-ui, sans-serif;
  font-size: 1.2rem;
  /* Base Color Settings */
  --tetradic1: #663399;
  --tetradic2: oklch(from var(--tetradic1) l c calc(h + 90));
  --tetradic3: oklch(from var(--tetradic1) l c calc(h + 180));
  --tetradic4: oklch(from var(--tetradic1) l c calc(h + 270));
}

body {
  display: flex;
  flex-direction: column;
  place-items: center;
}

.container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.box {
  inline-size: 200px;
  block-size: 200px;
  border: 1px solid black;

  /* optional */
  display: flex;
  place-content: center;
  align-items: center;
}

.box01 {
  background: var(--tetradic1);
  color: color-contrast(var(--tetradic1) vs white, black);
}

.box02 {
  background: var(--tetradic2);
  color: color-contrast(var(--tetradic2) vs white, black);
}

.box03 {
  background: var(--tetradic3);
  color: color-contrast(var(--tetradic3) vs white, black);
}

.box04 {
  background: var(--tetradic4);
  color: color-contrast(var(--tetradic4) vs white, black);
}