<div class="container">
  <h2>Triadic Colors</h2>
  <div class="base-oklch-color"></div>
  <div class="triadic-oklch-color1"></div>
  <div class="triadic-oklch-color2"></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;
}

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

/* TRIADIC COLORS */

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

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