Generated by SassMeister.com.

input.scss

/**
 * Function defining the difference between 2 colors
 *
 * @param {Color} $a - first color
 * @param {Color} $b - second color
 *
 * @return {Map}  The color operations to do in order to find $b from $a where keys are the color functions to apply and values are the values to pass to these functions
 */
@function color-diff($a, $b) {
  $sat: saturation($a) - saturation($b);
  $lig:  lightness($a) -  lightness($b);
  $fn-sat: if($sat > 0, 'desaturate', 'saturate');
  $fn-lig: if($lig > 0, 'darken', 'lighten');
  
  @return (
    adjust-hue: -(hue($a) - hue($b)),
    #{$fn-sat}: abs($sat),
    #{$fn-lig}: abs($lig)
  );
}
 
/**
 * Compute the diff for each color from the initial palette
 *
 * @param {Map} $palette - palette
 *
 * @requires {function} color-diff
 * 
 * @return {List} list of diffs
 */
@function palette-diff($palette) {
  $base: map-get($palette, base);
  $colors: map-get($palette, colors);
  
  $diffs: ();
  
  @each $color in $colors {
    $diffs: append($diffs, color-diff($base, $color));
  }
  
  @return $diffs;
}

/**
 * Initial palette used to define the diff between the base color and each color from the palette. There can be as many colors as one wants.
 * 
 * @Link https://ton.twitter.com/i/ton/data/dm/487926326314418176/487926326322823168/8M2k8xOp.png Initial color palette
 *
 * @type Map
 */ 
$base-palette: (
  base: #FF6351, 
  colors: #CFDFE8 #BFB9C3 #CF9192 #FF6351 #BF4A3C #7F3128 #732C24
) !default;

/**
 * Palette diffs
 * Same length as colors key from map-palette
 *
 * @type List
 */
$palette-diffs: palette-diff($base-palette);

/**
 * Apply differences returned from `color-diff` function to a color in order to retrieve the second color
 *
 * @param {Color} $color - color to transform
 * @param {Map} $diff - diff map
 * 
 * @return {Color} transformed color
 */
@function apply-diff($color, $diff) {
  // We call the $key (function), 
  // passing the $color and the $value as parameters
  // e.g. `call(adjust-hue, #BADA55, 42)`
  @each $key, $value in $diff {
    $color: call($key, $color, $value);
  }
  
  @return $color;
}

/**
 * Create a palette from a base color
 *
 * @param {Color} $base-color - base color for the palette
 *
 * @requires {function} palette-diff
 * @requires {function} apply-diff
 * @requires {variable} $base-palette
 *
 * @return {List} list of colors
 */
@function create-palette($base-color) {
  $colors: ();
  
  @each $diff in $palette-diffs {
    $colors: append($colors, apply-diff($base-color, $diff));
  }
  
  @return $colors;
}

/**
 * Create a list of colors from the base color
 * then turn in into a map with explicit keys
 *
 * @param {Color} $base-color - base color for the palette
 *
 * @requires {function} create-palette
 *
 * @return {Map}
 */
@function palette($base-color) {
  $colors: create-palette($base-color);
  $keys: 'lightest' 'lighter' 'light' 'base' 'dark' 'darker' 'darkest';
  $palette: ();

  @for $i from 1 through min(length($colors), length($keys)) {
    $palette: map-merge($palette, (nth($keys, $i): nth($colors, $i)));
  }

  @return $palette;
}

/**
 * Create and apply a palette
 * 
 * @param {Color} $base-color - base color
 * 
 * @requires {function} create-palette
 */
@mixin draw-palette($base-color) {
  $palette: create-palette($base-color);
  $length: length($palette);
  $color-stops: append((), nth($palette, 1), comma);
  $stop-size: 100 / $length;

  @for $i from 1 through $length {
    $color: nth($palette, $i);
      
    @if $i > 1 {
      $color-stops: append($color-stops, $color $stop-size * ($i - 1) * 1%);
    }
    
    $color-stops: append($color-stops, $color $stop-size * $i * 1%); 
  }

  background: nth($palette, ceil($length / 2));
  background: linear-gradient(to right, $color-stops);
}

// Palettes
// Change a value to see the palette adjusted
.test-1 { @include draw-palette(red) }
.test-2 { @include draw-palette(tomato) }
.test-3 { @include draw-palette(deepskyblue) }
.test-4 { @include draw-palette(gold) }
.test-5 { @include draw-palette(magenta) }
.test-6 { @include draw-palette(silver) }


// Demo styles
.test {
  margin: 1em 0;
  height: 6em;
}

.p {
  text-align: center;
}

markup.html

<div class="test test-1"></div>
<div class="test test-2"></div>
<div class="test test-3"></div>
<div class="test test-4"></div>
<div class="test test-5"></div>
<div class="test test-6"></div>

<p class="p">Demo by Hugo Giraudel. <a href="">See article</a>.</p>

