Fun with Colors (Sass Maps, Loops, and !global)

The Goal

Make a color scheme with Sass that is generated from a single value and uses a basic color wheel approach. The only way to make it really useful was for the color variables to be logically named (ex: $red or$redLight) instead of $color1, $color2, etc.

Naming Names

The first step was to figure out how to analyze colors with just Sass and create variables with logical names.

The solution analyzes the input color (hex, rgb, etc) and determine the correct hue range, saturation level, and lightness. First, the maps with hue ranges needed to be created. In some of the maps you will notice a null key in place of an actual value. Sass will actually render this as empty, which works great for the colors that fall in the middle of ranges (ex: red).

// Hue
$hue: (
red: 0deg,
orange: 20deg,
yellow: 40deg,
greenyellow: 60deg,
green: 80deg,
teal: 150deg,
blue: 180deg,
purple: 260deg,
pink: 290deg
);

The easiest way to analyze the color is simply through the hue, saturation, and lightness properties.

$hue-output: hue($base);
$saturation-output: saturation($base);
$lightness-output: lightness($base);

At each step, the loop will rename the variable to match the color. Using !global turned out to be the key to creating variables inside mixins and referencing them outside of the mixin.

// Find the Hue
@each $value, $degrees in $hue {
@if $hue-output >= $degrees {$hueColor: #{$value} !global;}

// Find the Lightness
@each $value, $range in $lightness {
@if $lightness-output >= $range {$lightenColor: #{$hueColor}#{$value} !global;}

// Find the Saturation
@each $value, $range in $saturation {
@if $saturation-output >= $range {$colorName: #{$lightenColor}#{$value} !global;}
}
}
}

The loop generates a new variable named $colorName and can be used at any level. The variable name can easily be turned into the output of the loop (ex: $redLight)

content:'#{$colorName}';

Check out the result below and make sure to try it out for yourself – link

See the Pen Color Name & Variable Generator w/ Sass maps and @each loops by Chris Holder (@see8ch) on CodePen.0

It will need to have some more thresholds for grays and brightness and such, but it works well enough to move onto the next part.

The Scheme

Using the name/variable generator from the first part of the post, I was able to create a mixin that generated a few different schemes (monochrome, analogous, and triad) as well as some tweaking options (hue, saturation, etc.).

Theoretically, with this you could generate a whole color scheme with logically named variables (ex: $redLight, $blueDark, etc) that can be used at any level.

@include wheel (
#ff33cc, // Color
triad, // Scheme (monochrome, analgous, triad, complimentary)
10%, // Saturation in %
0, // Desaturation in %
3deg // Hue Adjustment
);

The triad portion of the mixin

// Triad
@if $scheme == triad {
$color1: $spincolor !global;
$color2: darken($color1, 20%) !global;
$color3: desaturate(adjust-hue($spincolor, 120deg), 5%) !global;
$color4: desaturate(adjust-hue($spincolor, 240deg), 5%) !global;
$color5: darken($color4, 20%) !global;
}

Example output from a triad scheme. The variable names are displayed over the colors in this example. Give it a try for yourself – link

See the Pen Color Scheme & Named Variable Generator w/ Sass maps, by Chris Holder (@see8ch) on CodePen.0

The mixin is undeniably bloated and repetitve at the moment, but I hope to get to that. There are also a few more scheme options that I would like to include as well as finish out the tint and shade portions.

 

 

Leave a Reply