S2 Cookbook: Colors

To work with colors we use the Color class. With it, you can work with RGB or HSL values.

Creating a color from a hex string

You can create a new Color variable from a valid hex string just by assigning the string to the variable. If the string isn't a valid color, the resulting variable will be undefined.

"""<pre>""";
 
var Color white = "#FFF";
# prints "#ffffff"
print $white + "\n";
$white = "#000000";
print $white + "\n";
 
# $invalid will end up undefined
var Color invalid = "none";
# prints nothing
print $invalid;
 
# prints "Not defined!"
if ( not defined $invalid ) {
   print "Not defined!\n";
}
 
"""</pre>""";

Getting the hex string from a color

Unlike most objects, you can assign directly between strings and Color objects. You can use a Color class' member variable as_string.

"""<pre>""";
 
var Color white = "#FFF";
var string background = $white;
 
# prints "#ffffff"
print $background + "\n";
 
$background = $white.as_string;
# prints "#ffffff"
print $background + "\n";
 
"""</pre>""";

Blending two colors together

If you want a straight up average between two colors:

var Color white = "#FFF";
var Color black = "#000";
var Color mix = $white->average($black);
 
# prints "#808080"
print $mix;

If you want to blend one color with another at a certain percentage/weight:

var Color white = "#FFF";
var Color black = "#000";
# 75% black, 25% white
var Color mix = $white->blend($black, 75);
 
# prints "#404040"
print $mix;