An experiment on natural color shades. NOTE: doesn't work with pure gray tones at the moment.
A Pen by Phoenix Enero on CodePen.
<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> |
An experiment on natural color shades. NOTE: doesn't work with pure gray tones at the moment.
A Pen by Phoenix Enero on CodePen.
$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); | |
} | |
} | |
} | |
} |