<div class="container">
  <h2>Tetradic Colors</h2>
  <div class="base-oklch-color"></div>
  <div class="tetradic-oklch-color1"></div>
  <div class="tetradic-oklch-color2"></div>
  <div class="tetradic-oklch-color3"></div>
</div>

:root {
  --base-green: green;
}

body {
  font-family: Raleway, sans-serif;
}

.container {
  width: 50rem;
  margin: 0 auto;
}

div:not(.container) {
  inline-size: 40vw;
  block-size: 100px;
  margin-block-end: 2rem;
  border: 3px solid black;
}

/* TETRADIC COLORS*/
.base-oklch-color {
  background: oklch(from var(--base-green) l c h);
}

.tetradic-oklch-color1 {
  background: oklch(from var(--base-green) l c calc(h + 90));
}

.tetradic-oklch-color2 {
  background: oklch(from var(--base-green) l c calc(h + 180));
}

.tetradic-oklch-color3 {
  background: oklch(from var(--base-green) l c calc(h + 270));
}