JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="color-1"> </div>

SCSS

$base-color: #B5E099;
$max-difference: 3;
$max-difference-percent: $max-difference / 100;

$prev-color: $base-color;

@for $i from -8 to 8 {
  $color: adjust-color($base-color, $lightness: $i * 5%);
  
  // Check color difference against previous color
  $yiq1: nth(color-yiq($prev-color), 1);
  $yiq2: nth(color-yiq($color), 1);
  $yiq-diff: $yiq1 - $yiq2;
  @if ($i == -8) or ($yiq-diff < ($max-difference-percent / 2)) {
    $prev-color: $color;
    $color-name: "color-#{$i+8}";
    #{$color-name} {
      background-color: $color;
    }
  }
}


div {
	display: inline-block;
	width: 100px;
	height: 100px;
}