<div class="container">

  <h2>Lightening colos</h2>
  <div class="base-oklch-color"></div>
  <div class="light10-oklch-color"></div>
  <div class="light20-oklch-color"></div>
  <div class="light30-oklch-color"></div>
  <div class="light40-oklch-color"></div>
  <div class="light50-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);
}

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

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

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

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

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