color-space-gradients.png

color-space-gradients.scss

@use 'sass:color';
@use 'sass:list';
@use 'sass:math';

$start: red;
$end: blue;

@function gradient($space, $stops: 20) {
  $stops-list: ($start 0%,);
  @for $i from 1 through $stops {
    $percentage: math.div(100% * $i, ($stops + 1));
    $color: color.mix($start, $end, 100% - $percentage, $space);
    $stops-list: list.join($stops-list, ($color $percentage,));
  }

  @return linear-gradient(90deg, $stops-list, $end 100%);
}

.gradient {
  width: 100%;
  height: 100px;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 5px;

  @each $space in srgb, srgb-linear, xyz-d50, xyz-d65, lab, lch, oklab, oklch {
    &.#{$space} {
      background: gradient($space);
    }
  }
}