output.css

/**
 * Function defining the difference between 2 colors
 *
 * @param {Color} $a - first color
 * @param {Color} $b - second color
 *
 * @return {Map}  The color operations to do in order to find $b from $a where keys are the color functions to apply and values are the values to pass to these functions
 */
/**
 * Compute the diff for each color from the initial palette
 *
 * @param {Map} $palette - palette
 *
 * @requires {function} color-diff
 * 
 * @return {List} list of diffs
 */
/**
 * Initial palette used to define the diff between the base color and each color from the palette. There can be as many colors as one wants.
 * 
 * @Link https://ton.twitter.com/i/ton/data/dm/487926326314418176/487926326322823168/8M2k8xOp.png Initial color palette
 *
 * @type Map
 */
/**
 * Palette diffs
 * Same length as colors key from map-palette
 *
 * @type List
 */
/**
 * Apply differences returned from `color-diff` function to a color in order to retrieve the second color
 *
 * @param {Color} $color - color to transform
 * @param {Map} $diff - diff map
 * 
 * @return {Color} transformed color
 */
/**
 * Create a palette from a base color
 *
 * @param {Color} $base-color - base color for the palette
 *
 * @requires {function} palette-diff
 * @requires {function} apply-diff
 * @requires {variable} $base-palette
 *
 * @return {List} list of colors
 */
/**
 * Create a list of colors from the base color
 * then turn in into a map with explicit keys
 *
 * @param {Color} $base-color - base color for the palette
 *
 * @requires {function} create-palette
 *
 * @return {Map}
 */
/**
 * Create and apply a palette
 * 
 * @param {Color} $base-color - base color
 * 
 * @requires {function} create-palette
 */
.test-1 {
  background: red;
  background: linear-gradient(to right, #98c0ce, #98c0ce 14.2857142857%, #958d9e 14.2857142857%, #958d9e 28.5714285714%, #b65964 28.5714285714%, #b65964 42.8571428571%, red 42.8571428571%, red 57.1428571429%, #812929 57.1428571429%, #812929 71.4285714286%, #411515 71.4285714286%, #411515 85.7142857143%, #351111 85.7142857143%, #351111 100%);
}

.test-2 {
  background: tomato;
  background: linear-gradient(to right, #c8d9e5, #c8d9e5 14.2857142857%, #bbb4be 14.2857142857%, #bbb4be 28.5714285714%, #cc8c8a 28.5714285714%, #cc8c8a 42.8571428571%, tomato 42.8571428571%, tomato 57.1428571429%, #b74d3a 57.1428571429%, #b74d3a 71.4285714286%, #773226 71.4285714286%, #773226 85.7142857143%, #6b2d22 85.7142857143%, #6b2d22 100%);
}

.test-3 {
  background: deepskyblue;
  background: linear-gradient(to right, #ceb398, #ceb398 14.2857142857%, #919e8d 14.2857142857%, #919e8d 28.5714285714%, #59aab6 28.5714285714%, #59aab6 42.8571428571%, deepskyblue 42.8571428571%, deepskyblue 57.1428571429%, #296b81 57.1428571429%, #296b81 71.4285714286%, #153641 71.4285714286%, #153641 85.7142857143%, #112c35 85.7142857143%, #112c35 100%);
}

.test-4 {
  background: gold;
  background: linear-gradient(to right, #9e98ce, #9e98ce 14.2857142857%, #9e8d98 14.2857142857%, #9e8d98 28.5714285714%, #b69c59 28.5714285714%, #b69c59 42.8571428571%, gold 42.8571428571%, gold 57.1428571429%, #817429 57.1428571429%, #817429 71.4285714286%, #413a15 71.4285714286%, #413a15 85.7142857143%, #352f11 85.7142857143%, #352f11 100%);
}

.test-5 {
  background: fuchsia;
  background: linear-gradient(to right, #98cea6, #98cea6 14.2857142857%, #8d969e 14.2857142857%, #8d969e 28.5714285714%, #ab59b6 28.5714285714%, #ab59b6 42.8571428571%, fuchsia 42.8571428571%, fuchsia 57.1428571429%, #812981 57.1428571429%, #812981 71.4285714286%, #411541 71.4285714286%, #411541 85.7142857143%, #351135 85.7142857143%, #351135 100%);
}

.test-6 {
  background: silver;
  background: linear-gradient(to right, #f4f4f4, #f4f4f4 14.2857142857%, #d6d6d6 14.2857142857%, #d6d6d6 28.5714285714%, #c8c8c8 28.5714285714%, #c8c8c8 42.8571428571%, silver 42.8571428571%, silver 57.1428571429%, #969696 57.1428571429%, #969696 71.4285714286%, #6c6c6c 71.4285714286%, #6c6c6c 85.7142857143%, #646464 85.7142857143%, #646464 100%);
}

.test {
  margin: 1em 0;
  height: 6em;
}

.p {
  text-align: center;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}