Natural color shades and tints

index.html

<p>An experiment on natural color shades.</p>
<table>
  <thead>
    <tr>
      <td>Base Color</td>
    </tr>
  </thead>
  <tbody class="demo-table">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Natural-color-shades-and-tints.markdown

Natural color shades and tints

An experiment on natural color shades. NOTE: doesn't work with pure gray tones at the moment.

A Pen by Phoenix Enero on CodePen.

License.

style.scss

$base-color: #79d86f;

@function natural-colors($base-color, $steps: 8, $hue-shade: hue(#00f), $hue-tint: hue(#ff0), $saturation-factor: (1 / 3), $hue-factor: (1/5)) {
  $natural-colors-result: ($base-color);
  $natural-colors-l: ($steps / 2);
  
  @for $i from 1 through $steps {
    @if $i > ($steps / 2) {
      $natural-colors-color: mix(#fff, $base-color, (($i - $natural-colors-l) / $natural-colors-l * 100%));
      $natural-colors-color: saturate($natural-colors-color, (lightness($natural-colors-color) - 50%) * 2 * $saturation-factor);
      $natural-colors-color: change-color($natural-colors-color, $hue: hue($natural-colors-color) * (1 - $hue-factor) + (lightness($natural-colors-color))*2/100% * $hue-tint * ($hue-factor));
      $natural-colors-result: append($natural-colors-result, $natural-colors-color);
    } @else {
      $natural-colors-color: mix($base-color, #000, ($i / $natural-colors-l * 100%));
      $natural-colors-color: saturate($natural-colors-color, (100% - lightness($natural-colors-color)) * 2 * $saturation-factor);
      $natural-colors-color: change-color($natural-colors-color, $hue: hue($natural-colors-color) * (1 - $hue-factor) + (100% - lightness($natural-colors-color))*2/100% * $hue-shade * ($hue-factor));
      $natural-colors-result: append($natural-colors-result, $natural-colors-color);
    }
  }
  
  @return $natural-colors-result;
}

$palette: natural-colors($base-color);

td {
  padding: 0.5em;
}

.demo-table {
  td {
    height: 2em;
    min-width: 3em;
    
    @for $i from 1 through length($palette) {
      &:nth-child(#{$i}) {
        background-color: nth($palette, $i);
      }
    }
  }
}