<div class="container">

  <h2>Complementary Colors</h2>
  <div class="base-oklch-color"></div>
  <div class="complementary-oklch-color"></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);
}

/* COMPLEMENTARY COLORS */

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