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;

Getting a lighter or darker version of a color

Use the lighter and darker functions of the Color class:

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints #111a91
print $dark_blue + "\n";
 
var Color lighter_blue = $dark_blue->lighter();
# prints #1824c6
print $lighter_blue + "\n";
 
var Color even_lighter_blue = $dark_blue->lighter(60);
# print #3340e7
print $even_lighter_blue + "\n";
 
var Color light_blue = "#6F93E7";
# prints #6f93e7
print $light_blue + "\n";
 
var Color darker_blue = $light_blue->darker();
# prints #3c6dde
print $darker_blue + "\n";
 
var Color even_darker_blue = $light_blue->darker(60);
# prints #2050be
print $even_darker_blue + "\n";
 
"""</pre>""";

Getting the inverse of a color

Use the inverse function of the Color class:

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints #111a91
print $dark_blue + "\n";
 
var Color inverse_blue = $dark_blue->inverse();
# prints #eee56e
print $inverse_blue + "\n";
 
"""</pre>""";

Getting a color's values

There are functions to access both RGB and HSL values:

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints "#111a91"
print $dark_blue + "\n";
 
# prints "R: 17 G: 26 B: 145"
print "R: " + $dark_blue->red() +
      " G: " + $dark_blue->green() +
      " B: " + $dark_blue->blue() + "\n";
 
# prints "H: 167 S: 201 L: 81"
print "H: " + $dark_blue->hue() +
      " S: " + $dark_blue->saturation() +
      " L: " + $dark_blue->lightness() + "\n";
 
"""</pre>""";

Altering a color's values

You can alter a color's RGB values, too:

"""<pre>""";
 
var Color dark_blue = "#111A91";
# prints "#111a91"
print $dark_blue + "\n";
 
# prints "#281a91"
$dark_blue->red(40);
print $dark_blue + "\n";
 
# prints "#28b491"
$dark_blue->green(180);
print $dark_blue + "\n";
 
# prints "#28b4c8"
$dark_blue->blue(200);
print $dark_blue + "\n";
 
# setting hue, saturation, lightness seem to be broken currently?

"""</pre>""";